<iframe>: Das Inline Frame-Element

<iframe
  id="inlineFrameExample"
  title="Inline Frame Example"
  width="300"
  height="200"
  src="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&amp;layer=mapnik">
</iframe>

iframe {
  border: 1px solid black;
  width: 100%; /* takes precedence over the width set with the HTML width attribute */
}

Jeder eingebettete Browsing-Kontext hat sein eigenes Dokument und erlaubt URL-Navigationen. Die Navigationen jedes eingebetteten Browsing-Kontextes werden in die Sitzungshistorie des obersten Browsing-Kontextes linearisiert. Der Browsing-Kontext, der die anderen einbettet, wird als Eltern-Browsing-Kontext bezeichnet. Der oberste Browsing-Kontext — derjenige ohne Eltern — ist normalerweise das Browserfenster, dargestellt durch das Window-Objekt.

Dieses Element umfasst die globalen Attribute.

allow

Bestimmt eine Permissions Policy für das <iframe>. Die Richtlinie definiert, welche Funktionen dem <iframe> basierend auf dem Ursprung der Anfrage zur Verfügung stehen (zum Beispiel Zugriff auf Mikrofon, Kamera, Batterie, Web-Freigabe, etc.).

Siehe iframes im Abschnitt Permissions-Policy für Beispiele.

Hinweis: Eine durch das allow-Attribut festgelegte Permissions Policy stellt eine zusätzliche Einschränkung dar, über die hinaus die im Permissions-Policy-Header festgelegte Richtlinie hinausgeht. Sie ersetzt diese nicht.

allowfullscreen

Auf true gesetzt, falls das <iframe> den Vollbildmodus durch Aufrufen der Methode requestFullscreen() aktivieren kann.

Hinweis: Dieses Attribut wird als veraltetes Attribut betrachtet und als allow="fullscreen" umdefiniert.

allowpaymentrequest Veraltet Nicht standardisiert

Auf true gesetzt, falls ein Cross-Origin- <iframe> die Payment Request API aufrufen darf.

Hinweis: Dieses Attribut wird als veraltetes Attribut betrachtet und als allow="payment" umdefiniert.

browsingtopics Experimentell Nicht standardisiert

Ein boolesches Attribut, das, falls vorhanden, angibt, dass die ausgewählten Themen für den aktuellen Benutzer mit der Anfrage für den <iframe>-Quelltext gesendet werden sollen. Siehe Using the Topics API für weitere Details.

credentialless Experimentell

Auf true gesetzt, um das <iframe> credentialless zu machen, was bedeutet, dass dessen Inhalt in einem neuen, kurzlebigen Kontext geladen wird. Es hat keinen Zugriff auf das Netzwerk, Cookies und Speicherdaten, die mit seinem Ursprung verbunden sind. Es nutzt einen neuen Kontext, der lokal zur Lebensdauer des obersten Dokuments ist. Im Gegenzug können die Cross-Origin-Embedder-Policy (COEP)-Einbettungsregeln aufgehoben werden, sodass Dokumente mit gesetztem COEP Drittanbieterdokumente einbetten können, die dies nicht tun. Siehe IFrame credentialless für weitere Details.

csp Experimentell

Eine für die eingebettete Ressource erzwungene Content Security Policy. Siehe HTMLIFrameElement.csp für Details.

height

Die Höhe des Rahmens in CSS-Pixeln. Standard ist 150.

loading

Gibt an, wann der Browser das iframe laden soll:

eager

Lade das iframe sofort beim Seitenladen (dies ist der Standardwert).

lazy

Verschieben Sie das Laden des iframes, bis es eine berechnete Entfernung vom visuellen Viewport erreicht hat, wie vom Browser definiert. Die Absicht besteht darin, das Netzwerk und die Speicherkapazität zu vermeiden, die erforderlich sind, um den Frame herunterzuladen, bis der Browser vernünftigerweise sicher ist, dass er benötigt wird. Dies verbessert die Leistung und die Kosten in den meisten typischen Anwendungsfällen, insbesondere durch Reduzierung der anfänglichen Ladezeiten der Seite.

