HTML/Tutorials/Aktive Inhalte einbinden
- 20min
- leicht
Häufig will man Webseiten mit Drittanbieter-Inhalten anreichern, wie z. B. YouTube-Videos, interaktiven Kartenausschnitten oder Social Media Posts. Dabei kümmert sich ein externer Dienst um Darstellung, Funktion und Datenschutz (z. B. Cookie-Management via Consent).
Auch bei Code-Editoren und Zahlungslösungen im Online-Handel will man eine Cross-Domain-Kommunikation mit klaren Grenzen erreichen, damit der iframe-Inhalt technisch und rechtlich klar getrennt vom Hauptinhalt bleibt.
Dieser Artikel zeigt, wo und wie man heute iframes nützlich und sicher einsetzen kann.
In anderen Bereichen ist der Einsatz von iframes durch bessere Lösungen ersetzt worden:
- HTML5 audio bzw. video sind wesentlich mächtiger als die hier vorgestellten Elemente, da sie keine zusätzlichen Plugins benötigen und eigene Steuerungselemente für das Abspielen mitbringen.
- SVG kann ohne einen früher notwendigen Viewer direkt im HTML, als img oder als background-image eingebunden und sogar animiert werden.
- PDFs werden immer wieder als vermeintlich barrierefrei beworben; Text sollte aber nicht in einem iframe eingebunden, sondern Teil der Webseite sein. So kann es auch von SEO erfasst werden.
- Flash und im Browser ausgeführte Java-Applets werden aus Sicherheitsbedenken nicht mehr unterstützt.
Inhaltsverzeichnis
iframe
Das iframe-Element (engl. inline frames) wird eher zum Einbinden von Dokumenten und anderen Web-Seiten verwendet. Eingebettete Frames sind (ähnlich wie Grafiken) Bereiche innerhalb einer HTML-Datei, in denen fremde Quellen – vor allem andere HTML-Dateien – angezeigt werden können.[1][2]
Folgende Attribute sind möglich:
name: Name des iframessandbox: lässt den iframe in einer sandbox mit erhöhten Sicherheitsrestriktionen laufen.src: Quellesrcdoc: ermöglicht die Angabe von HTML, das dann als Inhalt des iframes dargestellt wirdheight: Höhe in CSS-Pixelwidth: Breite in CSS-PixelBeachten Sie: In HTML5 ist die Angabe von Prozentwerten verpönt; Formatierungen sollten über das CSS erfolgen.
Die Default-Stylesheets der Browser verwenden für iframes ohne Breitenangaben 300 x 150px - so entstehen für die oft längeren Wikiseiten Scrollbalken. Dies lässt sich mit CSS teilweise umgehen:
iframe {
width: 80%;
height: 80%;
resize: both;
}
Eine Prozentangabe im CSS überschreibt die Werte des width-Attributs. Durch resize kann der iframe in beide Richtungen vergrößert werden.
<p>Sie können die eingebettete Seite über den folgenden Verweis aufrufen:
<a href="https://wiki.selfhtml.org/wiki/SELFHTML">SELFHTML</a>
</p>
Auf der Beispielseite wird in einem iframe unser SELF-Wiki eingebunden. Im Default-Stylesheet wird das iframe durch eine schwarze, dickere Rahmenlinie gekennzeichnet, die man aber mit CSS border: none; entfernen könnte.
Oft wurde vorgeschlagen, im iframe einen zusätzlichen Alternativtext anzugeben. Dieser wird von modernen Browsern jedoch nicht angezeigt. Deshalb solltest du immer nach dem iframe einen Textabsatz mit einem Alternativtext und einem Link als Fallback notieren.
Vorteile einer Sandbox
Wie in der Einführung angesprochen, sollen bestimmte Aktivitäten innerhalb des iframe nach dem Sandkasten-Prinzip so gekapselt werden, dass sie unsere eigene Seite nicht verändern, stören oder in irgendeiner Form beschädigen dürfen. Die Sandbox dient als eine Art Sicherheitskäfig, in der die Anwendung ausgeführt wird.
Das sandbox-Attribut bewirkt, dass die im iframe dargestellte Ressource Aktionen, die potenziell unsicher sind oder den Benutzer verwirren könnten, verhindert werden und explizit freigeschaltet werden müssen. Es handelt sich dabei um eine Mitigation-Technik, die die Auswirkungen einer XSS- oder CSRF-Lücke mindern soll.
<iframe
width="850"
height="600"
src="https://www.youtube.com/embed/dQw4w9WgXcQ"
title="Einstieg in HTML"
sandbox="allow-scripts allow-same-origin allow-presentation"
allowfullscreen>
</iframe>
Im Beispiel wird ein Youtube-Video in einem iframe gezeigt.
- allow-scripts
- Erlaubt dem iframe die Ausführung von JavaScript (wird für YouTube benötigt).
- allow-same-origin
- Behandelt den iframe-Inhalt so, als käme er aus demselben Ursprung (wird für eingebettete YouTube-Steuerelemente benötigt, damit sie korrekt funktionieren).
- allow-presentation
- Erlaubt die Videowiedergabe im Vollbild- oder Bild-in-Bild-Modus.
allow-same-origin
Das sandbox-Attribut entfernt die Berechtigung des eingebetteten Dokuments, auf die Daten seiner eigenen Origin zuzugreifen. Bettet eine beliebige Seite ein Dokument von example.com/foo ein, so darf das eingebettete Dokument nicht auf seine eigenen Daten zugreifen (etwa window.localStorage oder document.cookie). Dies kann mit der Angabe von sandbox="allow-same-origin" wieder zurückgenommen werden:
Wird dieses Attribut notiert, so darf das eingebettete Dokument wieder auf die eigenen Daten nach der Same-Origin-Policy zugreifen.
srcdoc - HTML im iframe
Mithilfe des srcdoc-Attributs lässt sich HTML-Code als Inhalt des iframes angeben, dabei hat das srcdoc-Attribut Vorrang vor dem src-Attribut. Bisher ließ sich dies zwar bereits über Data-URLs erreichen, aber hierfür musste das HTML URL-codiert werden. Außerdem lässt sich mithilfe des sandbox-Attribut der enthaltene Code isolieren, da alle Browser, die srcdoc unterstützen, sandbox ebenfalls unterstützen. Browser, die mit srcdoc nichts anfangen können, stellen gar nichts dar – der zu isolierende Inhalt sollte keinesfalls als Fallback im src-Attribut abgelegt werden, da dies die Verwendung des srcdoc-Attributs ad absurdum führen würde.
<iframe id="preview"></iframe>
<script>
const editor = document.getElementById("editor");
const preview = document.getElementById("preview");
function updatePreview() {
preview.srcdoc = editor.value;
}
editor.addEventListener("input", updatePreview);
// Initial render
updatePreview();
</script>
Das Beispiel enthält eine textarea, in der das Markup für eine Webseite bereits vorhanden ist und die aber durch den Benutzer weiter verändert werden kann.
Ein Script liest nun diesen Textinhalt aus und setzt ihn in den iframe mit der id preview ein. Bei weiteren Änderungen innerhalbs der textarea wird der Inhalt des iframes laufend aktualisiert -eine Art Mini-Frickl.
iframes seamless einpassen
Es wurde im SELF-Forum immer wieder gefragt, wie man fremde Inhalte in einem iframe so formatieren kann, dass sie sich perfekt in die Seite einpassen. Abgesehen von der Frage, ob dies z. B. bei Bezahlsystemen überhaupt erwünscht ist, gibt es dafür verschiedene Ansätze:
Ein seamless-Attribut sollte den Rahmen um iframes verschwinden lassen. Da das ebensogut auch mit einer passenden CSS-Regel realisiert werden kann, wurde das Attribut wieder obsolet.
iframe {
border: none;
}
Schwieriger ist es, die Höhe der eingebundenen Inhalte zu ermitteln, um dann die Höhe des iframe so zu verändern, dass keine Scrollbalken benötigt werden.
Dies zeigt unser Folgekapitel:
- Fenster- und Frameszugriff
Alternative Elemente
Neben dem iframe-Element gibt es weitere - heute jedoch nur selten verwendete - Elemente zum Einbinden aktiver Inhalte.
object
Mit dem object-Element kann man - anders als der Einbindung mit embed und iframe - alternative Inhalte als Fallback zur Verfügung stellen.
Browser, die keine SVG-Grafiken darstellen können, zeigen stattdessen eine andere Grafik. Falls auch diese Grafik nicht angezeigt werden kann oder soll, steht der Alternativtext dieser Grafik zur Verfügung.
Dabei wird in diesem Beispiel mit …
-
data: der URI angegeben, der den Ort der Quelle bestimmt -
type: MIME-Typ des Plugins, bzw. des eingebundenen Dokuments
angegeben
Weiterhin können Parameter durch das param-Element angegeben werden. Beim Attribut name wird der Namen; bei value der gewünschte Wert des Parameters angegeben, der dem Plugin übergeben werden soll.
embed
Daneben existiert das embed-Element, das lange nicht zum HTML-Standard gehörte und erst mit HTML5 offiziell akzeptiert wurde.
Siehe auch
- Einstieg in Leaflet
Leaflet ist eine API, um Karten per iframe in Webseiten einzubinden
SELF-Blog-Artikel von Jürgen Berkemeier - Fenster- und Frameszugriff
Weblinks
- ↑ Spezifikation (WHATWG): The iframe-Element
- ↑ MDN: iframe
