Canvas tainted by cross-origin data

[Art Freeman]

I get this error message ("canvas tainted by cross-origin data") when I attempt to retrieve data from a canvas element.  Here's the sequence of events:

1. FileReader - readAsDataURL to retrieve an image from the user's drive.  Works fine.
2. Draw the image onto a canvas element. Works fine.
3. Upload the image to firebase.storage()  [canvas.toDataURL]  Image saved as a .jpg.   Works fine.
4. Download the image from firebase.storage() at a later time to a new canvas element.  Works fine.
5. Try to get the image data from the canvas (getImageData())  in order to manipulate it with a filter.  Get the above error message.

Is there a setting in my firebase.storage() to allow cross-origin access?  How to set it? 
I'm in development mode now, so there's not an official web site attached to the request.

Thanks much.

[Spencer Phippen]

You'll need to configure your bucket for cross-origin file access.

See an earlier post: https://groups.google.com/d/msg/firebase-talk/oSPWMS7MSNA/RnvU6aqtFwAJ

> I'm in development mode now, so there's not an official web site attached to the request.

As long as you're using a local webserver (not just loading directly through a file:// URL), you should be able to add "http://localhost[:port]" to the origin list and have things work.

[Art Freeman]

Thanks, Spencer, for your reply.

I'd tried the earlier post's suggestion a while back.  The process went smoothly, but the error persisted in my app.  That's when I posted the current message. Between that time and the time I received your reply, I came across a suggestion that seems to have resolved the issue:  In the <img> tag that will be receiving the downloaded image, I added this attribute:  crossorigin="anonymous" .

So, I'm wondering - are the bucket setup AND adding the above <img> tage attribute - BOTH - required? 

I'm only assuming that my bucket has been setup correctly since there was no error in following the procedure, but I'm not sure.  Is there a way to verify it?

Thanks again.
Art

On Sunday, May 21, 2017 at 9:40:42 PM UTC-7, Art Freeman wrote:

[Spencer Phippen]

Thanks for the reply Art.

> So, I'm wondering - are the bucket setup AND adding the above <img> tage attribute - BOTH - required?  

I just did some reading online and it turns out they both are required! I knew you had to configure our server for CORS, but I didn't realize you also needed to set the crossorigin attribute of the img tag to "anonymous". Sorry for any confusion, I'll remember this for the future.

> I'm only assuming that my bucket has been setup correctly since there was no error in following the procedure, but I'm not sure.  Is there a way to verify it?

The GCS have some docs with a few ideas here: https://cloud.google.com/storage/docs/cross-origin#Troubleshooting CORS-Related-Problems

You can use the gsutil command line tool to verify that the CORS configuration was set ("gsutil cors get").

Of course, you might have successfully set an erroneous configuration. If I wasn't sure the CORS configuration was correct, I'd probably set up a simple test webpage that downloads a small object via XMLHttpRequest and run it on my desired origin. If the request is successful, then CORS should be set up to allow access from that origin.

If you can manipulate your cross-origin canvas data fine though, I'd assume things are set up right.

Thanks,

Spencer P