HTML5 Zone is brought to you in partnership with:

Simon Sarris is a developer from New Hampshire writing mainly about HTML5 Canvas matters. He is currently writing several JavaScript Canvas libraries and shares his experiences through blogging and helping others on StackOverflow. He has a degree in Computer Science and Philosophy from Rensselaer Polytechnic Institute. Simon is a DZone MVB and is not an employee of DZone and has posted 8 posts at DZone. You can read more from them at their website. View Full User Profile

Understanding the HTML5 Canvas image security rules

12.01.2011
| 2726 views |
  • submit to reddit

There’s a common point of confusion regarding when one can use HTML5 Canvas getImageData() and toDataUrl() methods. Certain operations will cause these methods to throw a security error instead of functioning normally.

The rules for what one can and cannot do are laid out in the spec, though the reasoning behind them isn’t so obvious. The most typical violation is when a programmer uses drawImage() with an image that is from a different domain (than the page that the canvas is on) or an image that is on the local file system. When drawImage() is used in one of these two ways, the canvas internally sets its origin-clean flag to false.

From the moment a canvas has its origin-clean flag set to false one is not allowed to use the getImageData() and toDataUrl() methods of that canvas, instead the security error will be thrown. There are a few more cases where the origin-clean flag will be set to false, you can read about them in the spec here.

The reason for this security is to prevent something called information leakage. To see why this is a security issue, consider the following hypothetical situation:

Say you are on a work network and so you have access to internal, private company sites and your (private!) hard-drive. You can accessThe private sites might be something like www.internal.myCompany.com and your hard drive would be accessible from urls like file:///C:/SomeOfMyPhotos/.

Now suppose you visited a website with a hidden canvas and while you were browsing the site that canvas was constantly calling drawImage() onto that canvas with urls that it was guessing might exist. These urls would be things like an image on the private subdomain:

www.internal.myCompany.com/secret/secret-plans.jpg

Or an image on your hard drive:

file:///C:/SomeOfMyPhotos/thatEmbarassingPhoto.png

The malicious site could keep trying different combinations of private-to-you urls until it found one that was actually a file. Then it would draw it to the canvas. Then it would get the imageData from the canvas and send it off to the server.

Voila! The malicious site owner now has your secret plans and your embarrassing photos, much without your consent.

Now we know that the above scenario is not very probable: In the real world, secret plans are almost always in PNG format whereas embarassing photos are almost universally in JPG format! But it stands that situations like the above could happen and so the security implications of canvas must take this into account.

 

Source: http://simonsarris.com/blog/480-understanding-the-html5-canvas-image-security-rules

Published at DZone with permission of Simon Sarris, author and DZone MVB.

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)