canvas-toBlob.js icon indicating copy to clipboard operation
canvas-toBlob.js copied to clipboard

ERROR SecurityError on IE 11

Open vipinshukla5805 opened this issue 8 years ago • 5 comments

I am getting ERROR SecurityError on IE 11.

Please suggest any solutions.

vipinshukla5805 avatar Jun 22 '17 06:06 vipinshukla5805

Are you using this with a tainted canvas?

Although you can place images/other media without CORS approval in your canvas, doing so taints the canvas. Once a canvas has been tainted, you can no longer pull data back out of the canvas. For example, you can no longer use the canvas toBlob(), toDataURL(), or getImageData() methods; doing so will throw a security error.

dsamarin avatar Jun 22 '17 07:06 dsamarin

How about when we're just converting our svg to canvas then to blob.

In what way is the canvas will be tainted?

iamdevlinph avatar Jun 22 '17 10:06 iamdevlinph

If the SVG file contains any references to external sources (CSS, objects, images etc.) it won't work. Everything in the SVG must be inlined. Or else you will have the same situation as using external resources directly, but as they are encapsulated in a SVG the browser is more strict. So you cannot use CORS in these cases.

This is a security feature of the browser and you can't change much about it but to make sure all resources needed for the SVG are embedded. Even then there are some known unavoidable browser quirks.

There is a library called canvg that claims to be able to get around this.

Sent from my Google Pixel XL using FastHub

dsamarin avatar Jun 22 '17 13:06 dsamarin

So does this mean, even though the files are loaded locally, or maybe even minified, the canvas will always be tainted unless we literally put the styles inline?

iamdevlinph avatar Jun 22 '17 14:06 iamdevlinph

same issue

ibenzyk avatar Mar 07 '19 18:03 ibenzyk