Das iframe-Element: src und sandbox

Das Element <iframe> bettet ein anderes HTML-Dokument in die aktuelle Seite ein. Jedes iframe hat seinen eigenen Browsing-Kontext, sein eigenes DOM und seinen eigenen JavaScript-Gültigkeitsbereich. Inhalte innerhalb eines iframes können ohne ausdrückliche Erlaubnis nicht auf das DOM der übergeordneten Seite zugreifen.

Setzen Sie das src-Attribut auf die einzubettende URL: <iframe src="https://example.com" width="800" height="600">. Das iframe erstellt einen neuen Browsing-Kontext. Das title-Attribut ist für die Barrierefreiheit erforderlich: title="Embedded map".

sandbox wendet Einschränkungen auf den Inhalt des iframes an: Skripte, Formulare, Popups und Plugins werden standardmäßig deaktiviert. Fügen Sie bestimmte Berechtigungen hinzu, um Funktionen wiederherzustellen: sandbox="allow-scripts allow-same-origin".

allow-scripts: aktiviert JavaScript. allow-same-origin: ermöglicht, dass das iframe als gleiche Herkunft behandelt wird (erforderlich für den Zugriff auf localStorage). allow-forms: aktiviert das Absenden von Formularen. allow-popups: erlaubt window.open(). Gewähren Sie nur die unbedingt erforderlichen Berechtigungen.

Cross-Origin-iframes können nicht auf das DOM der übergeordneten Seite zugreifen – parent.document löst einen Sicherheitsfehler aus. Die Kommunikation zwischen Cross-Origin-Frames erfolgt über postMessage: iframe.contentWindow.postMessage(data, origin).

Senden Sie Nachrichten vom übergeordneten Dokument an das iframe: iframe.contentWindow.postMessage({ type: "update", data: {} }, "https://embed.example.com"). Lauschen Sie im iframe auf Nachrichten: window.addEventListener("message", handler). Überprüfen Sie event.origin immer, bevor Sie die Nachricht verarbeiten.

loading="lazy" bei iframes verzögert das Laden, bis sich das iframe in der Nähe des Viewports befindet – dadurch wird der anfängliche Seitenaufbau beschleunigt. Das ist nützlich für Karten, Videoeinbettungen und Social-Media-Widgets unterhalb des sichtbaren Bereichs, die nicht sofort sichtbar sind.

Jedes iframe lädt ein separates HTML-Dokument, CSS, JavaScript und Assets – ein erheblicher Ressourcenaufwand. Verwenden Sie iframes nicht für Inhalte, die als Snippet eingebettet werden könnten. Laden Sie iframes unterhalb des sichtbaren Bereichs verzögert. Ziehen Sie Facade-Muster in Betracht (einen Platzhalter anzeigen und beim Klick laden).

Steuern Sie das Scrollverhalten von iframes: scrolling="no" deaktiviert Bildlaufleisten (veraltet; verwenden Sie stattdessen overflow: hidden in CSS für das iframe). Der moderne Ansatz besteht darin, die Höhe des iframes an die Inhaltshöhe anzupassen und dadurch interne Bildlaufleisten überflüssig zu machen.

Das allow-Attribut gewährt dem iframe Funktionen der Permissions Policy: allow="camera; microphone; fullscreen". Dadurch kann das iframe den Kamerazugriff, den Mikrofonzugriff und die Fullscreen API anfordern, auch wenn der übergeordnete Origin diese Funktionen nicht verwendet.

YouTube und Google Maps stellen Einbettungscodes für iframes bereit. Diese enthalten allow-Attribute für den Vollbildmodus und die automatische Wiedergabe. Fügen Sie für die Barrierefreiheit von Screenreadern immer title="Video title" hinzu. Das sandbox-Attribut wird Einbettungscodes von Drittanbietern normalerweise nicht hinzugefügt – Hinweise zur Sicherheit finden Sie in deren Dokumentation.

Was bewirkt das sandbox-Attribut standardmäßig bei einem iframe, wenn keine Werte angegeben sind?

iframes betten externe Dokumente in isolierte Browsing-Kontexte ein. Das sandbox-Attribut schränkt die Fähigkeiten eines iframes ein – gewähren Sie nur die mindestens erforderlichen Berechtigungen. postMessage ermöglicht eine sichere Kommunikation zwischen verschiedenen Origins. Durch Lazy Loading werden Ressourcen für iframes unterhalb des sichtbaren Bereichs erst später geladen. Das allow-Attribut gewährt vertrauenswürdigen Einbettungen von Drittanbietern Funktionen der Permissions Policy.