CODEWITHSUNDEEP
ruby-on-railsamazon-s3cors
Alex Smith
Alex Smith

Reputation: 191

S3 Cross-Origin Resource Sharing Not working

I'm trying to use blur.js to blur user uploaded images, and I'm storing the images on Amazon S3. I've set up what I think to be the correct CORS configuration, but the images can't be blurred and I get this error in the browser: 

  Unable to get image data from canvas because the canvas has been tainted by cross-origin data.

Here's my CORS configuration: 

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

Any idea what's wrong?

Upvotes: 7

Views: 4486

Answers (2)

Flavio Wuensche
Flavio Wuensche

Reputation: 10326

I've just done it. Basically, you can follow the steps to edit your S3 bucket permissions and make ir work. If you need any further help, leave a comment bellow.

1) Sign in to the AWS Management Console and open the Amazon S3 console at https://console.aws.amazon.com/s3/

2) In the Buckets list, open the bucket whose properties you want to view and click "add CORS configuration"

amazon-screen-shot

3) Write the rules you are willing to add in between the tags <CORSConfiguration>

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

You can learn more about rules at: http://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html

4) Specify crossorigin='anonymous' on the image you'll use in your canvas

Upvotes: 5

Ryan
Ryan

Reputation: 6517

I have a suspicion that you're not using the correct S3 endpoint address format that's required for CORS support.

i.e. S3 buckets support both of these formats:

  1. http://bucket.s3.amazonaws.com/object
  2. http://s3.amazonaws.com/bucket/object

But only the first URL will work with CORS according to the documentation:

with CORS, you can configure your bucket to explicitly enable cross-origin requests from website.s3-website-us-east-1.amazonaws.com.

Upvotes: 3

Related Questions