<iframe>

<iframe src="http://webdesign.tepelmann.com/" width="770" height="350" style="border: 0;"><a href="http://webdesign.tepelmann.com/">W3C Spezifikation zum &lt;iframe&gt; - Element</a></iframe><hr /><iframe seamless sandbox="allow-top-navigation"src="http://webdesign.tepelmann.com/"width="770" height="350" ></iframe>

Erläuterung

Das <iframe>Bedeutung: <iframe>inline frame; eingebetteter Rahmen Element bietet, neben dem <object> und <embed> Element, die Möglichkeit beliebige andere Ressourcen in HTML einzubetten.

Einer der häufigsten Anwendungsfälle dieses Elements ist das vollständige einbinden anderer Webseiten in das Dokument und kommt häufig bei statischen HTML Seiten zur Anwendung, um wiederkehrende Inhalte wie beispielsweise Navigationen, Header oder Footer in allen Einzelseiten einzubinden.

Im einleitenden <iframe> Tag wird mit dem Attribut srcBedeutung: srcsource; Quelle eine andere HTML-Datei referenziert, deren Inhalt im <iframe>[...]</iframe> Bereich angezeigt wird. Sollte der Browser das <iframe> Element nicht kennen oder nicht anzeigen können, so wird der zwischen <iframe>[...]</iframe> notierte Element-Inhalt als alternativer Inhalt angezeigt. Im obigen Beispiel würde der Verweis zur Seite angezeigt, die über den Inline-Frame eingebettet wurde.

Die Größe des <iframe> Bereichs wird durch die Attribute width und height in Pixeln definiert, eine Angabe in Prozent ist in HTML5 nicht valide. Da es unter Umständen jedoch sinnvoll sein kann prozentuale Breiten zu verwenden, muss hier auf die CSS-Eigenschaft width ausgewichen werden. Das Unterdrücken des, häufig als störend empfundenen, Rahmens wird durch style="border: 0" definiert. Die früher verwendeten Attribute border und frameborder wurden in der HTML5 Spezifikation ersatzlos gestrichen. Dies betrifft ebenso das Attribut scrolling mit dem bisher das Scroll-Verhalten im Inline-Frame beeinflusst wurde, auch hier muss auf die CSS-Eigenschaft overflow ausgewichen werden.

sandbox Attribut

Werden Inhalte über eingebettete Frames eingebunden, so gilt in allen modernen Browsern die sogenannte Same-Origin-Policy (SOP), dieses Sicherheitskonzept verhindert das eingebundene Inhalte von fremden Webseiten, nicht auf Objekte der einbindende Webseite zugreifen und diese gegebenenfalls manipulieren können. Unter Umständen kann es jedoch notwendig sein eingebundenen Inhalten von fremden Webseiten genau diesen Zugriff zu ermöglichen und die Same-Origin-Policy zu lockern. Um dem Browser die Berechtigungen eines eingebetteten Frames zu übermitteln, stellt HTML5 das Attribut sandbox bereit, dem ein oder mehrere der folgenden Werte zugewiesen werden können.

allow-same-origin

Dieser Attribut-Wert weist den Browser an, die per Inline-Frame eingebettete Webseite so zu behandeln, als würde sie aus derselben Quelle (Origin) stammen wie das einbindende HTML-Dokument.
Die Same-Origin-Policy für das iframe Element wird aufgehoben.

allow-top-navigation

Dieser Attribut-Wert weist den Browser an, dass die per Inline-Frame eingebettete Webseite die Link-Navigation der einbettenden Webseite beeinflusst. Enthält die per Inline-Frame eingebettete Webseite beispielsweise Verweise mit einer Angabe wie <a href="seite.html" target="_top">, wird beim Anklicken das gesamte aktuelle Fenster geändert und nicht nur der Inhalt der per Inline-Frame eingebettete Webseite.

allow-forms

Dieser Attribut-Wert weist den Browser an, dass die per Inline-Frame eingebettete Webseite Formulare enthalten darf und demnach Eingaben abfragen oder erzwingen kann. Für den Benutzer ist möglicherweise nicht erkennbar, dass das in einem eingebetteten Frame aufgerufene Formular nicht von der aufgerufenen Webseite stammt.

