Dirty Images: Uploading Images to AWS/S3 - then How to Use With Canvas?

1

Does anyone know how to get past this error when using images you’ve stored on your AWS/S3 bucket?
Uncaught SecurityError: Failed to execute ‘getImageData’ on ‘CanvasRenderingContext2D’: The canvas has been tainted by cross-origin data.
It took me hours to figure out how to save some images - but now I can’t seem to use them because of this!
Any help would be GREATLY appreciated!

2

Have you read this?


and the linked article:

You can set a CORS configuration on an S3 bucket (it’s under “Permissions”). I am using the CORS config that edgee:slingshot suggested:

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

But beware, this means that your server is quite open for everyone, so you might want to restrict it a bit more…

I’m not sure if you can make it work with this, as I never used the S3 images to load them back into a canvas. But I would look into the CORS direction.

3

Correct me if I’m wrong, but isn’t it the bucket policy that controls if unauthorized users can access files? And CORS simply dictates which URLs can access said objects?

4

Really appreciate your replies!!

  • Yes - that is the CORS config I am using on AWS/S3. It still fails when I try and get data from the painted canvas - and copy to another canvas - i.e. it won’t allow you to change the data of the image…
    I’ve read that this primarily has to do with two things- and they are both client-side issues: Chrome won’t allow this - and running from LocalHost (in development) triggers the error as well. But I have deployed a test to meteor.com - and I still get the same error.
    I think I am going to try vsivsi/meteor-file-collection…
5

Strangely enough - it started working - with no CORS errors!
The only logical thing I can figure is that it takes day or two for updating the CORS AWS bucket permissions to take effect. But that’s hard to believe as well!

Thanks again to those who tried to help me with this - I really appreciate it!!

wayne