Amazon S3 image fetching CORS Error/Bug in Chrome, no errors in Firefox

Question

There's a bug or error, which might very well be fixable with configuration options in Amazon S3 when fetching images. I've seen a reference about this in Stack Overflow and the AWS Forums . What most of those didn't do is make it easy to replicate, which the fiddles below should, so this is easy to visualize.

Here is a JS Fiddle that connects to an image in our current instance:

http://jsfiddle.net/02nojg8w/

As you can see inside the <img> tag, the image can be fetched normally, even inside Chrome. However, when you try to Convert via Canvas or Filereader it will not work, throwing the following errors:

Canvas

Image from origin 'https://siga-pmx.s3.amazonaws.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://fiddle.jshell.net' is therefore not allowed access.

File Reader

XMLHttpRequest cannot load https://siga-pmx.s3.amazonaws.com/digitalization/1448213569280_saya_pixel.png. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://fiddle.jshell.net' is therefore not allowed access.

Essentially when loading images with a request from Chrome and Chromium in Windows systems the request will fail, it also fails in Microsoft Edge. I've confirmed this with multiple Windows 7, and Windows 10 machines. But on those same machines if you use Firefox to do the same request it will work. A friend could not replicate this on OS X Chrome/Chromium.

The initial configuration we were using was this:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Authorization</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

And after trying some Stack Overflow answers dealing with something similar we switched to this:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <ExposeHeader>ETag</ExposeHeader>
        <AllowedHeader>Authorization</AllowedHeader>
    </CORSRule>
    <CORSRule>
        <AllowedOrigin>http://*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <ExposeHeader>ETag</ExposeHeader>
        <AllowedHeader>Authorization</AllowedHeader>
    </CORSRule>
    <CORSRule>
        <AllowedOrigin>https://*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <ExposeHeader>ETag</ExposeHeader>
        <AllowedHeader>Authorization</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

You might think maybe it's a browser-wide issue, however, if we use the same JSFiddle with an image from, for example, Wikimedia commons it will work on Chrome and Edge, see the JS Fiddle below.

http://jsfiddle.net/hy4wxggx/

How should our CORS configuration look if we want to fix this issue? Or another option for a viable answer is: How would we edit our Canvas JavaScript method so that it properly fetches these images?

Answer 1

Managed to fix this. First I changed the S3 CORS configuration to the following:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

Allowing any Header, and then I switched the URL we use to access the files from 'https' to 'http'.

Https will still throw the errors even with the above configuration, it's essential to use http.

After that everything works in Chrome/Chromium.

Answer 2

For safari fix, Add head in allow method in cors configuration for s3 bucket. so it looks like this

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
  <CORSRule>
    <AllowedOrigin>http://www.example.com</AllowedOrigin>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>DELETE</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
  </CORSRule>
  <CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
  </CORSRule>
</CORSConfiguration>