<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 ermöglicht 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 beinhaltet die globalen Attribute.

allow

Definiert eine Berechtigungsrichtlinie 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-Sharing usw.).

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

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

allowfullscreen

Setzen Sie auf true, wenn das <iframe> den Vollbildmodus durch Aufruf 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 auf true, wenn ein Cross-Origin-<iframe> berechtigt sein soll, die Payment Request API auszulösen.

Hinweis: Dieses Attribut gilt als veraltetes Attribut und wird 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 zur <iframe>-Quelle gesendet werden sollen. Siehe Using the Topics API für mehr Details.

credentialless Experimentell

Setzen Sie auf true, um das <iframe> als credentialless zu machen, was bedeutet, dass sein Inhalt in einem neuen, temporären Kontext geladen wird. Es hat keinen Zugriff auf das Netzwerk, Cookies und Speicherdaten, die mit seinem Ursprungsort assoziiert sind. Es verwendet einen neuen Kontext, der an die Lebensdauer des obersten Dokuments gebunden ist. Im Gegenzug können die Einbettungsregeln der Cross-Origin-Embedder-Policy (COEP) aufgehoben werden, sodass Dokumente mit gesetztem COEP Drittanbieterdokumente einbetten können, die dies nicht haben. Siehe IFrame credentialless für mehr 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 Laden der Seite (dies ist der Standardwert).

lazy

Verzögern Sie das Laden des iframes, bis es eine berechnete Entfernung vom visuellen Viewport erreicht hat, wie vom Browser definiert. Ziel ist es, den Netzwerk- und Speicherbandbreitenverbrauch zu vermeiden, der zum Abrufen des Frames erforderlich ist, 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 indem die initialen Ladezeiten der Seite reduziert werden.

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

name

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

referrerpolicy

Gibt an, welchen Referrer zu senden ist, 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 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. Navigationen auf demselben Ursprung beinhalten jedoch weiterhin den Pfad.

same-origin

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

strict-origin

Sendet nur den Ursprung des Dokuments als Referrer, wenn das Sicherheitsniveau des Protokolls gleich bleibt (HTTPS→HTTPS), sendet ihn jedoch nicht an ein weniger sicheres Ziel (HTTPS→HTTP).

strict-origin-when-cross-origin (Standardwert)

Sendet eine vollständige URL bei einer Anfrage zum gleichen Ursprung, sendet jedoch nur den Ursprung, wenn das Sicherheitsniveau des Protokolls gleich bleibt (HTTPS→HTTPS), und sendet keinen Header an ein weniger sicheres Ziel (HTTPS→HTTP).

unsafe-url

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

sandbox

Kontrolliert 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 durch 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 JS-Code es ohne Nutzerinteraktion ausgelöst hat.

allow-forms

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

allow-modals

Ermöglicht es der Seite, modale Fenster zu öffnen durch Window.alert(), Window.confirm(), Window.print() und Window.prompt(), während das Öffnen eines <dialog> erlaubt ist, unabhängig von diesem Schlüsselwort. Es erlaubt auch der Seite, BeforeUnloadEvent-Ereignisse zu empfangen.

allow-orientation-lock

Ermöglicht es der Ressource, die Bildschirmorientierung zu sperren.

allow-pointer-lock

Ermöglicht der Seite, die Pointer Lock API zu verwenden.

allow-popups

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

allow-popups-to-escape-sandbox

Ermöglicht einem eingebetteten Dokument, einen neuen Browsing-Kontext zu öffnen, ohne die Sandboxing-Flags darauf anzuwenden. Dies erlaubt es zum Beispiel, eine Drittanbieteranzeige sicher zu sandboxen, ohne die gleichen Einschränkungen auf die Seite aufzuerlegen, auf die die Anzeige verweist. Wenn dieses Flag nicht enthalten ist, wird eine umgeleitete Seite, ein Popup-Fenster oder ein neuer Tab den gleichen Sandbox-Beschränkungen unterworfen wie das ursprüngliche <iframe>.

allow-presentation

Ermöglicht es Embedders zu kontrollieren, 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 behandelt, der immer die Same-Origin-Policy fehlschlägt (was möglicherweise den Zugriff auf Datenspeicherung/Cookies und einige JavaScript-APIs verhindert).

allow-scripts

Ermöglicht es der Seite, Skripte auszuführen (aber keine Popupfenster zu erstellen). Wenn dieses Schlüsselwort nicht verwendet wird, ist diese Operation nicht zulässig.

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

Ermöglicht einem Dokument, das in das <iframe> geladen wird, die Storage Access API zu verwenden, um Zugang zu nicht partitionierten Cookies anzufordern.

allow-top-navigation

Lässt die Ressource den obersten Browsing-Kontext (den als _top bezeichneten) navigieren.

allow-top-navigation-by-user-activation

Lässt die Ressource den obersten Browsing-Kontext navigieren, aber nur, wenn sie durch ein Benutzerinteraktion initiiert wird.