Hinweis: Das Laden wird nur verschoben, wenn JavaScript aktiviert ist. Dies ist eine Anti-Tracking-Maßnahme.

name

Ein anvisierbarer Name für den eingebetteten Browsing-Kontext. Dies kann im target-Attribut der <a>, <form> oder <base> Elemente verwendet werden; das formtarget-Attribut der <input> oder <button> Elemente; oder im windowName-Parameter in der Methode window.open().

referrerpolicy

Gibt an, welcher Referrer beim Abrufen der Ressource des Frames gesendet werden soll:

no-referrer

Der Referer-Header wird nicht gesendet.

no-referrer-when-downgrade

Der Referer-Header wird nicht an Origins ohne TLS (HTTPS) gesendet.

origin

Der gesendete Referrer wird auf den Ursprung der referenzierenden Seite beschränkt sein: dessen Schema, Host und Port.

origin-when-cross-origin

Der Referrer, der an andere Origins gesendet wird, wird auf das Schema, den Host und den Port beschränkt. Navigationen auf demselben Ursprung beinhalten weiterhin den Pfad.

same-origin

Ein Referrer wird für den gleichen Ursprung gesendet, aber Cross-Origin-Anfragen enthalten keine Referrer-Informationen.

strict-origin

Senden Sie nur den Ursprung des Dokuments als Referrer, wenn das Protokollsicherheitsniveau gleich bleibt (HTTPS→HTTPS), senden Sie ihn jedoch nicht an ein weniger sicheres Ziel (HTTPS→HTTP).

strict-origin-when-cross-origin (Standard)

Senden Sie eine vollständige URL bei einer Anfrage für denselben Ursprung, senden Sie lediglich den Ursprung, wenn das Protokollsicherheitsniveau gleich bleibt (HTTPS→HTTPS) und senden Sie keinen Header an ein weniger sicheres Ziel (HTTPS→HTTP).

unsafe-url

Der Referrer wird den Ursprung und den Pfad einschließen (aber nicht den Fragment, Password oder Username). Dieser Wert ist unsicher, da er die Ursprünge und Pfade von TLS-geschützten Ressourcen an unsichere Ursprünge weiterleitet.

sandbox

Steuert die Einschränkungen, die auf den im <iframe> eingebetteten Inhalt angewendet werden. Der Wert des Attributs kann entweder leer sein, um alle Einschränkungen anzuwenden, oder Leerzeichen-getrennte Tokens enthalten, um bestimmte Einschränkungen aufzuheben:

allow-downloads

Erlaubt das Herunterladen von Dateien über ein <a> oder <area> Element mit dem Download-Attribut, sowie durch die Navigation, die zu einem Datei-Download führt. Das funktioniert unabhängig davon, ob der Benutzer auf den Link geklickt hat oder JS-Code es ohne Benutzerinteraktion initiiert hat.

allow-forms

Erlaubt der Seite, Formulare zu senden. Wenn dieses Schlüsselwort nicht verwendet wird, wird ein Formular normal angezeigt, aber das Senden wird nicht die Validierung der Eingaben auslösen, Daten an einen Webserver senden oder einen Dialog schließen.

allow-modals

Erlaubt der Seite das Öffnen von modalen Fenstern durch Window.alert(), Window.confirm(), Window.print() und Window.prompt(), während das Öffnen eines <dialog> unabhängig von diesem Schlüsselwort erlaubt ist. Es erlaubt der Seite auch, das BeforeUnloadEvent Ereignis zu empfangen.

allow-orientation-lock

Lässt die Ressource die Bildschirmausrichtung sperren.

allow-pointer-lock

Erlaubt der Seite die Nutzung der Pointer Lock API.

allow-popups

Erlaubt Popups (wie von Window.open(), target="_blank", Window.showModalDialog()). Wenn dieses Schlüsselwort nicht verwendet wird, wird die Funktionalität stillschweigend fehlschlagen.

allow-popups-to-escape-sandbox

