HTML iframe, Fenster in ein anderes Dokument

HTML iframe

HTML iframe fügt innerhalb des body-Elements ein Inline-Fenster in ein anderes Dokument ein. Der Browser rendert eine weitere HTML-Datei innerhalb der Webseite.
iframes zeigen beliebige Inhalte, z.B. Formulare, Bilder, Videos, Tabellen und nicht zuletzt Werbung. Mit iframe liefern YouTube und Vimeo ihre Videos in unsere Webseiten.

18-12-15 SITEMAP

Unabhängig mit eigenem Layout

Der Inhalt des iframe-Fensters ist unabhängig vom HTML-Dokument, in dem das iframe-Element sitzt. Zudem kann das Original-Dokument schon angezeigt werden, während das iframe-Dokument noch geladen wird. In iframes wird darum gern Werbung dargestellt.

iframe-Einschübe rühren nicht am Layout der Seite, in der sie sitzen, und bringen ihre eigenen Stile und Skripte mit, die wiederum nicht auf die Seite zugreifen können, in die sie eingebettet sind. Ihre Skripte können aber Spuren in Form von Cookies hinterlassen, die als Third Party Cookies bezeichnet werden.

Für die Seite, die Inhalte anderer Seiten über iframe einbettet, birgt iframe ein gewisses Maß an Sicherheit: Eingekapselt in ein iframe statt direkt in die Seite eingebettet bleibt der fremde Inhalt von der eigenen Seite getrennt.

Zwischen dem öffnenden und schließenden iframe-Tag können Texte, Bilder oder Links stehen. Die Inhalte zwischen dem öffnenden und schließenden Tag werden nur von Browsern dargestellt, die das iframe-Tag nicht erkennen. In freier Wildbahn werden wir derart alten Browsern nicht mehr begegnen.

Aber Achtung!

Nicht jede Webseite erlaubt, dass Seiten in andere Domainen eingebettet werden können! Viele Administratoren von Webseiten verhindern das ungefragte Einbinden über iframes. Dazu mehr unten auf dieser Seite.

HTML Markup für iframe

<iframe height="260" width="280" src="iframe.html"> 
   <a href="iframe.html">Lorem ipsum </a> 
</iframe> 

CSS für iframe

Ohne width und height-Attribut hätte das iframe-Element eine Breite von 304 und eine Höhe von 154 Pixeln. Die linke und die obere Kante des iframe-Elements hat eine stärkere Kontur (border), um deutlich zu machen, dass hier ein anderes Dokument eingebunden ist.

Für ein responsives iframe reicht schon ein width: 100% im CSS. Allerdings wird das iframe-Tag in erster Linie für Video in Webseiten eingesetzt und braucht das Seitenverhältnis des Videos, um sich an den ViewPort anzupassen.

So einfach wie bei einem img-Tag mit width:100% height:auto funktioniert responsives iframe nicht. Damit sich alle iframe-Elemente mit Video aus einer Angabe der CSS-Datei steuern lassen, greift der Trick mit padding in Prozentwerten: CSS für HTML-Video / Video in iframe

iframe vs object-Tag

Im Grunde genommen hätte das flexiblere object-Tag das iframe-Tag überflüssig gemacht, das aus XHTML 1.1 auch verbannt und in HTML5 wieder freudig aufgenommen wurde.

Das object-Tag funktioniert in allen Browsern tadellos – als wäre es ein iframe. Allerdings war das object-Tag in Internet Explorer bis Version 7 derart lieblos und obendrein fehlerhaft implementiert, dass es nur in wenigen Umgebungen möglich war, ein object-Tag anstelle von iframes einzubinden. Erst IE8 zeigt object-Tags ohne überflüssige Scrollleisten und störende Rahmen und Sicherheitslücken (?).

iframe gegen Scripte sichern: sandbox

Das iframe-Dokument übernimmt das CSS des aufrufenden Dokuments nicht und nutzt nur sein eigenes CSS für die Formatierung des Inhalts und seine eigenen Scripte für das Ausführen von Funktionen.

Mit dem sandbox-Attribut kann die aufrufende Seite den Inhalt des iframes einschränken – aus Sicherheitsgründen. Das ist eine Absicherung gegen Inhalte von Quellen, die nicht vertrauenswürdig sind.

iframe mit sandbox: Die Überschrift ist nicht mehr Orange wie im Beispiel oben, denn das Orange wird von einem Script getriggert. Der Link ist nicht mehr klickbar.
Nicht IE8 und älter
<iframe src="iframe.html" sandbox=""></iframe>

sandbox verhindert die Ausführung von Scripten, Plugins, Links, die aus dem iframe hinausführen, den Zugriff auf Cookies und auf andere Seiten (auch aus derselben Domaine). Die Einschränkungen können aber durch allow-forms, allow-same-origin, allow-scripts, allow-top-navigation aufgehoben werden.

Auf jeden Fall sollten allow-scripts und allow-same-origin nicht zusammen erlaubt werden: Dann könnte die eingebettete Seite das sandbox-Attribut vollständig entfernen und damit alle Sicherheitsvorkehrungen aus dem Weg räumen.

Höhe des iframe

Wenn der iframe in derselben Domain liegt, reichen drei Zeilen Javascript.

document.querySelector(".myiframe").addEventListener ( "load", function () {
   this.setAttribute("style","height:" + this.contentWindow.document.body.scrollHeight + "px");
});

scrollHeight ist die Höhe des iframe, aber zuvor muss sichergestellt sein, dass alle Ressourcen des iframe geladen sind (Bilder, CSS, Scripte). Dafür sorgt der EventListener.

iframe mit srcdoc

