HTML iframe: Fenster in eine andere Webseite

HTML iframe: Einbinden in HTML

iframe-Elemente zeigen beliebige Inhalte vom Formular über Bilder, Videos, Tabellen bis zur Werbung. 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 iframe-Elementen 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 unter Mac OS X scrollen

Das ist ein Dilemma über alle Versionen hinweg: Die Scrollleiste läßt sich auf dem iPhone nicht sichtbar machen und der Benutzer kann das iframe nicht scrollen.

DIE Lösung gibt es wohl nicht, sondern nur »Lösungsansätze«.

• CSS im iframe anpassen:

  html, body {
  	overflow: auto;
  	-webkit-overflow-scrolling: touch;
  } 
  

• Das iframe im aufrufenden Dokument in div-Tags setzen.

  <div class="scroll-wrapper">
  	<iframe loading="lazy" src="iframe.html" title="" …></iframe> 
  </div>
  

  .scroll-wrapper {
  	overflow: auto;
  	-webkit-overflow-scrolling: touch;
  	height: 100%;
  }
  

• Wenn der iframe-Code von einer anderen Quelle kommt, in die nicht eingegriffen werden kann, hilft u.U. JavaScript.

  document.querySelector('iframe').addEventListener('load', function() {
  	this.contentWindow.document.body.style.overflow = 'auto';
  	this.contentWindow.document.body.style.webkitOverflowScrolling = 'touch';
  });
  

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 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.

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.

<iframe title="Grundgerüst srcdoc" srcdoc='
<html lang="de">
<head>
   <style>
      body {
          background:ivory;
       }
   </style>
</head>

<body>
<p>…</p>

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

Nicht vergessen: dem öffnenden iframe-Tag ein title-Attribut mit auf den Weg geben. Das bringt die Barrierefreiheit und kommt dem Benutzer entgegen. Screenreader benutzen das title-Attribut, um den Inhalt des iframe-Elements zu beschreiben. Den Suchmaschinen hilft das title-Attribut ebenfalls, um den Inhalt des iframe-Elements besser zu verstehen.

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.

HTML-Attribute für iframe

Anstelle der veralteten Attribute tritt heute CSS.

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.

Header always append X-Frame-Options SAMEORIGIN

oder

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.