<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-Kontexts werden in die Sitzungshistorie des obersten Browsing-Kontexts linearisiert. Der Browsing-Kontext, der die anderen einbettet, wird als übergeordneter Browsing-Kontext bezeichnet. Der oberste Browsing-Kontext – derjenige ohne übergeordneten Kontext – ist normalerweise das Browserfenster, dargestellt durch das Window-Objekt.

Dieses Element enthält die globalen Attribute.

allow

Gibt eine Berechtigungsrichtlinie für das <iframe> an. Die Richtlinie definiert, welche Funktionen dem <iframe> (z.B. Zugriff auf Mikrofon, Kamera, Batterie, Web-Sharing, etc.) basierend auf dem Ursprung der Anfrage zur Verfügung stehen.

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

Hinweis: Eine durch das allow-Attribut spezifizierte Berechtigungsrichtlinie stellt eine weitere Einschränkung oberhalb der Richtlinie dar, die im Permissions-Policy-Header spezifiziert wird. Es ersetzt sie nicht.

allowfullscreen

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

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

allowpaymentrequest Veraltet Nicht standardisiert

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

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

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 die <iframe>-Quelle gesendet werden sollten. Siehe Using the Topics API für weitere Details.

credentialless Experimentell

Auf true setzen, um das <iframe> ohne Anmeldeinformationen zu machen, was bedeutet, dass sein Inhalt in einem neuen, flüchtigen Kontext geladen wird. Es hat keinen Zugriff auf das Netzwerk, Cookies und gespeicherte Daten, die mit seinem Ursprung verbunden sind. Es verwendet einen neuen Kontext, der lokal zur Lebensdauer des obersten Dokuments ist. Im Gegenzug können die Einbettungsregeln der Cross-Origin-Embedder-Policy (COEP) gelockert werden, sodass Dokumente mit eingestelltem COEP Drittanbieterdokumente einbetten 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 Rahmens in CSS-Pixeln. Standard ist 150.

loading

Gibt an, wann der Browser das iframe laden soll:

eager

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

lazy

Verschieben Sie das Laden des iframes, bis es eine berechnete Entfernung vom visuellen Ansichtsfenster erreicht, wie vom Browser definiert. Der Zweck besteht darin, die erforderliche Netzwerk- und Speicherbandbreite zum Abrufen des Rahmens zu vermeiden, bis der Browser angemessen sicher ist, dass er benötigt wird. Dies verbessert die Leistung und Kosten in den meisten typischen Anwendungsfällen, insbesondere durch die Verkürzung 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; im formtarget-Attribut der <input> oder <button>-Elemente; oder im windowName-Parameter in der Methode window.open() verwendet werden. Außerdem wird der Name zu einer Eigenschaft der Window und Document-Objekte und enthält einen Verweis auf das eingebettete Fenster oder das Element selbst.

referrerpolicy

Gibt an, welcher Referrer gesendet werden soll, wenn die Ressource des Rahmens abgerufen wird:

no-referrer

Der Referer-Header wird nicht gesendet.

no-referrer-when-downgrade

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

origin

Der gesendete Referrer wird auf den Ursprung der verweisenden Seite beschränkt: ihr 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 auf demselben Ursprung enthalten weiterhin den Pfad.

same-origin

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

strict-origin

Senden Sie nur den Ursprung des Dokuments als Referrer, wenn das Sicherheitsniveau des Protokolls gleich bleibt (HTTPS→HTTPS), senden Sie ihn jedoch nicht an eine weniger sichere Zieladresse (HTTPS→HTTP).

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

Senden Sie eine vollständige URL, wenn Sie eine Anfrage aus demselben Ursprung ausführen, senden Sie nur den Ursprung, wenn das Sicherheitsniveau des Protokolls gleich bleibt (HTTPS→HTTPS), und senden Sie keinen Header an eine weniger sichere Zieladresse (HTTPS→HTTP).

unsafe-url

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

sandbox

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

allow-downloads

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

allow-forms

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

allow-modals

Ermöglicht 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 ermöglicht auch der Seite den Empfang des BeforeUnloadEvent.

allow-orientation-lock

Ermöglicht der Ressource das Sperren der Bildschirmorientierung.

allow-pointer-lock

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

allow-popups

Ermöglicht Popups (erstellt zum Beispiel durch Window.open() oder target="_blank"). Wenn dieses Schlüsselwort nicht verwendet wird, schlägt diese Funktionalität stillschweigend fehl.

allow-popups-to-escape-sandbox

Ermöglicht einem eingebetteten Dokument das Öffnen eines neuen Browsing-Kontexts, ohne dass die Sandboxing-Flags darauf angewendet werden. Dies ermöglicht es beispielsweise, eine Drittanbieteranzeige sicher zu sandboxen, ohne die gleichen Einschränkungen auf die Seite anzuwenden, auf die die Anzeige verlinkt. Wenn diese Flagge nicht enthalten ist, unterliegt eine umgeleitete Seite, ein Popup-Fenster oder ein neuer Tab denselben Sandbox-Einschränkungen wie das ursprüngliche <iframe>.

allow-presentation

