CODEWITHSUNDEEP
ruby-on-railsamazon-s3html5-canvaspaperclipfabricjs
ingnam
ingnam

Reputation: 121

CORS configuration on AWS S3 not working

I have rails 4 application that uses html5 canvas for t-shirt design. Fabricjs is used as Javascript HTML5 canvas library. When I add text object on canvas and call toDataURL method, it works fine. When I add svg image served over AWS S3 on canvas, it gets loaded on canvas but when I call toDataURL on canvas, it gets blank and I get following error on console:

Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

Initially when the images served over S3 gets loaded on document, I get the following error:

Mixed Content: The page at 'https://example.com' was loaded over HTTPS, but requested an insecure image 'http://example.s3.amazonaws.com/clip_arts/arts/000/000/001/thumb/1.png?1431770898'. This content should also be served over HTTPS.

I searched through the internet and found out it to be a CORS issue. In my AWS bucket, I added a following CORS configuration:

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

Call to toDataURL works fine on firefox but doesn't works on any other browsers.

Upvotes: 1

Views: 1887

Answers (2)

novasaint
novasaint

Reputation: 710

In addition to Khawer Zeshan answer..

I had the same problem using toDataURL on Chrome. I added <AllowedOrigin>Anonymous</AllowedOrigin> in addition to <AllowedOrigin>*</AllowedOrigin> to AWS S3 CORS config. It worked for me.

Upvotes: 1

Khawer Zeshan
Khawer Zeshan

Reputation: 9646

You may need to add crossOrigin:'Anonymous' to the function, 

fabric.loadSVGFromURL(svgUrl,function(objects,options) {

}, {
    crossOrigin: 'Anonymous'
});

And instead of having this in the CORS

<AllowedHeader>Content-*</AllowedHeader>
<AllowedHeader>Host</AllowedHeader>

Just add this to the CORS

<AllowedHeader>*</AllowedHeader>

Upvotes: 1

Related Questions