<iframe> HTML-Einbettungselement

Probieren Sie es aus

<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 Eltern-Browsing-Kontext bezeichnet. Der oberste Browsing-Kontext — der ohne Elternkontext — ist normalerweise das Browserfenster, dargestellt durch das Window-Objekt.

Attribute

Dieses Element enthält die globalen Attribute.

allow

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

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

Hinweis: Eine durch das allow-Attribut angegebene Berechtigungsrichtlinie stellt eine zusätzliche Einschränkung über die im Permissions-Policy-Header angegebene Richtlinie dar. Es ersetzt sie nicht.

allowfullscreen

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

Hinweis: Dieses Attribut wird als veraltetes Attribut betrachtet und mit allow="fullscreen *" neu definiert.

allowpaymentrequest

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

Hinweis: Dieses Attribut wird als veraltetes Attribut betrachtet und mit allow="payment *" neu definiert.

browsingtopics

Ein boolesches Attribut, das, falls vorhanden, angibt, dass die ausgewählten Themen für den aktuellen Benutzer mit der Anforderung für die Quelle des <iframe> gesendet werden sollen.

credentialless

Auf true gesetzt, 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 Speicher-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 des Cross-Origin-Embedder-Policy (COEP) gelockert werden, sodass Dokumente mit festgelegtem COEP Drittanbieterdokumente einbetten können, die dies nicht tun. Siehe IFrame credentialless für weitere Details.

csp

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

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. Das Ziel ist, zu vermeiden, die Netzwerk- und Speicherbandbreite zu nutzen, die zum Abrufen des Rahmens erforderlich ist, bis der Browser vernünftigerweise sicher ist, dass er benötigt wird. Dies verbessert die Leistung und Kosten in den meisten typischen Anwendungsfällen, insbesondere durch Reduzierung der anfänglichen Seitenladezeiten.

Das Laden wird nur verzögert, wenn JavaScript aktiviert ist. Dies ist eine Anti-Tracking-Maßnahme, da, wenn ein Benutzeragent Lazy Loading unterstützt, während das Scripting deaktiviert ist, es immer noch möglich wäre, die ungefähre Scrollposition eines Benutzers während einer Sitzung zu verfolgen, indem gezielt iframes in das Markup einer Seite platziert werden, so dass ein Server nachverfolgen kann, wie viele iframes angefordert werden und wann.

name

Ein anvisierbarer Name für den eingebetteten Browsing-Kontext. Dieser kann im target-Attribut der <a>, <form> oder <base>-Elemente verwendet werden; das formtarget-Attribut der <input> oder <button>-Elemente; oder der windowName-Parameter in der window.open()-Methode. Außerdem wird der Name zu einer Eigenschaft der Window und Document-Objekte, die eine Referenz auf das eingebettete Fenster oder das Element selbst enthalten.

privateToken

Beinhaltet eine String-Darstellung eines Optionsobjekts, das eine private state token-Operation repräsentiert; dieses Objekt hat dieselbe Struktur wie die RequestInit-Diktator-Eigenschaft privateToken. IFrames mit diesem Attribut können Operationen wie das Ausgeben oder Einlösen von Token initiieren, wenn ihr eingebetteter Inhalt geladen wird.

referrerpolicy

Gibt an, welcher referrer gesendet wird, 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 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. Navigieren auf demselben Ursprung wird weiterhin den Pfad beinhalten.

same-origin

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

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 mit demselben 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 enthält den Ursprung und den Pfad (aber nicht das Fragment, das Passwort oder den Benutzernamen). Dieser Wert ist unsicher, da er Ursprünge und Pfade von TLS-geschützten Ressourcen an unsichere Ursprünge 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

Erlaubt das Herunterladen von Dateien durch 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 JS-Code es ohne Benutzerinteraktion initiiert hat.

allow-forms

Erlaubt der Seite, Formulare einzureichen. Wenn dieses Schlüsselwort nicht verwendet wird, wird ein Formular normal angezeigt, aber das Einreichen löst keine Eingabevalidierung aus, sendet keine Daten an einen Webserver und schließt keinen Dialog.

allow-modals

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

allow-orientation-lock

Ermöglicht der Ressource, die Bildschirmausrichtung zu sperren.

allow-pointer-lock

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

