Understanding the HTML5 Canvas image security rules
Join the DZone community and get the full member experience.Join For Free
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:
Or an image on your hard drive:
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.
Opinions expressed by DZone contributors are their own.