allow-scripts

Dieser Attribut-Wert weist den Browser an, dass die per Inline-Frame eingebettete Webseite Script-Code enthalten darf und somit auf die eingebettete Webseite zugreift. Dieses Script kann somit aus dem eingebetteten Frame beispielsweise Inhalte der einbettenden Webseite manipulieren.

Wie bereits erwähnt, können dem Attribut sandbox einzelne Werte wie <iframe sandbox="allow-same-origin"> oder mehrere aufeinanderfolgende Werte wie <iframe sandbox="allow-forms allow-scripts allow-top-navigation"> zugewiesen werden. Die Nutzung des sandbox Attributs sollte nur erfolgen, wenn die per Inline-Frame eingebettete Webseite dies zwingend erfordert und bekannt ist welche Formulardaten bzw. Scripte von der eingebetteten Webseite gefordert bzw. ausgeführt werden.

Sandbox Nutzung innerhalb der eigenen Webseite

Bei dynamischen Webseiten, kann es erforderlich sein Inhalte die von Nutzern eingegeben werden und möglicherweise schadhaften Code enthalten könnten die Same-Origin-Policy zu entziehen. Für diesen Fall kann das sandbox Attribut auch wie im folgenden Beispiel als Standalone Attribut notiert werden.

<iframe sandbox src="NutzerBeitraege.php?id=110"></iframe>

In diesem Fall wird das vom eigenen Server stammende PHP-Script, welches normalerweise unter die Same-Origin-Policy fallen würde, als ein von einem fremden Server stammendes PHP-Script deklariert.

seamless Attribut

Für die Einbindung wiederkehrender Inhalte wie beispielsweise Navigationen, Header oder Footer in statische HTML Seiten bietet HTML5 für Inline-Frames das Attribut seamlessBedeutung: seamlessseamless; nahtlos an. Diese Attribut weist den Browser an, die im src Attribut angegebene Ressource zu inkludieren, und nicht einzubetten.

Folglich werden die Stylesheet-Definitionen des inkludierenden Dokuments auch für das inkludierte Dokument gültig, entgegen der Einbettung per Inline-Frame, bei der die Style-Definitionen des eingebetteten Dokuments beibehalten werden.

Ebenso verändert sich das Verhalten von Hyperlinks die, wenn nichts anderes definiert wurde, das Verweisziel im Fenster oder Tab des inkludierenden Dokuments öffnen. Bei Einbettung per Inline-Frame werden Hyperlinks, wenn nichts anderes definiert wurde, im Inline-Frame-Fenster geöffnet.

srcdoc Attribut

Mit dem Attribut srcdoc wird der Inhalt eines Inline-Frames direkt notiert, anstatt ihn mit dem Attribut src zu referenzieren. In Verbindung mit dem Attribut sandbox können Inhalte somit direkt in den HTML-Code eingefügt werden. Das <iframe> Element enthält in diesem Fall kein src Attribut.

In diesem Fall ist innerhalb des <iframe> Elements stattdessen als Erstes ein sandbox Attribut notiert, wodurch die eingebundene Inhalte als von einem fremden Server stammend behandelt werden und der Same-Origin-Policy unterliegen. Als Zweites wird ein seamless Attribut, um den Inhalt in die Webseite zu inkludieren, und drittens folgt das srcdoc Attribut, welches den gesamten HTML-Code des einzubindenden Inhalts definiert.

Die HTML5 Spezifikation schreibt jedoch vor, dass die Zeichen " und & innerhalb der Wertzuweisung des srcdoc Attributs durch ihre HTML-Entity &quot; bzw. &amp; ausgezeichnet werden müssen.

<iframe sandbox seamless srcdoc="<p>Sie können die Bilder <a href=&quot;/gallery.php?page=cover&amp;imgid=21&quot;>in der Galerie sehen</a>.</p>"></iframe>

& Spezifikation

• W3C Spezifikation zum <iframe> - ElementW3C Spezifikation zum <iframe> - Element
• WHATWG Spezifikation zum <iframe> - ElementWHATWG Spezifikation zum <iframe> - Element