Image saved con Amazon S3 bucket not showing on HTML5 canvas. Crossorigin issue

Question

I have an image saved on my AWS S3 bucket. This is my CORS configuration:

<CORSConfiguration>
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Authorization</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

Also, the bucket has this policy:

{
    "Version": "2012-10-17",
    "Id": "Policy1468082822770",
    "Statement": [
        {
            "Sid": "Stmt1468082812651",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::criptolibertad/*"
        }
    ]
}

This is the image: https://criptolibertad.s3.amazonaws.com/Django/0_startproject.jpeg , as you can see, it is public. I use a library called Croppie that tries to load the image into a canvas. But the canvas doesn't show the image I don't know why. The js looks like this:

croppie_div.croppie('bind', {
    url: "{{ carta_magicpy.imagen_base.url }}",
    points:  [10,10,300,600]
});

That url attribute is just a variable rendered by Django. It looks like this when it is rendered:

<img style="opacity: 0;" src="https://criptolibertad.s3.amazonaws.com/Django/0_startproject.jpeg" crossorigin="anonymous" class="cr-image">

Notice the crossorigin attribute. I went into Croppie's source and removed that attribute. But then I get the error:

Image from origin ... has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource

How can I solve this?

The change in behavior seems to suggest that CORS configuration on the bucket is correct and `crossorigin="anonymous"` was also correct. That is both sensible and confusing since it implies it should have been working. Have you done any testing with different browsers? — Michael - sqlbot, Jul 14 '16 at 11:33

score 3 · Accepted Answer · edited May 23 '17 at 12:33

Seems the CORS headers are still not set correctly. This related Croppie issue #119 mentions you can check that by looking at the response headers.

It's pretty easy to inspect the headers with curl, for the image stored in your bucket:

curl -I -H "Origin: https://stackoverflow.com/questions/38365182" -H "Access-Control-Request-Method: GET" https://criptolibertad.s3.amazonaws.com/Django/0_startproject.jpeg
HTTP/1.1 200 OK
x-amz-id-2: 9AaMwS9s2Im+OV6YlzVKrDW8RnbQqFt4Ygc+pRa3XM4iDmnJqlO8DQ7EjvpT4W4GnhGc0IvoQeI=
x-amz-request-id: CD4E7C50B5186192
Date: Fri, 15 Jul 2016 07:54:52 GMT
Last-Modified: Sat, 09 Jul 2016 05:13:33 GMT
ETag: "5733f7cd0187eb3a840bbe83e2c66a9b"
Accept-Ranges: bytes
Content-Type: image/jpeg
Content-Length: 33402
Server: AmazonS3

As opposed to the properly set up CORS headers on e.g imgur:

curl -I -H "Origin: https://stackoverflow.com/questions/38365182" -H "Access-Control-Request-Method: GET" http://i.imgur.com/HMf7XWD.jpg
HTTP/1.1 200 OK
Last-Modified: Wed, 06 Jul 2016 15:07:13 GMT
ETag: "7b01be4b9235542038f6d9793cc2c620"
Content-Type: image/jpeg
Fastly-Debug-Digest: f94b623450bb8143aff369600bf855d6332bb44c12070f02b0fc95648eac6ef3
cache-control: public, max-age=31536000
Content-Length: 2457350
Accept-Ranges: bytes
Date: Fri, 15 Jul 2016 07:55:15 GMT
Age: 277937
Connection: keep-alive
X-Served-By: cache-iad2131-IAD, cache-fra1232-FRA
X-Cache: HIT, HIT
X-Cache-Hits: 1, 1
X-Timer: S1468569315.725739,VS0,VE2
Access-Control-Allow-Methods: GET, OPTIONS
Access-Control-Allow-Origin: *
Server: cat factory 1.0

As you can see the main difference is that imgur returns the headers Access-Control-Allow-Methods and Access-Control-Allow-Origin, while your S3 bucket does not.

I have followed the official Amazon documentation on the subject and applied the modified CORS configuration to my own bucket, the difference from your configuration is the AllowedHeader element, which defines the headers to allowed in response. I set my bucket to:

<AllowedHeader>*</AllowedHeader>

Here are the resulting headers on the image stored in my bucket:

curl -I -H "Origin: https://stackoverflow.com/questions/38365182" -H "Access-Control-Request-Method: GET" https://so38134984.s3.amazonaws.com/rainbow_dash.png
HTTP/1.1 200 OK
x-amz-id-2: ANxPKoL3JDsLDGerTf8gdcyRU7U4Ozg4eMYJ9ADlX/2qcBmx0dsmAbZxv2h/tFfQIXbkAs+x5iA=
x-amz-request-id: 737E30AE2F8634FC
Date: Fri, 15 Jul 2016 07:53:55 GMT
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET
Access-Control-Max-Age: 3000
Vary: Origin, Access-Control-Request-Headers, Access-Control-Request-Method
Last-Modified: Mon, 04 Jul 2016 20:09:19 GMT
ETag: "3ad1bb64b913c2eadab216b96034b990"
Accept-Ranges: bytes
Content-Type: image/png
Content-Length: 148647
Server: AmazonS3

I assume my image will now work properly in your Croppie script.

It worked! ... thanks man. BTW I do believe AWS docs have insufficent details about the `` options. — Alejandro Veintimilla, Jul 15 '16 at 17:06
Definitely! Amazon has a serious case of mismanaging the tech support — tutuDajuju, Jul 15 '16 at 18:43
Reference docs: https://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html — Chris Ritchie, Jan 24 '18 at 19:16

Image saved con Amazon S3 bucket not showing on HTML5 canvas. Crossorigin issue

1 Answers1

Linked