Die einzige Methode, einem iframe Inhalt zuzuweisen, war vor HTML5 die Angabe einer URL im src-Attribut. Der Inhalt des iframe musste ein eigenständiges HTML-Dokument sein, egal ob es in derselben Domains lag oder von einer anderen Domaine geladen wurde.

Die aktuellen Browser unterstützen das srcdoc-Attribut, das HTML-Code aufnimmt und als Inhalt des iframe darstellt.

So kann das Markup im iframe gegen das CSS und HTML der aufrufenden Seite abgeschottet werden. Kommentare, die nur einfaches HTML enthalten, sind ein typischer Fall für ein iframe mit scrdoc-Attribut.

Alle modernen Browser außer IE11.
<iframe srcdoc='
<html>
<head>
   <style>
      body {
          background:ivory;
       }
   </style>
</head>

<body>
<p>…</p>

</body></html>'>
</iframe>

HTML-Attribute für iframe

allowLeistungsmerkmal (Feature Request) des frame-Inhalts
allowfullscreenOb der Inhalt des iframe fullscreen angezeigt werden darf
allowpaymentrequestiframe darf einen PaymentRequest stellen
src URL einer HTML-, ASP-, PHP- oder anderen Seite. Der Inhalt der referenzierten URL erscheint im Frame.
srcdoc Für ein besonderes Maß an Sicherheit bei Inhalten aus nicht-vertrauenswürdigen Quellen wird der Quelltext des iframes in das srcdoc-Attribut gesetzt.
nameZeichenfolge, die den Frame identifiziert. Der Name muss eindeutig sein und darf nur einmal im Dokument vorkommen.
sandboxlegt Einschränkungen für den Inhalt des iframes fest
allow-forms, allow-same-origin, allow-scripts, allow-top-navigation
height vertikale Ausdehnung des iframe-Elements – entweder in Pixel oder Prozentangaben in Bezug auf die Gesamthöhe des umfassenden Blocks.
width horizontale Größe des iframes entweder in Pixel oder als Prozentsatz des umspannenden Elements.
Nicht mehr in HTML5
seamless gibt an, dass sich das iframe ohne sichtbaren Rahmen in die Seite einfügen soll. Überflüssig, anstelle dessen CSS border : none.
frameborder (nicht unterstützt in HTML5) Rahmen um den Frame. Die möglichen Werte sind 0 oder no und 1 oder yes. Der Wert von yes oder 1 erlaubt die Darstellung eines Rahmens. Ein Wert von no oder 0 unterdrückt die Ausgabe eines Rahmens. CSS border: 0 entfernt den Rahmen, der bei iframe automatisch gerendert wird.
longdesc (nicht unterstützt in HTML5) URL eines HTML-Dokuments, das eine ausführlichen Beschreibung des Frames enthält. Das Attribut ist dafür gedacht, mehr Informationen zur Verfügung zu stellen, als das title-Element darstellen kann.
marginheight, marginwidth (nicht unterstützt in HTML5) Abstand nach unten und oben / rechts und links zwischen Framerahmen und Inhalt in Pixel. Wenn unrealistische Werte angegeben werden, ignoriert der Browser das Attribut.
scrolling (nicht unterstützt in HTML5) horizontale und vertikale Scrollleiste, die im Frame erscheint. Wenn der Inhalt größer ist als der Frame, erlaubt sie dem Besucher, aufwärts und abwärts oder nach rechts und links zu scrollen, um den gesamten Inhalt zu sehen. Die drei möglichen Werte sind: yes, womit festgelegt wird, dass stets eine Scrollleiste erscheint, no, womit nie eine Scrollleiste erscheint, und auto, das die Scrollleiste einspielt, wenn sie erforderlich ist. Wenn kein Wert angegeben wird, ist die Voreinstellung auto.

Anstelle der veralteten Attribute setzen wir heute CSS ein.

seamless

seamless (nahtlos) soll das iframe-Element ohne Rahmen in die Seite setzen. Hat mal in Safari und Chrome funktioniert und ist wieder im World Wide Papierkorb verschwunden, denn dafür gibt es schließlich CSS border:none.

scrolling, marginwidth /marginheight

Die HTML-Attribute, die für die Darstellung des iframes gesorgt haben, sind aus HTML5 verbannt. Stattdessen soll CSS verwendet werden.

Anstelle von scrolling="no" entfernt overflow:hidden die Scrollleisten.

Die älteren IE-Versionen brauchen die alten Attribute aber weiterhin, damit sich das iframe nahtlos in die Seite platziert. Vorsichtshalber nimmt man also beides: Das seamless-Attribut und scrolling.

SAMEORIGIN: iframe von anderen Domains

Wenn der Inhalt eines iframe-Elements nicht angezeigt wird und die Fehlermeldung Refused to display 'https://anderedomain.de' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN' oder ähnlich lautet, hat die angefragte Domain (anderedomain.de) die Direktive SAMEORIGIN im Header geliefert.

Das bedeutet, dass die angefragte Domain nicht erlaubt, ihre Inhalte ungefragt in einem iframe auf anderen Seiten anzuzeigen.

Das ist eine Konfiguration des Servers, auf dem anderedomain.de gehostet ist und eine wichtige Sicherheitsvorkehrung erfahrener Webseitenbetreiber.

Apache Konfiguration
Header always append X-Frame-Options SAMEORIGIN

oder

Nginx Konfiguration
add_header X-Frame-Options SAMEORIGIN;

Kurz: Die x-frame-option verhindert, dass Inhalte in andere Seiten eingebettet werden. Nur der Webmaster der Seiten kann auf Anfrage die Nutzung in einem iframe für bestimmte URLs freischalten.

Auch Anwendungen können das Einbinden der Seiten in andere Domainen verhindern, so z.B. das Content Management System Drupal, dass die Übernahme von Seiten schon im Kern des CMS ausschließt.