<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, das durch das Window Objekt dargestellt wird.

Dieses Element enthält die globalen Attribute.

allow

Spezifiziert eine Permissions Policy für das <iframe>. Die Richtlinie definiert, welche Funktionen für das <iframe> verfügbar sind (zum Beispiel Zugriff auf das Mikrofon, die Kamera, die Batterie, Web-Sharing, etc.) basierend auf der Herkunft der Anfrage.

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

Hinweis: Eine durch das allow Attribut festgelegte Permissions Policy implementiert eine zusätzliche Einschränkung zusätzlich zu der in der Permissions-Policy Header spezifizierten Richtlinie. Sie ersetzt diese nicht.

allowfullscreen

Setzen Sie diesen Wert auf true, wenn das <iframe> den Vollbildmodus durch Aufrufen der requestFullscreen() Methode aktivieren kann.

Hinweis: Dieses Attribut gilt als veraltetes Attribut und wird als allow="fullscreen" neu definiert.

allowpaymentrequest Veraltet Nicht standardisiert

Setzen Sie diesen Wert auf true, wenn ein Cross-Origin-<iframe> die Payment Request API aufrufen darf.

Hinweis: Dieses Attribut gilt als veraltetes Attribut und wird als allow="payment" neu definiert.

browsingtopics Experimentell Nicht standardisiert

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

credentialless Experimentell

Setzen Sie diesen Wert auf true, um das <iframe> ohne Zugangsdaten zu machen, was bedeutet, dass sein Inhalt in einem neuen, flüchtigen Kontext geladen wird. Es hat keinen Zugriff auf das Netzwerk, Cookies und Speicherdaten, die mit seinem Ursprung verbunden sind. Es verwendet einen neuen lokalen Kontext für die Lebensdauer des obersten Dokuments. Dafür können die Cross-Origin-Embedder-Policy (COEP)-Einbettungsregeln aufgehoben werden, sodass Dokumente mit gesetztem COEP Drittanbieterdokumente einbetten können, die diese nicht haben. 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

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

lazy

Verzögern Sie das Laden des iframes, bis es eine berechnete Entfernung vom visuellen Viewport erreicht, wie vom Browser definiert. Ziel ist es, die Nutzung von Netzwerk- und Speicherbandbreite zu vermeiden, die erforderlich ist, um den Frame abzurufen, solange der Browser sich nicht sicher ist, dass er benötigt wird. Dies verbessert die Leistung und die Kosten in den meisten typischen Anwendungsszenarien, insbesondere indem die anfänglichen Ladezeiten der Seite verkürzt werden.

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

name

Ein ansteuerbarer 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, welchen Referrer gesendet werden soll, wenn die Ressource des Frames abgerufen wird:

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 referenzierenden Seite beschränkt: deren Schema, Host und Port.

origin-when-cross-origin

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

same-origin

Ein Referrer wird für den gleichen Ursprung gesendet, aber bei Anfragen über Herkunftsgrenzen wird keine Referrer-Information enthalten sein.

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 Anfrage im selben Ursprung durchgefü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 das Fragment, Passwort oder Benutzername). Dieser Wert ist unsicher, weil er Ursprünge und Pfade von TLS-geschützten Ressourcen an unsichere Ursprünge weitergibt.

sandbox

Kontrolliert die Einschränkungen, die auf den Inhalt angewendet werden, der im <iframe> eingebettet ist. Der Wert des Attributs kann entweder leer sein, um alle Einschränkungen anzuwenden, oder leerezeichengetrennte Tokens enthalten, um bestimmte Einschränkungen aufzuheben:

allow-downloads

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

allow-forms

Ermöglicht der Seite, Formulare zu übermitteln. Wenn dieses Schlüsselwort nicht verwendet wird, wird ein Formular normal angezeigt, aber seine Übermittlung löst keine Eingabevalidierung aus, sendet keine Daten an einen Webserver oder schließt keinen Dialog.

allow-modals

Ermöglicht der Seite, modale Fenster durch Window.alert(), Window.confirm(), Window.print() und Window.prompt() zu öffnen, 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

Erlaubt der Ressource den Bildschirm zu sperren.

allow-pointer-lock

Ermöglicht der Seite die Verwendung der Pointer Lock API.

allow-popups

Ermöglicht Pop-ups (wie von Window.open(), target="_blank", Window.showModalDialog()). Wenn dieses Schlüsselwort nicht verwendet wird, schlägt diese Funktionalität stillschweigend fehl.

allow-popups-to-escape-sandbox

Erlaubt einem sandboxed Dokument, einen neuen Browsing-Kontext zu öffnen, ohne die Sandboxing-Flags darauf anzuwenden. Dies ermöglicht beispielsweise, dass eine Drittanbieter-Anzeige sicher gesandboxed wird, ohne die gleichen Einschränkungen auf die Seite anzuwenden, auf die die Anzeige verlinkt. Wenn dieses Flag nicht enthalten ist, wird eine umgeleitete Seite, ein Popup-Fenster oder ein neuer Tab denselben Sandbox-Einschränkungen wie das ursprüngliche <iframe> unterliegen.

allow-presentation

Ermöglicht Einbettungen, 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 die same-origin policy immer scheitern lässt (potenziell verhindert, dass auf Datenspeicherung/Cookies und einige JavaScript-APIs zugegriffen wird).

allow-scripts

Ermöglicht 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

Ermöglicht der Ressource, den top-level Browsing-Kontext (diejenige namens _top) zu navigieren.

allow-top-navigation-by-user-activation

