5.15 Anything Still Missing? 1755.15.3 Security Aspects
From a security point of view, accessing images and their content (pixels) via
scripts in other domains is especially problematic in Canvas. The specification
refers to this as information leakage and tries to counter this leakage with the
origin-clean flag.
The concept of origin-clean is two-stage and mainly based on certain method
calls and attribute assignments setting the origin-clean flag from true to false
during a running script. If getImageData() or todataURL() are called in such a
case, the script aborts with a SECURITY_ERR exception.
The main protagonists are drawImage(), fillStyle, and strokeStyle. They con-
tribute to a redefinition of the origin-clean flag whenever images or videos from
another domain, or canvas elements that are not origin-clean themselves, come
into play.
Assuming that the variable image contains a reference to the WHATWG logo at
http://www.whatwg.org/images/logo and the script is not running on the WHAT-
WG server, the following drawImage() call sets the origin-clean flag to false:
context.drawImage(image,0,0);
If we use the logo as a pattern, the properties fillStyle and strokeStyle have
the same result—origin-clean becomes false:
var pat = context.createPattern(image);
context.fillStyle = pat;
context.strokeStyle = pat;
Each call of getImageData() or toDataURL() from that point on will invariably re-
sult in the script being terminated.
In the Firefox browser, this mechanism is handled even more restrictively:
Any images loaded via the file:// protocol are classified as not origin-clean.
So what is the consequence for our chapter? All graphics with a server icon in
the bottom-right corner do not work in Firefox if they are opened locally via
file:// ; instead, they can only be displayed by a web server.