Canvas.Todataurl() Security Error the Operation Is Insecure

SecurityError: The operation is insecure in canvas.toDataURL

It would be helpful if you could post the code you are using to modify the canvas before attempting to export it. With the information you provided, my guess would be that you are writing content from an external source to your canvas. This is why it was working before and is no longer working. I assume your initial tests used a resource from the same origin.

---

Explanation

The same security sandbox exists with the canvas as does with any data requests being made from your code. Anytime you load content from another domain/origin it will trigger the canvas to set the origin-clean flag to false. This means the browser will prevent you from exporting data that has been loaded into the canvas. There are quite a few posts pertaining to this type of issue on StackOverflow:

• canvas.toDataURL() Security Error The operation is insecure
• Security Error with canvas.toDataURL() and drawImage()

canvas toDataURL() - operation is insecure

If the image host does not allow anonymous access then your .getImageData & .toDataURL will always fail because the canvas is tainted. No enduring workaround for that.

You can copy (or re-route) the image to your own server and deliver it from the same domain as your web page. This satisfies cross-origin restrictions so your canvas will not be tainted and your .getImageData will succeed. Of course, copyright laws apply.

There are several other workarounds that involve the user confirming that they want the image to be loaded in a cross-origin compliant way. Here's a relevant Stackoverflow post.

Is it possible to avoid The operation is insecure when using Canvas?

If the images are coming from a domain you don't control, then you're stuck with CORS limitations.

If you have access to configuring your own server, you can enable cross-origin sharing by setting this heading (read more about server security when doing this):

Access-Control-Allow-Origin: <origin> | *

Alternatively, if you host your images on a CORS enabled site like www.dropbox.com you can fetch images without the security errors like this:

var image1=new Image();
image1.onload=function(){
    context.drawImage(image1,0,0);
}
image1.crossOrigin="anonymous";
image1.src="https://dl.dropboxusercontent.com/u/99999999/yourCORSenabledPic.jpg";

Canvas throw error of 'Error: Uncaught (in promise): SecurityError: The operation is insecure. toDataURL@[native code] '

After Brain smashing , I found Exact source of issue. It's not cross origin issue. it's issue of image url.

I was set pixabay Stock Video Url. Now In short, pixabay video url is not actual url of video location. when I paste that url into browser, it was redirect me on another url and display video in browser. so I got issue that Url that i used before is one king of API URL. and I was set into video Source so issue was generate.

Now I send xmlHttpRequest() on that pixabay Image Url and get original video location url and then I set it to canvas background and It's working.

html2canvas - SecurityError: The operation is insecure

Not really an html2canvas issue--just a security issue.

If your really lucky...

You can use imageObject.crossOrigin='anonymous' when downloading your cross domain image. This requires both the server and browser to allow anonymous x-domain transfers. Sadly, almost all servers and most browsers don't yet allow.

Alternatively

Don't go cross-domain...serve that image on your own website.

Alternatively

Wrap the image request in a json request. Here's a script that does that: http://www.maxnov.com/getimagedata/

canvas.toDataURL() SecurityError

Unless google serves this image with the correct Access-Control-Allow-Origin header, then you wont be able to use their image in canvas. This is due to not having CORS approval. You can read more about this here, but it essentially means:

Although you can use images 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.

This protects users from having private data exposed by using images
to pull information from remote web sites without permission.

I suggest just passing the URL to your server-side language and using curl to download the image. Be careful to sanitise this though!

EDIT:

As this answer is still the accepted answer, you should check out @shadyshrif's answer, which is to use:

var img = new Image();
img.setAttribute('crossOrigin', 'anonymous');
img.src = url;

This will only work if you have the correct permissions, but will at least allow you to do what you want.

---

Related Topics