Ermöglicht Einbettenden zu steuern, 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 stammend behandelt, der immer die same-origin policy (möglicherweise verhindert den Zugriff auf Datenspeicherung/Cookies und einige JavaScript-APIs) nicht besteht.

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 es einem Dokument, das im <iframe> geladen wird, die Storage Access API zu verwenden, um Zugriff auf unpartitionierte Cookies anzufordern.

allow-top-navigation

Ermöglicht der Ressource die Navigation des obersten Browsing-Kontexts (desjenigen, der _top genannt wird).

allow-top-navigation-by-user-activation

Ermöglicht der Ressource die Navigation des obersten Browsing-Kontexts, jedoch nur, wenn dies durch eine Benutzeraktion initiiert wird.

allow-top-navigation-to-custom-protocols

Erlaubt die Navigation zu nicht-http-Protokollen, die im Browser eingebaut oder von einer Website registriert wurden. 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, wird dringend davon abgeraten, sowohl allow-scripts als auch allow-same-origin zu verwenden, da dies es 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 — wie wenn der Betrachter den Rahmen in einem neuen Tab öffnet. Solche Inhalte sollten auch von einem separaten Ursprung bereitgestellt werden, um potenzielle Schäden zu begrenzen.

Hinweis: Beim Weiterleiten des Benutzers, Öffnen eines Popup-Fensters oder Öffnen eines neuen Tabs von einer eingebetteten Seite innerhalb eines <iframe> mit dem sandbox-Attribut unterliegt der neue Browsing-Kontext denselben sandbox-Einschränkungen. Dies kann Probleme verursachen — beispielsweise, wenn eine Seite, die innerhalb eines <iframe> ohne ein gesetztes sandbox="allow-forms"- oder sandbox="allow-popups-to-escape-sandbox"-Attribut eingebettet ist, eine neue Website in einem separaten Tab öffnet, schlägt das Absenden von Formularen in diesem neuen Browsing-Kontext stillschweigend fehl.

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 des src-Attributs eines <iframe> (z.B. über Element.removeAttribute()) dazu führt, dass about:blank in den Rahmen 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. Der Inhalt sollte der Syntax eines vollständigen HTML-Dokuments folgen, das die Doctype-Direktive, <html>, <body>-Tags usw. umfasst, obwohl die meisten von ihnen weggelassen werden können, sodass nur der Inhalt des Hauptteils verbleibt. Dieses Dokument hat about:srcdoc als seinen Standort. 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 von relativen URLs, wie 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 in neuen Inhalten nicht 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 (Standard) zeichnet einen Rahmen um diesen Rahmen. Der Wert 0 entfernt den Rahmen um diesen Rahmen, aber Sie sollten stattdessen die CSS-Eigenschaft border verwenden, um <iframe>-Rahmen zu steuern.

longdesc Veraltet

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

marginheight Veraltet

Der Abstand in Pixeln zwischen dem Inhalt des Rahmens und seinen oberen und unteren Rändern.

marginwidth Veraltet

Der Abstand in Pixeln zwischen dem Inhalt des Rahmens und seinen linken und rechten Rändern.

scrolling Veraltet

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

auto

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

yes

Immer eine Bildlaufleiste anzeigen.

no

Nie eine Bildlaufleiste anzeigen.

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

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

Von innen eines Rahmens kann ein Skript mit window.parent auf das übergeordnete Fenster zugreifen.

Der Skriptzugriff auf den Inhalt eines Rahmens 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 Skripte innerhalb eines Rahmens, die auf das übergeordnete Fenster zugreifen. Querverkommunkation kann durch die Verwendung von Window.postMessage() erreicht werden.

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

Die error- und load-Events, die auf <iframe>s ausgelöst werden, könnten verwendet werden, um den URL-Bereich der lokalen Netzwerke von HTTP-Servern zu untersuchen. Daher lösen Benutzeragenten aus Sicherheitsgründen das error-Event auf <iframe>s nicht aus, und das load-Event wird immer ausgelöst, auch wenn der <iframe>-Inhalt nicht geladen werden kann.

Personen, die mit unterstützenden Technologien wie Bildschirmlesegeräten navigieren, können das title-Attribut eines <iframe> verwenden, um dessen Inhalt zu kennzeichnen. Der Wert des Titels 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 festzustellen, was der eingebettete Inhalt ist. Dieser Kontextwechsel kann verwirrend und zeitaufwändig sein, insbesondere für Seiten mit mehreren <iframe>s und/oder wenn Einbindungen interaktive Inhalte wie Video oder Audio enthalten.

Dieses Beispiel bettet die Seite unter https://example.org in ein iframe ein. Dies ist ein häufiger Anwendungsfall von iframes: um Inhalte von einer anderen Seite einzubetten. Zum Beispiel sind das Live-Beispiel selbst und das Try it-Beispiel oben beide <iframe>-Einbindungen von Inhalt 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 angezeigter Benutzergenerierter Inhalt verwendet wird, insbesondere in Kombination mit dem sandbox-Attribut.

Beachten Sie, dass bei der 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 heraus und escapen Sie alles, was Sie in einem normalen HTML-Dokument escapen würden (wie <, >, &, usw.).
• < und < stellen dasselbe Zeichen im srcdoc-Attribut dar. Daher ersetzen Sie, um daraus eine echte Escape-Sequenz im HTML-Dokument zu machen, alle Et-Zeichen (&) 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 erzeugt wird, nicht zu " wird.

Ergebnis

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