Erlaubt einem sandkastingedten Dokument, einen neuen Browsing-Kontext zu öffnen, ohne die Sandboxing-Flags anzuwenden. Dies wird es ermöglichen, beispielsweise eine Drittanbieterwerbung sicher zu sandboxen, ohne dieselben Einschränkungen für die Seite aufzuzwingen, auf die die Anzeige verlinkt. Wenn dieses Flag nicht enthalten ist, wird eine weitergeleitete Seite, ein Popup-Fenster oder ein neuer Tab denselben Sandbox-Einschränkungen unterliegen wie das ursprüngliche <iframe>.

allow-presentation

Erlaubt den Einbettenden die Kontrolle darüber, ob ein iframe eine Präsentationssession starten kann.

allow-same-origin

Wenn dieses Token nicht verwendet wird, wird die Ressource als von einem speziellen Ursprung stammend behandelt, der immer die Same-Origin-Policy fehlschlagen lässt (was potenziell den Zugriff auf Datenspeicherung/Cookies und einige JavaScript-APIs verhindert).

allow-scripts

Erlaubt der Seite das Ausführen von Skripten (aber nicht das Erstellen von Pop-up-Fenstern). Wenn dieses Schlüsselwort nicht verwendet wird, ist dieser Vorgang nicht erlaubt.

allow-storage-access-by-user-activation Experimentell

Erlaubt einem Dokument, das in dem <iframe> geladen wurde, die Storage Access API zu verwenden, um Zugriff auf nicht partitionierte Cookies zu beantragen.

allow-top-navigation

Lässt die Ressource den obersten Browsing-Kontext (denjenigen mit dem Namen _top) navigieren.

allow-top-navigation-by-user-activation

Lässt die Ressource den obersten Browsing-Kontext navigieren, aber nur, wenn dies durch eine Benutzeraktion initiiert wurde.

allow-top-navigation-to-custom-protocols

Erlaubt Navigationen zu nicht-http-Protokollen, die im Browser eingebaut oder von einer Website registriert wurden. Diese Funktion wird auch durch die Schlüsselwörter allow-popups oder allow-top-navigation aktiviert.

Hinweis:

• Wenn das eingebettete Dokument denselben Ursprung wie die einbettende Seite hat, ist es dringend abzuraten, sowohl allow-scripts als auch allow-same-origin zu verwenden, da dies dem eingebetteten Dokument ermöglicht, das sandbox-Attribut zu entfernen, was es nicht sicherer macht, als das sandbox-Attribut überhaupt nicht zu verwenden.
• Sandboxing ist nutzlos, wenn der Angreifer Inhalte außerhalb eines eingegrenzten iframe anzeigen kann, z.B. wenn der Betrachter den Frame in einem neuen Tab öffnet. Solche Inhalte sollten auch von einem separaten Ursprung bereitgestellt werden, um mögliche Schäden zu begrenzen.

Hinweis: Wenn der Benutzer weitergeleitet wird, ein Popup-Fenster geöffnet oder ein neuer Tab von einer eingebetteten Seite innerhalb eines <iframe>s mit dem sandbox-Attribut geöffnet wird, unterliegt der neue Browsing-Kontext denselben sandbox-Einschränkungen. Dies kann Probleme verursachen - zum Beispiel, wenn eine Seite innerhalb eines <iframe>s eingebettet ist, ohne dass ein sandbox="allow-forms" oder sandbox="allow-popups-to-escape-sandbox"-Attribut gesetzt ist, und eine neue Seite in einem separaten Tab öffnet, wird die Formularübermittlung in diesem neuen Browsing-Kontext stillschweigend fehlschlagen.

src

Die URL der einzubettenden Seite. Verwenden Sie einen Wert von about:blank, um eine leere Seite einzubetten, die der Same-Origin-Policy entspricht. Beachten Sie auch, dass das programmgesteuerte Entfernen des src-Attributs eines <iframe> (z.B. über Element.removeAttribute()) dazu führt, dass about:blank in dem Frame in Firefox (ab Version 65), Chromium-basierten Browsern und Safari/iOS geladen wird.