allow-top-navigation-to-custom-protocols

Ermöglicht Navigationen zu nicht-http-Protokollen, die in den Browser integriert 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 es stark entmutigt, sowohl allow-scripts als auch allow-same-origin zu verwenden, da dies das eingebettete Dokument das sandbox-Attribut entfernen lässt — wodurch es nicht sicherer ist, 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 den Frame in einem neuen Tab öffnet. Solche Inhalte sollten auch von einem separaten Ursprung bereitgestellt werden, um potenziellen Schaden zu begrenzen.

Hinweis: Wenn der Benutzer umgeleitet wird, ein Popup-Fenster geöffnet oder ein neuer Tab von einer eingebetteten Seite innerhalb eines <iframe> mit dem Attribut sandbox geöffnet wird, ist der neue Browsing-Kontext den gleichen sandbox-Einschränkungen unterworfen. Dies kann zu Problemen führen — zum Beispiel, wenn eine in ein <iframe> eingebettete Seite, die kein Attribut sandbox="allow-forms" oder sandbox="allow-popups-to-escape-sandbox" aufweist, eine neue Seite in einem separaten Tab öffnet, wird das Absenden von Formularen in diesem neuen Browsing-Kontext stillschweigend fehlschlagen.

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>-src-Attributs (z.B. über Element.removeAttribute()) dazu führt, dass in Firefox (ab Version 65), auf Chromium-basierten Browsern und Safari/iOS about:blank im Frame geladen wird.

Hinweis: Die about:blank-Seite verwendet die URL des einbettenden Dokuments als Basis-URL, wenn relative URLs aufgelöst werden, wie z.B. 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, die <html>, <body>-Tags usw. umfasst, obwohl die meisten davon weggelassen werden können, sodass nur der Body-Content bleibt. Dieses Dokument wird about:srcdoc als Standort haben. Wenn ein Browser das srcdoc-Attribut nicht unterstützt, wird es auf die URL im src-Attribut zurückgreifen.

Hinweis: Die about:srcdoc-Seite verwendet die URL des einbettenden Dokuments als Basis-URL, wenn relative URLs wie Ankerlinks aufgelöst werden.

width

Die Breite des Frames 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 in Bezug auf den umgebenden Kontext.

frameborder Veraltet

Der Wert 1 (Standardwert) zeichnet einen Rahmen um diesen Frame. Der Wert 0 entfernt den Rahmen um diesen Frame, jedoch sollten Sie 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

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

marginwidth Veraltet

Der Abstand in Pixeln zwischen dem Inhalt des Frames und seinen 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 als seine Abmessungen ist.

yes

Immer eine Bildlaufleiste anzeigen.

no

Niemals eine Bildlaufleiste anzeigen.

Inline-Frames, wie <frame>-Elemente, sind im Pseudofeld window.frames 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 innerhalb eines Frames kann ein Skript mit window.parent auf sein übergeordnetes Fenster verweisen.

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 Skripten innerhalb eines Frames, die auf das übergeordnete Frame zugreifen. Cross-Origin-Kommunikation kann mit Window.postMessage() erreicht werden.

Als ersetztes Element ermöglicht das <iframe> die Anpassung der Position des eingebetteten Dokuments innerhalb seiner Box durch die object-position-Eigenschaft.

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

Personen, die mit Hilfstechnologien wie einem Screenreader navigieren, können das title-Attribut auf einem <iframe> verwenden, um dessen Inhalt zu kennzeichnen. Der Wert des Titels sollte den eingebetteten Inhalt kurz 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 dessen eingebetteter Inhalt ist. Diese Kontextänderung kann verwirrend und zeitaufwändig sein, insbesondere für Seiten mit mehreren <iframe>s und/oder wenn 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äufiges Anwendungsfall für iframes: das Einbetten von Inhalten von einer anderen Seite. Zum Beispiel ist das Live-Sample 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 Skript-Injection zu verhindern, wenn nutzergenerierte Inhalte angezeigt werden sollen, in Kombination mit dem sandbox-Attribut.

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 verweisen, 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 bei Verwendung von srcdoc schreiben:

• Schreiben Sie zuerst das HTML aus, indem Sie alles escapen, was Sie in einem normalen HTML-Dokument escapen würden (wie <, >, & usw.).
• < und < repräsentieren im srcdoc-Attribut das gleiche Zeichen. Um es zu einer tatsächlichen Escape-Sequenz im HTML-Dokument zu machen, ersetzen Sie jedes kaufmännische Und-Zeichen (&) durch &. Zum Beispiel wird < zu <, und & wird zu &.
• Ersetzen Sie jedes Anführungszeichen (") durch ", um zu verhindern, dass das srcdoc-Attribut vorzeitig abgeschlossen wird (wenn Sie ' verwenden, ersetzen Sie ' durch ' anstelle von dieser). Dieser Schritt erfolgt nach dem vorherigen, sodass ", das in diesem Schritt generiert wird, nicht zu " wird.

Ergebnis

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