Frontend

Debugging Issues with HTML Download Attribute

·1 min read

Earlier today I spent the better part of a couple of hours scratching my head over a seemingly simple issue, so I thought I’d share the problem I encountered and the resolution I finally found.

When linking to a file using the <a download> attribute, I was having trouble getting the actual file to download. The app that I was working on has been using the download attribute for a few years and never had any issues.

Recently, though, when users click on the link to download the asset, the file is opened in a new tab rather than being downloaded.

After several dead-ends, I finally found the culprit.

A couple of months ago, several browser vendors shipped an important security update to the <a download> attribute, effectively ignoring the flag when the file source is cross-origin.

Fear not… There’s hope, after all!

Setting the Content-Disposition header to attachment signals the client to download the file.

In my case, the files that users download live on S3. Fortunately, AWS allows you to bulk update the the headers for all files in a given bucket or folder within a bucket. Just right click the file or folder and select Change Metadata.

Jon Bellah

Jon Bellah

I am a software engineer, teacher, speaker, and occasional writer. I live in the beautiful city of Denver, Colorado. You can follow me on Twitter at @jonbellah.

Like what you've read?

If so, consider joining literally tens of other developers who receive regular tips and tutorials right in their inbox. No spam. Ever.