allow-popups

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

allow-popups-to-escape-sandbox

Ermöglicht es einem sandboxed-Dokument, einen neuen Browsing-Kontext zu öffnen, ohne die Sandboxing-Flags darauf zu erzwingen. Dies ermöglicht beispielsweise, dass eine Drittanbieter-Werbung sicher in Sandbox eingebettet wird, ohne dieselben Einschränkungen auf die Seite zu erzwingen, auf die die Anzeige verweist. Wenn diese Flagge nicht enthalten ist, unterliegt eine umgeleitete Seite, ein Popup-Fenster oder ein neuer Tab denselben Sandbox-Beschränkungen wie das ursprüngliche <iframe>.

allow-presentation

Erlaubt Einbettungen, ob ein iframe eine Präsentationssitzung starten kann.

allow-same-origin

Wenn dieses Token nicht verwendet wird, wird die Ressource als aus einem speziellen Ursprung kommend behandelt, der immer die Same-Origin-Richtlinie nicht erfüllt (was potenziell den Zugriff auf Datenspeicherung/Cookies und einige JavaScript-APIs verhindert).

Hinweis: Wenn allow-same-origin vorhanden ist, kann ein Dokument mit dem gleichen Ursprung das DOM des iframes trotzdem zugreifen und mit ihm interagieren, auch wenn allow-scripts nicht gesetzt ist. Das Token allow-scripts kontrolliert nur die Skriptausführung im eingebetteten Browsing-Kontext und beeinflusst nicht den DOM-Zugriff vom Elternteil.

allow-scripts

Erlaubt der Seite, Skripte auszuführen (aber keine Popup-Fenster zu erstellen). Wenn dieses Schlüsselwort nicht verwendet wird, ist diese Operation nicht erlaubt.

allow-storage-access-by-user-activation

Ermöglicht einem Dokument, das im <iframe> geladen wird, die Storage Access API zu verwenden, um Zugriff auf nicht partitionierte Cookies zu beantragen.

allow-top-navigation

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

allow-top-navigation-by-user-activation

Ermöglicht der Ressource die Navigation des obersten Browsing-Kontexts, aber nur, wenn sie durch eine Benutzerinteraktion initiiert wird.

allow-top-navigation-to-custom-protocols

Erlaubt Navigierungen zu nicht-http-Protokollen, die in einem Browser integriert 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 den gleichen 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 — es wäre dann nicht sicherer als ein <iframe> ohne Verwendung des sandbox-Attributs.
• Sandboxing ist nutzlos, wenn der Angreifer Inhalte außerhalb eines sandboxed iframe anzeigen kann — so 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: Bei der Umleitung des Benutzers, dem Öffnen eines Popup-Fensters oder dem Öffnen eines neuen Tabs aus einer eingebetteten Seite innerhalb eines <iframe>s mit dem sandbox-Attribut unterliegt der neue Browsing-Kontext denselben sandbox-Einschränkungen. Dies können Probleme verursachen — zum Beispiel, wenn eine Seite innerhalb eines <iframe>s ohne ein sandbox="allow-forms"- oder sandbox="allow-popups-to-escape-sandbox"-Attribut darauf eine neue Seite in einem separaten Tab öffnet, wird das Einreichen eines Formulars 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 mit der Same-Origin-Richtlinie übereinstimmt. Beachten Sie auch, dass das programmatische Entfernen eines src-Attributs eines <iframe>s (z. B. über Element.removeAttribute()) in Firefox (ab Version 65), Chromium-basierten Browsern und Safari/iOS dazu führt, dass about:blank im Rahmen geladen wird.

Hinweis: Die about:blank-Seite verwendet die URL des einbettenden Dokuments als Basis-URL, wenn relativ URLs, wie ankergelinkte Links aufgelöst werden.

srcdoc

Inline-HTML, das eingebettet werden soll, überschreibt das src-Attribut. Sein Inhalt sollte der Syntax eines vollständigen HTML-Dokuments folgen, das die Doctype-Direktive, <html>-, <body>-Tags usw. umfasst, obwohl die meisten weggelassen werden können, sodass nur der Hauptinhalt übrig bleibt. 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ückgefallen.

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

width

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

Veraltete Attribute

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

align

