`<iframe>`: Das Inline-Frame-Element

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, repräsentiert durch das Window-Objekt.

Dieses Element beinhaltet die globalen Attribute.

allow

Gibt eine Berechtigungsrichtlinie für das <iframe> an. Die Richtlinie definiert, welche Funktionen für das <iframe> verfügbar sind (zum Beispiel Zugriff auf Mikrofon, Kamera, Batterie, Web-Share, etc.) basierend auf dem Ursprung der Anfrage.

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

Hinweis: Eine Berechtigungsrichtlinie, die durch das allow-Attribut angegeben wird, implementiert eine weitere Einschränkung zusätzlich zur Richtlinie, die im Permissions-Policy-Header spezifiziert wird. Sie ersetzt diese nicht.

allowfullscreen

Wird auf true gesetzt, wenn das <iframe> den Vollbildmodus durch Aufruf der requestFullscreen()-Methode aktivieren kann.

Hinweis: Dieses Attribut wird als veraltet angesehen und als allow="fullscreen" neu definiert.

allowpaymentrequest Veraltet Nicht standardisiert

Wird auf true gesetzt, wenn einem Cross-Origin-<iframe> das Aufrufen der Payment Request API erlaubt werden soll.

Hinweis: Dieses Attribut wird als veraltet angesehen und als allow="payment" neu definiert.

browsingtopics Experimentell Nicht standardisiert

Ein boolesches Attribut, das, wenn vorhanden, angibt, dass die ausgewählten Themen des aktuellen Benutzers mit der Anfrage für die Quelle des <iframe> gesendet werden sollen. Siehe Using the Topics API für weitere Details.

credentialless Experimentell

Wird auf true gesetzt, um das <iframe> machtlos zu machen, was bedeutet, dass sein 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 verwendet einen neuen Kontext, der sich auf die Lebensdauer des übergeordneten Dokuments bezieht. Im Gegenzug können die Einbettungsregeln Cross-Origin-Embedder-Policy (COEP) aufgehoben werden, sodass Dokumente mit gesetzten COEP eingebettete Drittanbieterdokumente inkludieren können, die dies nicht tun. Siehe IFrame credentialless für weitere Details.

csp Experimentell

Eine Content Security Policy, die für die eingebettete Ressource durchgesetzt wird. Siehe HTMLIFrameElement.csp für Details.

height

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

loading

Gibt an, wann der Browser das iframe laden soll:

eager

Lädt das iframe sofort beim Laden der Seite (dies ist der Standardwert).

lazy

Verzögert das Laden des iframes, bis es eine berechnete Entfernung vom visuellen Viewport erreicht, wie vom Browser definiert. Der Zweck besteht darin, die Nutzung von Netzwerk- und Speicherressourcen zum Abrufen des Frames zu vermeiden, bis der Browser hinreichend sicher ist, dass es benötigt wird. Dies verbessert die Leistung und Kosten in den meisten typischen Anwendungsfällen, insbesondere durch Reduzierung der anfänglichen Ladezeiten der Seite.

Hinweis: Das Laden wird nur verzögert, wenn JavaScript aktiviert ist. Dies dient als Maßnahme gegen Tracking.

name

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

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 Ursprünge ohne TLS (HTTPS) gesendet.

origin

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

origin-when-cross-origin

Der an andere Ursprünge gesendete Referrer wird auf das Schema, den Host und den Port beschränkt. Navigierungen im gleichen Ursprung enthalten weiterhin den Pfad.

same-origin

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

strict-origin

Nur den Ursprung des Dokuments als Referrer senden, wenn das Sicherheitsniveau des Protokolls gleich bleibt (HTTPS→HTTPS), aber nicht an ein weniger sicheres Ziel senden (HTTPS→HTTP).

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

Eine vollständige URL senden, wenn eine gleich ursprungsbezogene Anfrage ausgeführt wird, nur den Ursprung senden, wenn das Sicherheitsniveau des Protokolls gleich bleibt (HTTPS→HTTPS), und keinen Header an ein weniger sicheres Ziel senden (HTTPS→HTTP).

unsafe-url

Der Referrer wird den Ursprung und den Pfad enthalten (aber nicht den Fragment, Passwort, oder Benutzernamen). Dieser Wert ist unsicher, da er Ursprünge und Pfade von TLS-geschützten Ressourcen an unsichere Ursprünge weitergibt.

sandbox