Ermöglicht der Ressource, den top-level Browsing-Kontext zu navigieren, jedoch nur, wenn dies durch eine Benutzeraktion initiiert wird.

allow-top-navigation-to-custom-protocols

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

Hinweis:

• Wenn das eingebettete Dokument denselben Ursprung wie die einbettende Seite hat, wird dringend davon abgeraten, 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 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: Beim Weiterleiten des Benutzers, beim Öffnen eines Popup-Fensters oder beim Öffnen eines neuen Tabs von einer eingebetteten Seite innerhalb eines <iframe> mit dem sandbox Attribut unterliegt der neue Browsing-Kontext den gleichen sandbox Einschränkungen. Dies kann Probleme verursachen — zum Beispiel, wenn eine Seite, die innerhalb eines <iframe> ohne ein sandbox="allow-forms" oder sandbox="allow-popups-to-escape-sandbox" Attribut gesetzt darauf eingebettet ist, eine neue Website in einem separaten Tab öffnet, wird die Formularübermittlung in diesem neuen Browsing-Kontext stillschweigend fehlschlagen.

src

Die URL der Seite, die eingebettet werden soll. 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 eines src-Attributs von einem <iframe> (z.B. über Element.removeAttribute()) bewirkt, dass about:blank im 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 ihre Basis-URL, um relative URLs, wie z.B. Ankerlinks, aufzulösen.

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, etc. umfasst, obwohl die meisten davon weggelassen werden können, so dass nur der Körperinhalt verbleibt. Dieses Dokument hat about:srcdoc als seine Position. 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 ihre Basis-URL, um relative URLs, wie z.B. Ankerlinks, aufzulösen.

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 neuem Inhalt verwenden und versuchen, sie aus bestehendem Inhalt zu entfernen.

align Veraltet

Die Ausrichtung dieses Elements in Bezug auf den umgebenden Kontext.

frameborder Veraltet

Der Wert 1 (der Standard) zeichnet einen Rahmen um dieses Frame. Der Wert 0 entfernt den Rahmen um dieses Frame, jedoch sollten Sie stattdessen die CSS-Eigenschaft border verwenden, um die Rahmen eines <iframe> 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

Der Abstand in Pixeln zwischen dem Inhalt des Frames und seinen oberen und unteren Rahmen.

marginwidth Veraltet

Der Abstand in Pixeln zwischen dem Inhalt des Frames und seinen linken und rechten Rahmen.

scrolling Veraltet

Gibt an, wann der Browser einen Scrollbalken für das 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 HTMLIFrameElement Objekt können Skripte über die contentWindow Eigenschaft auf das window Objekt der eingebetteten Ressource zugreifen. Die contentDocument Eigenschaft bezieht sich auf das document innerhalb des <iframe>, genauso wie contentWindow.document.

Von innerhalb eines Frames kann ein Skript eine Referenz auf sein Elternfenster mit window.parent erhalten.

Der Skriptzugriff auf den Inhalt eines Frames unterliegt der same-origin policy. Skripte können nicht auf die meisten Eigenschaften in anderen window Objekten zugreifen, wenn das Skript von einem anderen Ursprung geladen wurde, einschließlich Skripte innerhalb eines Frames, die auf das Elternframe zugreifen. Eine Kommunikation über Ursprungsgrenzen hinweg kann mit Window.postMessage() erreicht werden.

Da es sich um ein ersetztes Element handelt, ermöglicht das <iframe> die Positionierung des eingebauten Dokuments innerhalb seines Kastens mit der object-position Eigenschaft anzupassen.

Die error und load Ereignisse, die auf <iframe>s ausgelöst werden, könnten verwendet werden, um den URL-Raum der HTTP-Server des lokalen Netzwerks zu untersuchen. Deshalb, als Sicherheitsvorkehrung, feuern Benutzeragenten nicht das error Ereignis auf <iframe>s ab, und das load Ereignis wird immer ausgelöst, selbst wenn der <iframe> Inhalt fehlschlägt zu laden.

Menschen, die mit unterstützender Technologie wie einem Screenreader navigieren, können das title Attribut auf einem <iframe> verwenden, um seinen Inhalt zu kennzeichnen. Der Wert des Titels sollte den eingebetteten Inhalt knapp 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 sein eingebetteter Inhalt ist. Dieser Kontextwechsel kann verwirrend und zeitraubend sein, insbesondere für Seiten mit mehreren <iframe>s und/oder wenn die Einbettungen interaktive Inhalte wie Video oder Audio enthalten.

Dieses Beispiel bettet die Seite von https://example.org in einem iframe ein. Dies ist ein häufiger Anwendungsfall von iframes: Inhalte von einer anderen Seite einzubetten. Zum Beispiel sind das Live-Beispiel selbst und das try it Beispiel oben beide <iframe>-Einbettungen von Inhalten 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 beim Anzeigen benutzererstellter Inhalte zu verhindern, wenn in Kombination mit dem sandbox Attribut verwendet.

Beachten Sie, dass beim Verwenden 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 zeigen, müssen Sie ausdrücklich 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>

Hier erfahren Sie, wie Sie Escape-Sequenzen beim Verwenden von srcdoc schreiben:

• Erstens, schreiben Sie das HTML aus, wobei Sie alles escapen, was Sie in einem normalen HTML-Dokument escapen würden (wie <, >, &, 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 aus < <, und aus & wird &.
• Ersetzen Sie alle doppelten 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 generiert wird, nicht zu " wird.

Ergebnis

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