Internet Explorer canvas.toDataURL SecurityError

Question

I run the following code on Internet Explorer, it throws a SecurityError on the line var canvasDataUrl = canvas.toDataURL();

var canvas = document.createElement('canvas');
var canvasContext = canvas.getContext('2d');
var img = new Image;
img.onload = function(){
  canvasContext.drawImage(img,0,0);
  var canvasDataUrl = canvas.toDataURL(); // error occurs here
  console.log(canvasDataUrl);
};
img.src = 'https://via.placeholder.com/300x300';

What is the cause of that error, and how can I fix this ?

That usually means the image is not [clean](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL). Which should not affect different browsers tho. — Lain, Oct 05 '20 at 07:28
Are you really trying to load the image at this exact URL? As said by previous comment, this should not work in any browser, and if it does, that's a serious security bug. If you are trying to draw an other image, what kind of image is it? Maybe an SVG image? — Kaiido, Oct 05 '20 at 07:51
I'm in favor of the comments above. I tested your code and it can't work in neither IE nor Chrome. *`SecurityError` means the canvas's bitmap is not origin clean; at least some of its contents have or may have been loaded from a site other than the one from which the document itself was loaded.* I guess the image src in your code snippet is virtual. If possible, you can provide the real image src so that we can have a test. Besides, the answer below can work well in IE, you can also try. — Yu Zhou, Oct 06 '20 at 06:15

mr. pc_coder · Accepted Answer · 2020-10-05T07:53:59.543

can you try crossOrigin

var img = new Image();
img.crossOrigin = "anonymous";

var canvas = document.createElement('canvas');
var canvasContext = canvas.getContext('2d');
var image = new Image();
image.crossOrigin = "anonymous"; 
image.onload = function (event) {
    try {
        canvasContext.drawImage(image, 0, 0, 200, 200);
        console.log(canvas.toDataURL());        
    } catch (e) {
        console.log(e);
    }
};
image.src = "https://i.chzbgr.com/maxW500/1691290368/h07F7F378/"

score 1 · Answer 2 · answered Oct 06 '20 at 07:04

The answer from @pc_coder is correct, and I want to provide some information about this error, you can see here https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image

Because the pixels in a canvas's bitmap can come from a variety of sources, including images or videos retrieved from other hosts, it's inevitable that security problems may arise.

As soon as you draw into a canvas any data that was loaded from another origin without CORS approval, the canvas becomes tainted. A tainted canvas is one which is no longer considered secure, and any attempts to retrieve image data back from the canvas will cause an exception to be thrown.

If the source of the foreign content is an HTML or SVG element, attempting to retrieve the contents of the canvas isn't allowed.

If the foreign content comes from an image obtained from either as HTMLCanvasElement or ImageBitMap, and the image source doesn't meet the same origin rules, attempts to read the canvas's contents are blocked.

Calling any of the following on a tainted canvas will result in an error:

Calling getImageData() on the canvas's context

Calling toBlob() on the element itself

Calling toDataURL() on the canvas

Attempting any of these when the canvas is tainted will cause a SecurityError to be thrown. This protects users from having private data exposed by using images to pull information from remote web sites without permission.

Internet Explorer canvas.toDataURL SecurityError

2 Answers2