Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

HTML5: Sandbox-Modus für IFrames

    HTML5: Sandbox-Modus für IFrames

Inhalte anderer Websites in die eigene einzubinden, geht nicht einfacher als mit IFrames. Doch der Einsatz von IFrames birgt auch Risiken. Denn bislang ließen sich die Rechte der eingebundenen Seiten – zum Beispiel das Ausführen von Scripten – in einem IFrame nicht einschränken. Mit HTML5 gibt es nun die Möglichkeit, über IFrames eingebundene Websites in seinem Sandbox-Modus auszuführen.

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:

Finde einen Job, den du liebst zum Thema Webdesign, Webentwickler

4 Reaktionen
Michelle Skodowski
Michelle Skodowski

Hallo,

ich weiß, dass der Artikel schon sehr alt ist, dennoch habe ich eine brennende Frage zum Thema links im iframe mit sandbox attribut. Und zwar möchte ich die Links außerhalb des iframes öffnen, d.h Laden einer neuen Seite bzw. neuer Tab. Ich habe das target attribut ausprobiert und es über allow-top-navigation versucht. BEIDES FUNKTIONIERT NICHT.
Gerne würde ich erfahren, warum das nicht funktioniert und was man denn jetzt genau tun könnte, um die Links außerhalb des iframes zuzulassen.

Liebe Grüße,
Michelle

Antworten
Timeeeee
Timeeeee

Prinzipiell nett, aber nur "sandbox" beschneidet zu viele Freiheiten für die eingebundene Seite. Die Meisten wollen bestimmt etwas mehr Freiheiten für das IFrame haben (allow-scripts allow-plugins per default an). Und für Wissenderen gibt es dann speziell "sandbox="strict"" oder so ähnlich. HTML ist ja eigentlich als einfach zu erlernende Markup-Sprache gedacht. Deshalb sollte es einfach gehalten werden und komplizierter für uns "Wissenderen" (wodurch wir anderen damn doch zeigen können, dass wir richtig HTML können, und wir weiterhin gebraucht werden (weil wer HTML kann, hat oft nur das Einfache gelernt).

Antworten
denis.potschien
denis.potschien

@Serkan: Ja, das stimmt und ist korrigiert. Danke für den Hinweis!

Antworten
Serkan
Serkan

Hallo Denis,

es sollte doch "Mit HTML5 gibt es nun die Möglichkeit" statt "Mit HTML ...." sein !

Antworten

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen