Explain Codes LogoExplain Codes Logo

Chrome Download Attribute not working to replace the original name

web-development
prompt-engineering
best-practices
performance
Nikita BarsukovbyNikita Barsukov·Sep 15, 2024
TLDR

avenue

Confirm your usage of the download attribute is spot on:

  • Your <a> tag should point at a direct URL via the href attribute.
  • The server's Content-Disposition header isn't wrestling with your download attribute.
  • Is it same-origin or cross-origin? If the latter, CORS headers need to wave it through.

Example in-action:

<!-- Excuse me, I am a polite download tag --> <a href="/path/to/file" download="desired-filename">Download</a>

If it's not playing ball, check whether server headers or CORS are the culprits.

Gathering insights - Headers vs Attributes

Juggling client-side and server-side controls

Knowing the tightrope walk between client and server controls in Chrome goes a long way. Here are the performers:

  • Client-side: Your download attribute is assuming the lead role in dictating the desired filename.
  • Server-side: HTTP headers like Content-Disposition and Content-Type sneak into the director's chair when governing downloads.

Chrome's hierarchy of control

Chrome says server-side first, leaving attributes to wait in the wing. That's why even a correctly set download attribute can be outranked by a Content-Disposition header like attachment; filename=Name.xspf.

Cross-origin requests in Chrome are akin to Obi-Wan saying: "These aren't the attributes you're looking for." It straight up ignores the download for cross-origin files. Your best bet for these scenarios is mastering CORS and server-side headers.

Adapt to recent upgrades

Google Chrome has tightened up its security policies, and these plays impact how the download attribute behaves. It's worth keeping tabs on the browser's official update rollouts.

Chrome-proof your files - Tips for devs

So, how do we banish bugs and live happily ever after in Developerdom?

Same-domain or CORS setup

There's no place like home. Make sure your files are hosted on the same domain. If not, server-side CORS headers need to light the way for downloads across domains.

Tinker with server-side headers

To keep Chrome in check, you might have to reach for your server-side toolkit. Make adjustments to ensure Content-Disposition headers are being cooperative.

Stick to relative paths in href

Working with WordPress or similar content management systems? Avoid full path mayhem by using relative paths in your href attribute.

Engage in Chromium talk

Maintaining communication with the Chromium community can be a gold mine for tips and collaborative problem-solving. Topics like issue 373182 offer plenty of insights on download attribute behavior.

Tick these boxes - Testing your setup

Calling server response headers

Whip out curl to test server response headers:

# Peekaboo, server! curl -I http://example.com/file

Check that Content-Type is all set, and Content-Disposition is specifying the filename as attachment.

A deeper inspection

Chrome’s DevTools have your back here. Inspect Response Headers of your network request for quirkiness in Content-Type and Content-Disposition.

Use the force… of the community

Don't shy away from the crowd. Reach out to the Chromium's bug tracker or web development forums for additional pathways to victory.