Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML5 download attribute not working when downloading from another server, even when Access-Control-Allow-Origin is set to all (*)

Tags:

I have a download link like so:

<a href="foo.xls" download="bar.xls">Foobar</a> 

This works fine when downloading a file on the same server, but when downloading from another server (Azure blob storage in this case) the filename stays as "foo.xls", even though the HTTP response comes back with the following header:

Access-Control-Allow-Origin: *

Is this by design or is there potentially another header I can to add to the HTTP response to get this to work?

like image 712
JMK Avatar asked Feb 04 '15 09:02

JMK


People also ask

Why download attribute not working HTML?

The download attribute only works for same-originl URLs. So if the href is not the same origin as the site, it won't work. In other words, you can only download files that belongs to that website.

How do I make my html file downloadable?

The download attribute is only used if the href attribute is set. The value of the attribute will be the name of the downloaded file. There are no restrictions on allowed values, and the browser will automatically detect the correct file extension and add it to the file (. img, .

How does HTML download attribute work?

The download attribute specifies that the target (the file specified in the href attribute) will be downloaded when a user clicks on the hyperlink. The optional value of the download attribute will be the new name of the file after it is downloaded.

How do I download cross domain images?

Solution 2 First create anchor tag with href to the image you want to download. If you want you can set custom name to the save.as file (download attribute). Then JS function fetchImageAndDownload. And then PHP part.


1 Answers

Yes, it is by design that the CORS headers have no affect on the download attribute. There are only two browsers that support the download attribute, Firefox and Chrome, and both browsers have a different policy on cross-origin files.

Chrome versions prior to 65 actually did allow the download attribute on cross-origin files, without CORS headers, but Firefox chose not to, citing potential social-engineering attacks.

MDN documents this behavior for Firefox 20 under the download attribute section for the a tag, behavior that has not changed since.

In Firefox 20 this attribute is only honored for links to resources with the same-origin.


This Bugzilla report discussed the security concerns and the possibility of using CORS.

When the user clicks such a link, the user will be prompted if they want to download. It seems very easy for the user to make the mistake of thinking that something on the original website is being downloaded, and not something from bank.com.


Would it be possible to implement it with same-origin and CORS (Access-Control-Allow-Origin) in mind if you are questioning cross origin security? This is very useful feature for web applications (create Blob using JS and let user download it with some meaningful name)

Google was opposed to using CORS for this.


There's also this Bugzilla report, which summarizes their decision from the other bug report.

Also, cross origin downloads are working perfectly in Google Chrome.

Yes, and we think they're adding security bugs by doing that.

The Bugzilla issues don't seem to rule-out the possibility of using CORS for cross-origin download attribute support in the future, but right now using CORS headers does not do anything for the download attribute. It's possible that if other browsers start supporting the attribute, a consensus may yet be reached.

For sake of completeness, there is of course the Content-Disposition header which you can use to force a download from the other domain, but this does not provide the same functionality as the download attribute. It does have better browser support though.

like image 84
Alexander O'Mara Avatar answered Sep 25 '22 05:09

Alexander O'Mara