HTML5 download opens image in browser in FF and Safari

Question

I have the following HTML on the footer of a lightbox :

<div class="modal-footer">
    <a href="https://s3-ap-southeast-2.amazonaws.com/auprodsi/03/16/e257691a-bca5-4ae9-af61-7d7b059bec70.jpg" class="btn btn-primary btn-xs lightbox-link ekko-download-link" download="E0000000001.jpg">Download</a>
</div>

In Chrome the file downloads. In FF and Safari, it just opens the image in the browser. From answers I have seen to this question, I see my HTML is correct. Any ideas? Thanks!

EDIT *****************************************************

It seems that since the image is on an S3 bucket that CORS/Cross Domain policy is getting in the way (per suggestions below).

We set up a CNAME with img.domain.com... but the sub domain is treated the same way.

Any suggestions on how to work around this? I need a download button for the image, working just like it does in Chrome, but for Safari and FF. Thanks.

Answer 1

Firefox only allows users to download files of the same origin due to a security concern (I can't tell if that applies to you based on the information provided). But the file must come from your own server or domain name, otherwise it will be opened in the browser.

Mozilla issue tracker discussion on the subject here .

Looks like Safari only added support recently for the download attribute. You might check your Safari version.