Kontrolliert die Einschränkungen, die auf den eingebetteten Inhalt im <iframe> angewendet werden. Der Wert des Attributs kann entweder leer sein, um alle Einschränkungen anzuwenden, oder space-getrennte Tokens, 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 zum Herunterladen einer Datei führt. Dies funktioniert unabhängig davon, ob der Benutzer auf den Link geklickt hat oder ob der JS-Code ohne Benutzerinteraktion ausgelöst wurde.

allow-forms

Erlaubt der Seite das Absenden von Formularen. Wenn dieses Schlüsselwort nicht verwendet wird, wird ein Formular normal angezeigt, aber das Senden löst keine Eingabevalidierung aus, sendet keine Daten an einen Webserver oder schließt einen Dialog.

allow-modals

Erlaubt der Seite das Öffnen modaler Fenster 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 auch der Seite, das BeforeUnloadEvent Ereignis zu empfangen.

allow-orientation-lock

Lässt die Ressource die Bildschirmorientierung 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, schlägt die Funktionalität stillschweigend fehl.

allow-popups-to-escape-sandbox

Erlaubt einem sandboxed Dokument das Öffnen eines neuen Browsing-Kontextes, ohne die Sandbox-Flags darauf zu erzwingen. Dies erlaubt es beispielsweise, eine Drittanbieterwerbung sicher zu sandboxen, ohne dieselben Einschränkungen auf die Seite anzuwenden, auf die die Anzeige verweist. Wenn diese Flagge nicht enthalten ist, unterliegt eine weitergeleitete Seite, ein Popup-Fenster oder ein neuer Tab denselben Sandbox-Einschränkungen wie das ursprüngliche <iframe>.

allow-presentation

Erlaubt Embedders zu kontrollieren, ob ein iframe eine Präsentationssitzung starten kann.

allow-same-origin

Wenn dieses Token nicht verwendet wird, wird die Ressource als von einem speziellen Ursprung behandelt, der immer die Same-Origin-Policy nicht besteht (was möglicherweise 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 Popup-Fenstern). Wenn dieses Schlüsselwort nicht verwendet wird, ist diese Operation nicht erlaubt.

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

Erlaubt einem Dokument, das im <iframe> geladen ist, die Storage Access API zu verwenden, um Zugriff auf unpartitionierte Cookies anzufordern.

allow-top-navigation

Lässt die Ressource den obersten Browsing-Kontext (denjenigen, der _top heißt) navigieren.

allow-top-navigation-by-user-activation

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

allow-top-navigation-to-custom-protocols

Erlaubt Navigierungen zu nicht-http Protokollen, die in Browser eingebaut oder von einer Website registriert sind. Diese Funktion wird auch durch das Schlüsselwort allow-popups oder allow-top-navigation aktiviert.

Hinweis:

• Wenn das eingebettete Dokument denselben Ursprung wie die einbettende Seite hat, ist es stark abzuraten, sowohl allow-scripts als auch allow-same-origin zu verwenden, da dies dem eingebetteten Dokument erlaubt, das sandbox-Attribut zu entfernen — was es nicht sicherer macht, als das sandbox-Attribut überhaupt nicht zu benutzen.
• Sandboxen ist nutzlos, wenn der Angreifer Inhalte außerhalb eines sandboxed iframe anzeigen kann — zum Beispiel, wenn der Betrachter das Frame in einem neuen Tab öffnet. Solche Inhalte sollten auch von einem separaten Ursprung bereitgestellt werden, um möglichen Schaden zu begrenzen.

Hinweis: Wenn Sie den Benutzer weiterleiten, ein Popup-Fenster öffnen oder einen neuen Tab von einer eingebetteten Seite innerhalb eines <iframe> mit dem sandbox-Attribut öffnen, unterliegt der neue Browsing-Kontext denselben sandbox-Einschränkungen. Dies kann Probleme verursachen – zum Beispiel, wenn eine Seite, die innerhalb eines <iframe> eingebettet ist, ohne die sandbox="allow-forms" oder sandbox="allow-popups-to-escape-sandbox" Attribut eingestellt, eine neue Seite in einem separaten Tab öffnet, schlägt die Formularübermittlung in diesen neuen Browsing-Kontext stillschweigend fehl.

src

Die URL der einzubettenden Seite. Verwenden Sie den Wert about:blank, um eine leere Seite einzubetten, die der Same-Origin-Policy entspricht. Beachten Sie auch, dass das programmatische Entfernen eines <iframe>'s src Attributs (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 von relativen URLs, wie Ankerlinks.

