Is there a way to get images from another domain without tainting the canvas in IE9?

Question

The following code snippet works for Firefox and Chrome, however it does not work for Internet Explorer 9:

    window.onload = function(){
        var img;

        capture_canvas          = document.createElement('canvas');
        capture_canvas.width    = 1000;
        capture_canvas.height   = 1000;
        document.documentElement.appendChild(capture_canvas);

        img = new Image();
        img.crossOrigin = "anonymous";
        img.src = "http://www.shangalulu.com/get_resource_no_64.php?url=http://www.shangalulu.com/users/1196739508/post/41-1330377498/41-1330377498_thumb.jpg";

        img.onload = function() {
            var context, canvas_img;
            context = capture_canvas.getContext('2d');
            context.drawImage(img, 0, 0, 255, 255);
            canvas_img = context.getImageData(0, 0, capture_canvas.width, capture_canvas.height);
        }
    }

Using the above snippet, IE9 fires a security exception when calling drawImage. I'm inclined to believe this is the result of the incoming image being tainted by IE, but I don't understand why it would taint the image. I've got the necessary header (Access-Control-Allow-Origin: * ) being plopped in through the php script being called, and it works on the other browsers, so why won't this work for IE9? Is it not supported?

If this feature is not supported, is there a way to get it to work for IE9?

Answer 1

http://www.shangalulu.com/get_resource_no_64.php?url=http://www.shangalulu.com/users/1196739508/post/41-1330377498/41-1330377498_thumb.jpg

works fine...

Tools>Internet Options>Security tab, click "reset all zones to default" (mime sniffing setting, content from domains in different security zones).. (works in other browsers... they do not have IE's security zone model)

To capture network traffic in IE9

F12>Networking tab, click "Start Capture", refresh your web page.

It is helpful if you can provide a link to your web page when asking a question in this forum... otherwise we can only guess without testing the page ourselves.

Regards.

---

Rob^_^

Answer 2

The original page that ran this script was hosted on my internal web server; so I've placed a copy of it on one of our external servers for the time being:

http://www.shangalulu.com/driver/test_canvas_taint.html

---

The problem is this: The above script works on Chrome and Firefox, but it doesn't work for Internet Explorer. I need to know if IE9's implementation of Image() supports cross origin requests, and if so, how to properly make the request. If its implementation does not support cross origin requests, then I need to know if there is a way to work around this problem.

Answer 3

<dir>

SCRIPT5022: DOM Exception: SECURITY_ERR (18) 
test_canvas_taint.html, line 24 character 6

DOMException.SECURITY_ERR 18

The operation is not allowed due to same origin policy restriction.

http://blogs.msdn.com/b/ieinternals/archive/2009/08/28/explaining-same-origin-policy-part-1-deny-read.aspx

http://stackoverflow.com/questions/4672643/html5-canvas-getimagedata-and-same-origin-policy

</dir>

---

Rob^_^

Answer 4

I'm going to assume that by that response, the answer is no to both of my questions. For anyone else reading this topic:

1) No, IE9's implementation of Image() does not properly support CORS.

2) No, there is no "good" work around to this.

As a backup plan, in case this was going to be the end result, we ended up implementing something to act as a "proxy". When our javascript detects that the browser does not support CORS (or does not support it enough to get the job done), it sends a request back to the original server, who then pulls in the images we need through php. This isn't a desirable solution, as it's horridly slow, but it works.

Rob, While you linked to an article that discusses such a concept, I'm not going to accept your proposed answer. Your response lacked any sort of real explanation, and offers no insight on the subject. Further more, I feel that you didn't bother to read any of the messages I posted; which has left me feeling rather insulted.

Answer 5

Alex,

we do not work for ms... this is a public forum... the research I did into the subject is from the public domain... which is the best we can do.. as an MSMVP I am not privy to any insider knowledge... as always (please consider this) the quality of any answer in a forum is dependant apon the quality of the question...code snippets count for little..hands on system testing is required . my answer was drawn from the keywords of the error message that was present in the mashup that you provided on my request. I only assume that the IETeam makes its decisions about IE with due dillligence in consideration of their and law enforcement security goals and customer requests for features.

You can provide feedback or feature requests directly to the IETeam through the MS Issue Tracking Portal, connect.microsoft.com/ie . or post comments to their public Blogs.

Regards.

---

Rob^_^