HTML5: Sandbox-Modus für IFrames

HTML5-IFrames und die Risiken

Standardmäßig hat eine Website, die über einen IFrame eingebunden wird, dieselben Rechte wie jede andere Seite auch. Das heißt, es können Formulare versendet und JavaScript ausgeführt werden. Über das „target“-Attribut lassen Links auch jenseits des IFrames öffnen.

Je nachdem wie vertrauenswürdig die eingebundene Website ist, möchte man ihr vielleicht nicht alles erlauben. HTML5 bietet für IFrames einen Sandbox-Modus, über den sich die Rechte von IFrames-Inhalten einschränken lassen:

<iframe src="http://www.example.com/" sandbox></iframe>

Mit dem bloßen Setzen des Attributes „sandbox“ wird der IFrame im Sandbox-Modus aufgerufen. Das heißt, folgende Restriktionen beim Aufruf der eingebundenen Website werden gemacht:

• kein Ausführen von Scripten und Plugins möglich
• kein Versenden von Formularen möglich
• keine Navigation außerhalb des IFrames möglich

Konkret heißt das, dass zum Beispiel JavaScript und Plugins wie Flash nicht ausgeführt werden. Formulardaten werden nicht übertragen und Links, die über das „target“-Attribut versuchen, aus dem Frame auszubrechen, werden immer innerhalb des IFrames aufgerufen.

Anpassung des Sandbox-Modus

Über das „sandbox“-Attribut lassen sich einzelne Rechte auch wieder freischalten. Wird über einen IFrame ein Formular eingebunden, ist es sinnvoll, dass das Formular auch übertragen werden kann:

<iframe src="http://www.example.com/" sandbox="allow-forms"></iframe>

Mit „allow forms“ wird das Versenden von Formularen explizit erlaubt, während alle anderen Einschränkungen erhalten bleiben. Auch das Ausführen von Scripten lässt sich explizit freischalten:

<iframe src="http://www.example.com/" sandbox="allow-scripts"></iframe>

Auch lässt sich die Einschränkung aufheben, die verhindert, dass die über den IFrame eingebundene Website Links jenseits des Frames öffnet:

<iframe src="http://www.example.com/" sandbox="allow-top-navigation"></iframe>

Zu guter Letzt gibt es noch die Möglichkeit, den Inhalt des IFrames so zu behandeln, als käme er von derselben Domain wie die einbindende Seite:

<iframe src="http://www.example.com/" sandbox="allow-same-origin"></iframe>

Das hat zur Folge, dass die eingebundene Seite im DOM der einbindenfen Seite berücksichtigt wird. Das heißt, die Same-Origin-Policy wird aufgehoben. Die Same-Origin-Policy sorgt normalerweise dafür, dass Seiten anderer Domains keinen Zugriff auf Objekte der einbindenden Seite haben und diese auch nicht manipulieren können.

Werden IFrames im Sandbox-Modus ausgeführt, die denselben Ursprung haben wie die einbindende Seite, so werden diese zunächst einmal so behandelt, als kämen sie von einer fremden Domain. Man muss die Sandbox also explizit auf „allow-same-origin“ setzen, um sie wie von derselben Domain stammend zu behandeln.

Vorsicht beim Kombinieren

Einzelne Rechte lassen sich miteinander kombinieren. Allerdings birgt eine bestimmte Kombination ein Sicherheitsrisiko:

<iframe src="http://www.example.com/" sandbox="allow-same-origin allow-scripts"></iframe>

Werden die Rechte „allow-same-origin“ und „allow-scripts“ zusammen gesetzt, gibt es der eingebundenen Seite die Möglichkeit, den Sandbox-Modus gänzlich auszuschalten. Denn über „allow-same-origin“ hat die eingebundene Seite Zugriff auf den DOM und über „allow-scripts“ lassen sich Scripte ausführen. So lässt sich per JavaScript auf das DOM der einbindenen Seite zugreifen.

Derzeit unterstützen nur Chrome und Safari den Sandbox-Modus, andere Browser noch nicht.

Was haltet ihr vom Konzept der Sandbox für IFrames? Welche Anwendungsfälle dafür könnt ihr euch vorstellen?

Weitere Artikel auf t3n.de zum Thema HTML5:

• HTML5: Eingabefeld mit Vorschlägen als Dropdownliste
• HTML5: Überschriften und Einleitungen von Artikeln gruppieren
• HTML5 und Local Storage: Daten für Offlinebetrieb speichern
• HTML5: Neue Formulartypen in der Praxis