HTML Canvas, getImageData and Browser Security

Today I played a bit with Canvas and getImageData. What I tried to figure out was how to get the color of a certain pixel. The solution is easy to find via Google. The code looks somewhat like this:

var ctx = document.getElementById('canvas').getContext('2d');  
var img = new Image();  
img.onload = function(){  
  ctx.drawImage(img, 0, 0); 
  var objImageData = ctx.getImageData(0, 0, img.width, img.height)  
  alert("Pixel at (0,0): rgba("+objImageData.data[4]+", "+objImageData.data[5]+", "+objImageData.data[6]+","+objImageData.data[6]+")")
}  
img.src = 'test.jpg';

If you run this locally in Firefox. It will show the image, but it won’t show the popup. Instead, you’ll see this exception in the Firebug console:

Security error" code: "1000
var objImageData = ctx.getImageData(0, 0, img.width, img.height)

Here is why:

  • If the image is hosted on a different domain than the script, you can’t access image data without causing above security exception.
  • If you run this locally, you anyway will get this exception because, locally there’s no domain, so Firefox thinks for sure: different Domains >> Panic!
  • If you upload above code to some web server, image and HTML page with the Javascript code on the same domain, the code will work perfectly.
  • If you want to get the image data of an image which is not on the same domain, but e.g. on Amazon S3, you will end up with above security exception.

One way to handle the exception is to catch it, enable the appropriate browser permission and retry.

try {
  try { 
    var objImageData = ctx.getImageData(0, 0, img.width, img.height)  
  } catch (e) { 
    netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
    var objImageData = ctx.getImageData(0, 0, img.width, img.height) 
  } 						 
} catch (e) {
  throw new Error("unable to access image data: " + e)
} 
 
alert("Pixel an (0,0): rgba("+objImageData.data[4]+", "+objImageData.data[5]+", "+objImageData.data[6]+","+objImageData.data[6]+")");

Now, that works, at least in Firefox, but it is ugly, because the user will get a security warning and he has to decide whether to grant the script the requested additional permission.

The only “nice” way of getting the code to work, without browser specific try / catch statements and without security warnings is to host the images on the same domain as the script. Luckily Amazon S3 supports that through Virtual Hosting of Buckets.

If anyone knows about additional solutions for this, I’m happy to hear about it.

Most information I got from this article on Aaron’s blog.

DeliciousTwitterFacebookLinkedInRedditSlashdotTechnorati FavoritesDiggShare
This entry was posted in JavaScript. Bookmark the permalink.

7 Responses to HTML Canvas, getImageData and Browser Security

  1. Jesus says:


    Hello,
    I’m trying catch the pixel of image click. can you send me a little, bit but complete example?

    thanks.

  2. Andy says:


    Thanks for the cause for this security exception. I found a good workaround: Making your own proxy to deliver images from foreign domains.

  3. Mmartos says:


    Hi.
    I’m just trying to do some image pixel processing through the canvas and so on. I’m having the same kind of exception. Changing the browser permissions also works for me, but I’m interested in Andy’s workaround. Could you share more details (code if possible) for this issue?
    Thanks for all!

  4. Julio Estévez says:


    I had a similar issue but with Chrome and was looking for a solution and I came here to see that I was not the only one with the problem. Finally I found a solution here:

    http://blog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html

    It’s in the Chromiun blog but in the article says Firefox 5 is using this too. Hope this is useful for you.

  5. Vijay says:


    perfect …

  6. xDelph says:


    Hello,

    i use jquery.getImageData to load my image.
    i modify pixel of the first image (with putImageData), then draw a second image. when i do a clearRect on my canvas to redraw it, and redo a getImageDate, i’m getting a SECURITY_ERR exception, why? do i must reload the original image before redo my modification?

    thanks for your answer

  7. @_dhar says:


    Referring to this : https://bugzilla.mozilla.org/show_bug.cgi?id=444641#c4
    It seems that Firefox allows to set a security.fileuri.strict_origin_policy parameter to avoid local security check. Not tested btw…

Leave a Reply

Your email address will not be published. Required fields are marked *

*


*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>