Context.Getimagedata() Operation Is Insecure

context.getImageData() operation is insecure

This is a security feature. From W3:

The getImageData(sx, sy, sw, sh) method must, if the canvas element's origin-clean flag is set to false, throw a SecurityError exception

This is to prevent malicious site owners from loading potentially private images that the user's browser has access to onto the canvas, then sending the data to their own servers. The origin-clean can be turned off if:

• The element's 2D context's drawImage() method is called with an HTMLImageElement or an HTMLVideoElement whose origin is not the same
  as that of the Document object that owns the canvas element.

• The element's 2D context's drawImage() method is called with an HTMLCanvasElement whose origin-clean flag is false.

• The element's 2D context's fillStyle attribute is set to a CanvasPattern object that was created from an HTMLImageElement or an
  HTMLVideoElement whose origin was not the same as that of the Document
  object that owns the canvas element when the pattern was created.

• The element's 2D context's fillStyle attribute is set to a CanvasPattern object that was created from an HTMLCanvasElement whose
  origin-clean flag was false when the pattern was created.

• The element's 2D context's strokeStyle attribute is set to a CanvasPattern object that was created from an HTMLImageElement or an
  HTMLVideoElement whose origin was not the same as that of the Document
  object that owns the canvas element when the pattern was created.

• The element's 2D context's strokeStyle attribute is set to a CanvasPattern object that was created from an HTMLCanvasElement whose
  origin-clean flag was false when the pattern was created.

• The element's 2D context's fillText() or strokeText() methods are invoked and end up using a font that has an origin that is not the
  same as that of the Document object that owns the canvas element.

Source

How to fix getimagedata the operation is insecure

I was able to fix this using somewhat spine curling code.

In my php, I did this.

        $imgSrc= $this->_request->getParam('imgSrc', ''); //URL of image
        if (!empty($imgSrc)) {
            $imgSrc = file_get_contents($imgSrc); //naughty variable reuse
            $imgSrc = 'data:image/x-icon;base64,' . base64_encode($imgSrc);
        }

This way the original image isn't used, and instead an epic string is sent instead, which doesn't cause the security issue.
Then to alleviate memory, I added image.src=""; to the end of the load event.

var image = document.getElementById("img");

image.addEventListener('load', function (event) {
    alert("here");         

    orgImg.width = this.naturalWidth;
    orgImg.height = this.naturalHeight;
    orgImg.getContext("2d").drawImage(this, 0, 0);           
    image.src=""; //clear the massive string from memory

    //etc
    orgImg.getContext("2d").getImageData(0, 0, orgImg.width, orgImg.height) //security error
}, {once: true});
image.src = '<?= $this->imgSrc ?>';

This page will never be accessed by mobile so it's ok to use crazy RAM for a moment. But a better solution would be good if anyone has one.

Thanks

HTML5 Canvas getImageData - Security Issue

I believe that this is a Cross Origin Resource Sharing CORS (security) issue.

See HTML5 Canvas getImageData and Same Origin Policy

The gist is, requests to images from external domains could inherently supply the user's authentication cookies, etc, allowing your javascript to access their potentially protected images and assets. While you can reference them, via <img>, CORS was established as a security protocol to prevent you from programmatically reading (and perhaps storing) the pixel data.

The Dropbox API supports CORS as of mid August, 2012. You may be able to accomplish what you want using their API once users properly authenticate.

https://github.com/dropbox/dropbox-js/blob/master/doc/getting_started.md

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.

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()

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";

---

Related Topics