Hinweis: Die about:blank-Seite verwendet die URL des einbettenden Dokuments als Basis-URL beim Auflösen relativer URLs, wie z.B. Ankerlinks.

srcdoc

Inline-HTML zur Einbettung, das das src-Attribut überschreibt. Sein Inhalt sollte der Syntax eines vollständigen HTML-Dokuments folgen, das die Doctype-Direktive, <html>, <body>-Tags, etc. beinhaltet, obwohl die meisten davon weggelassen werden können, so dass nur der Body-Inhalt übrig bleibt. Dieses Dokument wird die Position about:srcdoc haben. Wenn ein Browser das srcdoc-Attribut nicht unterstützt, fällt er auf die URL im src-Attribut zurück.

Hinweis: Die about:srcdoc-Seite verwendet die URL des einbettenden Dokuments als Basis-URL beim Auflösen relativer URLs, wie z.B. Ankerlinks.

width

Die Breite des Rahmens in CSS-Pixeln. Standard ist 300.

Diese Attribute sind veraltet und werden möglicherweise nicht mehr von allen User Agents unterstützt. Sie sollten sie nicht in neuen Inhalten verwenden und versuchen, sie aus bestehenden Inhalten zu entfernen.

align Veraltet

Die Ausrichtung dieses Elements im Verhältnis zum umgebenden Kontext.

frameborder Veraltet

Der Wert 1 (der Standard) zeichnet einen Rahmen um diesen Frame. Der Wert 0 entfernt den Rahmen um diesen Frame, aber Sie sollten stattdessen die CSS-Eigenschaft border verwenden, um <iframe>-Rahmen zu steuern.

longdesc Veraltet

Eine URL einer langen Beschreibung des Inhalts des Frames. Aufgrund weitverbreiteten Missbrauchs ist dies für nicht-visuelle Browser nicht hilfreich.

marginheight Veraltet

Der Abstand in Pixeln zwischen dem Inhalt des Frames und dessen oberen und unteren Rändern.

marginwidth Veraltet

Der Abstand in Pixeln zwischen dem Inhalt des Frames und dessen linken und rechten Rändern.

scrolling Veraltet

Gibt an, wann der Browser eine Bildlaufleiste für den Frame bereitstellen soll:

auto

Nur wenn der Inhalt des Frames größer ist als seine Dimensionen.

yes

Immer eine Bildlaufleiste anzeigen.

no

Nie eine Bildlaufleiste anzeigen.

Inline-Frames, wie <frame> Elemente, sind im window.frames Pseudo-Array enthalten.

Mit dem DOM HTMLIFrameElement Objekt können Skripte auf das window Objekt der eingebetteten Ressource über die contentWindow Eigenschaft zugreifen. Die contentDocument Eigenschaft bezieht sich auf das document innerhalb des <iframe>, genauso wie contentWindow.document.

Von innen eines Frames aus kann ein Skript eine Referenz auf sein übergeordnetes Fenster mit window.parent erhalten.

Der Skriptzugriff auf den Inhalt eines Frames unterliegt der Same-Origin-Policy. Skripte können auf die meisten Eigenschaften in anderen window Objekten nicht zugreifen, wenn das Skript von einem anderen Ursprung geladen wurde, einschließlich Skripten innerhalb eines Frames, die auf das übergeordnete Element des Frames zugreifen. Die Cross-Origin-Kommunikation kann durch die Verwendung von Window.postMessage() erreicht werden.

Als ersetztes Element ermöglicht das <iframe>, die Position des eingebetteten Dokuments innerhalb seines Rahmens mithilfe der Eigenschaft object-position anzupassen.

Die error- und load-Ereignisse, die auf <iframe>s ausgelöst werden, könnten verwendet werden, um den URL-Bereich der HTTP-Server des lokalen Netzwerks zu sondieren. Daher, als Vorsichtsmaßnahme für die Sicherheit, lösen User Agents kein error-Ereignis auf <iframe>s aus, und das load-Ereignis wird immer ausgelöst, auch wenn der <iframe>-Inhalt nicht geladen werden kann.

