aws s3 with html2canvas – CORS issue with multiple browsers

By | July 14, 2018
Questions:

I knew many questions and issues have been already made. But I can’t find out clear answer to solve this issue.

I use html2canvas to screenshot my page – with image from amazon s3 (cloudfront, too)

I tried almost every answer from SO and html2canvas issues.

I setup my S3 CORS to allow all / also set my bucket to public. Also I gave all public access to Everyone (Just to test if it works. I will block them after deploy)

Here’s my CORS for s3

<?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>
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>PUT</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

And my bucket policy

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "AddPerm",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:PutObject",
                "s3:PutObjectAcl",
                "s3:GetObject",
                "s3:GetObjectAcl",
                "s3:DeleteObject"
            ],
            "Resource": "arn:aws:s3:::ubkorea/*"
        }
    ]
}

When I send request with curl to my images, it has quiet normal response with Access-Control-Allow-Origin. Below is my response.

HTTP/1.1 200 OK
x-amz-id-2: 2v8iSfy/9yvLRe+CFiUqEjUz96IcRC86t1m7IBy1NDakkYIriumosvVYECeYgcPAcCW1axpwF00=
x-amz-request-id: 4ADD8456071CE5C3
Date: Fri, 13 Jul 2018 02:55:10 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: Sat, 07 Jul 2018 07:54:35 GMT
ETag: "2374a71498a1066a412565cbb3b03e86"
Accept-Ranges: bytes
Content-Type: image/jpeg
Content-Length: 52134
Server: AmazonS3

When doing this and html2canvas with allowTaint: false, useCORS: true, sometimes it worked well but sometimes not in chrome. Also, it worked in IE but not worked in Safari. I don’t know what’s problem.

I guess it’s kind of CORS problem. Because I saw similar problem in my codepen example. Sometimes it show the image, but sometimes not.

here is my codepen exmaple. (https://codepen.io/anon/pen/YjXbaZ)

It works well whether crossorigin="anonymous" or not, but sometimes it works, sometimes not either.

I also tried http and https, and change url from s3.region_name/bucket_name/... to bucket_name.s3.region_name/....

Is the any problem in my CORS setting or bucket policy? Or is there any possibility about cache issue? I’m very confusing now.

I’ll be very appreciate with any comment and answer. Thanks in advance!

Answers:

Leave a Reply

Your email address will not be published. Required fields are marked *