Die Ausrichtung dieses Elements in Bezug auf den umgebenden Kontext.

frameborder

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

longdesc

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

marginheight

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

marginwidth

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

scrolling

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

auto

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

yes

Immer eine Scrollleiste anzeigen.

no

Niemals eine Scrollleiste anzeigen.

Scripting

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

Mit dem DOM-Objekt HTMLIFrameElement 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>, ebenso wie contentWindow.document.

Von innerhalb eines Rahmens kann ein Skript eine Referenz zu seinem Elternfenster mit window.parent erhalten.

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

Top-Navigation in Cross-Origin-Frames

Skripte, die in einem Frame gleichen Ursprungs laufen, können auf die Window.top-Eigenschaft zugreifen und window.top.location festlegen, um die oberste Seite auf einen neuen Standort zu umleiten. Dieses Verhalten wird als "Top-Navigation" bezeichnet.

Ein Cross-Origin-Frame darf die oberste Seite nur dann über top umleiten, wenn der Frame eine Sticky-Aktivierung hat. Wenn die Top-Navigation blockiert ist, können Browser entweder um Benutzererlaubnis zur Umleitung bitten oder den Fehler in der Entwicklerkonsole melden (oder beides). Diese Einschränkung durch Browser wird Framebusting-Intervention genannt. Dies bedeutet, dass ein Cross-Origin-Frame die oberste Seite nicht sofort umleiten kann — der Benutzer muss zuvor mit dem Frame interagiert oder die Erlaubnis zur Umleitung erteilt haben.

Ein sandboxed Frame blockiert jegliche Top-Navigation, es sei denn, die Werte des sandbox-Attributs sind auf allow-top-navigation oder allow-top-navigation-by-user-activation gesetzt. Beachten Sie, dass Top-Navigationsberechtigungen vererbt werden, sodass ein verschachtelter Frame nur dann eine Top-Navigation durchführen kann, wenn auch seine übergeordneten Frames dies dürfen.

Positionierung und Skalierung

Als ein ersetzbares Element kann das <iframe> die Position des eingebetteten Dokuments innerhalb seines Rahmens mit der object-position-Eigenschaft einstellen.

Verhalten von error- und load-Ereignissen

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 auszukundschaften. Daher wird aus Sicherheitsgründen das error-Ereignis in <iframe>s von Benutzeragenten nicht ausgelöst, und das load-Ereignis wird immer ausgelöst, selbst wenn der <iframe>-Inhalt nicht geladen werden kann.

Barrierefreiheit

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 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. Dieser Kontextwechsel kann verwirrend und zeitraubend sein, insbesondere für Seiten mit mehreren <iframe>s und/oder wenn die Embeds interaktiven Inhalt wie Video oder Audio enthalten.

Beispiele

Ein einfaches <iframe>

Dieses Beispiel bettet die Seite auf https://example.org in einem iframe ein. Dies ist ein häufiger Anwendungsfall für iframes: Inhalte von einer anderen Website einbetten. 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

Einbetten von Quellcode in ein <iframe>

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

Beachten Sie, dass bei Verwendung von srcdoc alle relativen URLs im eingebetteten Inhalt relativ zur URL der eingebetteten 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>

Hier ist, wie man Escape-Sequenzen beim Gebrauch von srcdoc schreibt:

• Schreiben Sie zunächst das HTML aus, indem Sie alles, was Sie in einem normalen HTML-Dokument escapen würden, escapen (wie <, >, & usw.).
• < und < repräsentieren dasselbe Zeichen im srcdoc-Attribut. Daher ersetzen Sie, um daraus eine tatsächliche Escape-Sequenz im HTML-Dokument zu machen, alle Ampersands (&) mit &. Zum Beispiel wird < zu <, und & wird zu &.
• Ersetzen Sie doppelte Anführungszeichen (") mit ", um zu verhindern, dass das srcdoc-Attribut vorzeitig beendet wird (wenn Sie stattdessen ' verwenden, sollten Sie ' mit ' ersetzen). Dieser Schritt erfolgt nach dem vorherigen, damit ", das in diesem Schritt erstellt wird, nicht zu " wird.

Ergebnis

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• CSP: frame-ancestors
• Privatsphäre, Berechtigungen und Informationssicherheit
• Lokaler Netzwerkzugriff