What do I set CORS settings to and where so that my canvas doesn't get tainted?

Question

I have a big canvas with icons and pictures that all come from my S3 bucket. When I\'m trying to upload it (which runs toDataUrl) Chrome complains that

Answer 1

Your CORS configuration should be good, the minimal needed being

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

What you need however, is to set your <img>'s crossOrigin attribute to "anonymous".

Also, check that the image on s3 has been made Public (there should be a grantee Everyone set to Open/Download), and that you use the link available in the Properties tab of your image file (something like https://s3.yourRegion.amazonaws.com/userName/Folder/file.png).

And finally, you have to clear the browser's cache after you changed your bucket's CORS setting, otherwise the browser won't make a new request to the server and it will use the unsafe version it has cached.