Search code examples
javascripthtmlcanvasbase64cross-site

Security violation on Canvas.ToDataUrl with Base64 Image

I am trying to build some kind of branding tool, which adds a branding to a chosen image and lets the user download the image again. This works perfectly fine on many Browsers, but Opera and IE throw a security Error which makes me think that soon other browsers might throw errors too.

Fiddle: http://jsfiddle.net/2rL8afe0/9/

Commenting out the line makes the code work:

ctx.drawImage(branding, 0, 0, 30, 30);

The reason is probably some false negative on cross site scripting since my app works on client side.

Any Ideas how to fix this?

Solution

  • The problem is that some browsers are very strict when using SVG with canvas, incl. for example IE.

    As your branding logo is SVG it will taint the canvas in these browsers.

    Replacing your branding image with a PNG, JPEG etc. will fix this problem.