HTML iframe: Fenster in eine andere Webseite

HTML iframe

iframe fügt innerhalb des body-Elements ein Inline-Fenster in die Webseite ein, das unabhängig von der aufrufenden Seite ist. Ein iframe bringt sein eigenes CSS und Javascript mit und beeinflußt Stile und Script der aufrufenden Seite nicht. iframe-Elemente zeigen beliebige Inhalte vom Formular über Bilder, Videos, Tabellen bis zur Werbung.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

HTML iframe: Einbinden in HTML

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 gehört wie das video-Element zu den Replaced Elements. 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.

<iframe height="260" width="280" src="iframe.html">  
</iframe> 

Das CSS des Dokuments im iframe setzt sich durch, Links sind klickbar, Javascript im iframe wird ausgeführt.

iframe Sicherheit: Eingekapselt

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.

Seiten vor dem Einbinden schützen

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.

iframe responsive

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.

<iframe></iframe>

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: CSS aspect ratio.

iframe {
	width:50%;
	min-width: 300px;
	margin: auto;
	border:none; aspect-ratio: 16 / 9;
}

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.
<iframe src="iframe.html" sandbox=""></iframe>

sandbox verhindert das Ausführen von Scripten, Plugins und Links, die aus dem iframe hinausführen, sowie 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 das iframe-Dokument 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

In grauer Vergangenheit war die Angabe der URL einer externen Datei im src-Attribut die einzige Methode, die einem iframe-Element einen Inhalt zuwies.

Die modernen 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 (nicht 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.

Anstelle der veralteten Attribute tritt heute CSS.

Veraltete iframe-Attribute
seamless gibt an, dass sich das iframe ohne sichtbaren Rahmen in die Seite einfügen soll. Überflüssig, anstelle dessen CSS border : none.
frameborder Heute: CSS border:0 entfernt den Rahmen, der bei iframe automatisch gerendert wird.
longdesc 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 CSS margin
scrolling horizontale und vertikale Scrollleiste, die im Frame erscheint. Heute CSS overflow

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.

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.

iframe vs object-Tag

Im Grunde genommen hätte das flexiblere HTML 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-Element in einigen alten Browsern lieblos und fehlerhaft implementiert, dass es nur in wenigen Umgebungen möglich war, ein object-Element anständig darzustellen. So hat das iframe-Element heute den Vorzug.