Personen, die mit unterstützender Technologie wie einem Screenreader navigieren, können das title-Attribut auf einem <iframe> verwenden, um dessen Inhalt zu beschriften. Der Wert des Titels sollte den eingebetteten Inhalt kurz und prägnant beschreiben:

<iframe
  title="Wikipedia page for Avocados"
  src="https://en.wikipedia.org/wiki/Avocado"></iframe>

Ohne diesen Titel müssen sie in das <iframe> navigieren, um festzustellen, was dessen eingebetteter Inhalt ist. Dieser Kontextwechsel kann verwirrend und zeitaufwändig sein, insbesondere für Seiten mit mehreren <iframe>s und/oder wenn Einbettungen interaktive Inhalte wie Video oder Audio enthalten.

Dieses Beispiel bettet die Seite unter https://example.org in einem iframe ein. Dies ist ein häufiger Anwendungsfall für iframes: Inhalte einer anderen Seite einzubetten. Zum Beispiel sind das Live-Beispiel selbst und das Try it Beispiel oben beide <iframe>-Einbettungen von Inhalten von einer anderen MDN-Seite.

HTML

<iframe
  src="https://example.org"
  title="iframe Example 1"
  width="400"
  height="300">
</iframe>

Ergebnis

Dieses Beispiel rendert direkt Quellcode in einem iframe. Dies kann als Technik verwendet werden, um Skriptinjektionen zu verhindern, wenn Benutzergenerierter Inhalt angezeigt wird, in Kombination mit dem sandbox-Attribut.

Beachten Sie, dass bei Verwendung von srcdoc alle relativen URLs im eingebetteten Inhalt relativ zur URL der einbettenden Seite aufgelöst werden. Wenn Sie Ankerlinks verwenden möchten, die auf Stellen im eingebetteten Inhalt verweisen, müssen Sie explizit about:srcdoc als Basis-URL angeben.

HTML

<article>
  <footer>Nine minutes ago, <i>jc</i> wrote:</footer>
  <iframe
    sandbox
    srcdoc="<p>There are two ways to use the <code>iframe</code> element:</p>
<ol>
<li><a href=&quot;about:srcdoc#embed_another&quot;>To embed content from another page</a></li>
<li><a href=&quot;about:srcdoc#embed_user&quot;>To embed user-generated content</a></li>
</ol>
<h2 id=&quot;embed_another&quot;>Embedding content from another page</h2>
<p>Use the <code>src</code> attribute to specify the URL of the page to embed:</p>
<pre><code>&amp;lt;iframe src=&quot;https://example.org&quot;&amp;gt;&amp;lt;/iframe&amp;gt;</code></pre>
<h2 id=&quot;embed_user&quot;>Embedding user-generated content</h2>
<p>Use the <code>srcdoc</code> attribute to specify the content to embed. This post is already an example!</p>
"
    width="500"
    height="250"
></iframe>
</article>

So schreiben Sie Escape-Sequenzen bei der Verwendung von srcdoc:

• Schreiben Sie zuerst das HTML auf, indem Sie alles escapen, was Sie in einem normalen HTML-Dokument escapen würden (z.B. <, >, &, etc.).
• < und < repräsentieren dasselbe Zeichen im srcdoc-Attribut. Daher, um es zu einer tatsächlichen Escape-Sequenz im HTML-Dokument zu machen, ersetzen Sie alle Ampersands (&) durch &. Zum Beispiel wird < zu <, und & wird zu &.
• Ersetzen Sie alle Anführungszeichen (") durch ", um zu verhindern, dass das srcdoc-Attribut vorzeitig beendet wird (wenn Sie stattdessen ' verwenden, sollten Sie ' durch ' ersetzen). Dieser Schritt erfolgt nach dem vorherigen, sodass ", das in diesem Schritt erzeugt wurde, nicht zu " wird.

Ergebnis

• CSP: frame-ancestors
• Datenschutz, Berechtigungen und Informationssicherheit