Canvas - HTML5 - page 186

5.15.3 Sicherheitsaspekte
Aus sicherheitstechnischer Sicht ist bei Canvas vor allem der Zugriff von Scripts
auf Bilder und deren Inhalte (Pixel) in anderen Domänen problematisch. Die
Spezifikation spricht in diesem Zusammenhang von information leakage und
versucht diesem Informationsleck mit der origin-clean flag entgegenzusteuern.
Die Konzeption von origin-clean ist zweistufig und beruht im Wesentlichen da-
rauf, dass bestimmte Methodenaufrufe und Attribut-Zuweisungen während
des Ablaufs eines Scripts das origin-clean flag von true auf false setzen. Wird
dann getImageData() oder todataURL() aufgerufen, bricht das Skript mit einer
SECURITY_ERR -Exception ab.
Hauptbeteiligte sind dabei drawImage() , fillStyle und strokeStyle , die immer
dann zum Umdefinieren des origin-clean flag beitragen, wenn Bilder und Videos
aus einer anderen Domäne oder canvas -Elemente, die selbst nicht origin-clean
sind, ins Spiel kommen.
Unter der Voraussetzung, dass in der Variablen image eine Referenz zum WHAT-
WG-Logo unter http://www.whatwg.org/images/logo gespeichert ist und das
Script nicht auf dem WHATWG-Server läuft, setzt der folgende drawImage() -
Aufruf das origin-clean flag auf false :
context.drawImage(image,0,0);
Verwenden wir das Logo als Pattern, haben die Zuweisungen fillStyle und
strokeStyle dasselbe Ergebnis - orgin-clean wird false :
var pat = context.createPattern(image);
context.fillStyle = pat;
context.strokeStyle = pat;
Jeder Aufruf von getImageData() oder toDataURL() ab diesem Zeitpunkt führt
unweigerlich zum Script-Abbruch.
Noch restriktiver wird dieser Mechanismus im Firefox-Browser gehandhabt,
der alle über das file:// -Protokoll geladenen Bilder als nicht origin-clean ein-
stuft. Die Konsequenz für unser Kapitel? Alle Grafiken mit einem Server-Icon
rechts unten funktionieren im Firefox nicht, wenn sie lokal über file:// geöffnet
werden, sondern benötigen einen Webserver bei der Darstellung.