srcdoc

Inline-HTML zum Einbetten, das das src-Attribut überschreibt. Sein Inhalt sollte der Syntax eines vollständigen HTML-Dokuments folgen, das die Doctype-Direktive, <html>, <body> Tags usw. enthält, obwohl die meisten von ihnen weggelassen werden können, und nur der Inhalt des Körpers verbleibt. Dieses Dokument hat about:srcdoc als seinen Standort. Wenn ein Browser das srcdoc-Attribut nicht unterstützt, wird auf die URL im src-Attribut zurückgegriffen.

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

width

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

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

align Veraltet

Die Ausrichtung dieses Elements in Bezug auf den umgebenden Kontext.

frameborder Veraltet

Der Wert 1 (der Standardwert) 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 weit verbreiteten Missbrauchs ist dies für nicht-visuelle Browser nicht hilfreich.

marginheight Veraltet

Die Menge an Platz in Pixeln zwischen dem Inhalt des Frames und seinen oberen und unteren Rändern.

marginwidth Veraltet

Die Menge an Platz in Pixeln zwischen dem Inhalt des Frames und seinen linken und rechten Rändern.

scrolling Veraltet

Gibt an, wann der Browser einen Scrollbalken für den Frame bereitstellen soll:

auto

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

yes

Immer einen Scrollbalken anzeigen.

no

Niemals einen Scrollbalken anzeigen.

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

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

Von innerhalb eines Frames kann ein Skript mit window.parent eine Referenz auf sein übergeordnetes Fenster 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 Frame zugreifen. Cross-Origin-Kommunikation kann über Window.postMessage() erreicht werden.

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

Die error- und load-Ereignisse, die bei <iframe>s ausgelöst werden, könnten verwendet werden, um den URL-Bereich der HTTP-Server im lokalen Netzwerk zu untersuchen. Aus Sicherheitsgründen lösen Benutzeragenten daher nicht das error-Ereignis bei <iframe>s aus, und das load-Ereignis wird immer ausgelöst, auch wenn der Inhalt des <iframe> nicht geladen werden kann.

Personen, die mit unterstützender Technologie wie einem Bildschirmleser navigieren, können das title Attribute in einem <iframe> verwenden, um dessen Inhalt zu beschriften. Der Wert des Titles sollte den eingebetteten Inhalt 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 zu bestimmen, was der eingebettete Inhalt ist. Dieser Kontextwechsel kann verwirrend und zeitaufwendig sein, insbesondere für Seiten mit mehreren <iframe>s und/oder wenn die Einbettungen interaktiven Inhalt wie Video oder Audio enthalten.

Dieses Beispiel bettet die Seite unter https://example.org in einem iframe ein. Dies ist ein häufiger Anwendungsfall von iframes: um Inhalte von einer anderen Seite einzubetten. Zum Beispiel ist 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 Quellcode direkt in einem iframe. Dies kann als Technik verwendet werden, um Script-Injection beim Anzeigen von benutzergeneriertem Inhalt zu verhindern, wenn es mit dem sandbox-Attribut kombiniert wird.

Beachten Sie, dass beim Verwenden von srcdoc jede relative URL im eingebetteten Inhalt relativ zur URL der einbettenden Seite aufgelöst wird. Wenn Sie Ankerlinks verwenden möchten, die auf Stellen im eingebetteten Inhalt verweisen, müssen Sie about:srcdoc explizit 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 beim Verwenden von srcdoc:

• Schreiben Sie zuerst das HTML aus und entkommen Sie allem, was Sie in einem normalen HTML-Dokument entkommen würden (z.B. <, >, &, etc.).
• < und < repräsentieren dasselbe Zeichen im srcdoc-Attribut. Um es als tatsächliche Escape-Sequenz im HTML-Dokument zu machen, ersetzen Sie jedes Ampersand (&) durch &. Zum Beispiel wird < zu <, und & wird zu &.
• Ersetzen Sie alle doppelten Anführungszeichen (") durch ", um zu verhindern, dass das srcdoc-Attribut vorzeitig beendet wird (wenn Sie ' verwenden, dann sollten Sie ' durch ' ersetzen). Dieser Schritt erfolgt nach dem vorherigen, so dass ", das in diesem Schritt erzeugt wird, nicht zu " wird.

Ergebnis

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