How to fix getimagedata the operation is insecure

Question

Using fairly basic code.

HTML

<img id="img" style="max-width: 100%; max-height: 650px; " />

Javascript

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

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

    orgImg.width = this.naturalWidth;
    orgImg.height = this.naturalHeight;
    orgImg.getContext("2d").drawImage(this, 0, 0);           

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

imgSrc is a URL that is not on the same domain. The site is on localhost, the image is on another site, and is https.

If I remove the image.crossOrigin = "anonymous";, the image loads, but I get the security error. If I put back the cross origin, the image doesn't load at all, the load handler is never fired.

Moving the image to the server serving the page is not a realistic option as the image would be stuck there until another service or process cleaned it out.

What did I miss?

Thanks

Possible duplicate of [context.getImageData() operation is insecure](https://stackoverflow.com/questions/17035106/context-getimagedata-operation-is-insecure) — Toastrackenigma, Jul 04 '17 at 19:28
I followed those instructions in my original question. Unfortunately setting the crossOrigin isn't working, and moving the image isn't really possible. — Trevor, Jul 04 '17 at 19:32

score 0 · Accepted Answer · answered Jul 04 '17 at 19:18

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

How to fix getimagedata the operation is insecure

1 Answers1