iframe und Einbettungen

Zuletzt geprüft am 14. September 2026 von Daniel Weihmann

Ein <iframe> holt eine fremde Seite in die eigene. Das ist bequem und deshalb weit verbreitet: Karten, Videos, Kalender, Formulare von Drittanbietern. Es ist zugleich die Stelle, an der man am meisten Kontrolle abgibt – über die Ladezeit, über die Rechte im Browser und über die Daten der Besucher.

Die Grundform

<iframe src="https://example.org/karte"
        title="Lageplan der Geschäftsstelle"
        width="640" height="480"
        loading="lazy"
        referrerpolicy="no-referrer"></iframe>

width und height: Reservieren den Platz, bevor der Inhalt da ist. Ohne sie springt das Layout, genau wie beim Bild. Die tatsächliche Größe regelt danach CSS.
loading="lazy": Lädt den Rahmen erst, wenn er in die Nähe des sichtbaren Bereichs kommt. Bei einer Karte weit unten auf der Seite spart das den kompletten Abruf, solange niemand hinunterscrollt.
referrerpolicy: Bestimmt, was der eingebettete Anbieter über die einbettende Seite erfährt. no-referrer sagt: gar nichts.
allowfullscreen: Erlaubt dem Inhalt den Vollbildmodus. Heute eigentlich die Kurzform von allow="fullscreen".

Ein <iframe> braucht immer ein schließendes Tag. Inhalt dazwischen wird von aktuellen Browsern nicht angezeigt – der frühere Rückfalltext hat keine Wirkung mehr.

title ist Pflicht

Für ein <iframe> ist title die Ausnahme von der Regel, dass man dieses Attribut meiden soll. Ein Screenreader kündigt den Rahmen als eigenständigen Bereich an und liest dafür den title vor. Fehlt er, heißt es nur „Frame" – und der Nutzer muss hineingehen, um zu erfahren, was dort steht.

So

<iframe
  title="Anfahrt: Karte von
         OpenStreetMap">

Nicht so

<iframe title="iframe">
<iframe title="Karte">
<iframe> <!-- gar keiner -->

Der Titel soll unterscheiden, nicht benennen. Liegen zwei Karten auf einer Seite, müssen die Titel sie auseinanderhalten.

sandbox

sandbox nimmt dem eingebetteten Inhalt zunächst alle Rechte und gibt einzeln zurück, was er wirklich braucht. Ein leeres sandbox ist die schärfste Stufe: kein JavaScript, keine Formulare, keine Navigation nach außen.

Die gebräuchlichsten sandbox-Werte
Wert	gibt zurück
allow-scripts	JavaScript darf laufen
allow-forms	Formulare dürfen abgeschickt werden
allow-same-origin	der Inhalt gilt wieder als von seiner eigenen Herkunft
allow-popups	darf neue Fenster öffnen
allow-top-navigation	darf die einbettende Seite umleiten

allow-scripts und allow-same-origin zusammen heben die Sandbox praktisch auf. Der Inhalt darf dann Skripte ausführen und gilt als eigene Herkunft – womit er sich die eigenen Einschränkungen per Skript entfernen kann. Wer beides braucht, sollte dem Anbieter ohnehin vertrauen; dann ist die Sandbox eher Dekoration.

allow und Berechtigungen

Während sandbox regelt, was der Inhalt tun darf, regelt allow, welche Gerätefunktionen er nutzen darf: Kamera, Mikrofon, Standort, Vollbild, Bewegungssensoren. Ohne Freigabe bekommt der Rahmen sie nicht, auch wenn der Besucher sie der Hauptseite erlaubt hat.

<iframe src="https://example.org/konferenz"
        title="Videokonferenz"
        allow="camera; microphone; fullscreen"></iframe>

Die Regel ist dieselbe wie bei allen Rechten: nur eintragen, was der Inhalt wirklich braucht. Ein eingebettetes Video braucht fullscreen, aber kein Mikrofon.

Datenschutz: das eigentliche Thema

Ein <iframe> baut eine Verbindung zum fremden Anbieter auf, sobald die Seite lädt – nicht erst, wenn jemand klickt. Dabei gehen IP-Adresse, Browserkennung und je nach Anbieter Cookies über die Leitung. Bei Kartendiensten und Videoplattformen ist das der Normalfall.

Deshalb hat sich die Zwei-Klick-Lösung durchgesetzt: Statt des Rahmens steht zunächst ein Platzhalter mit Hinweis und Schaltfläche. Erst nach dem Klick wird das <iframe> eingesetzt. Das ist kein HTML-Problem, sondern eines der Reihenfolge – aber es beginnt in der Auszeichnung:

<div class="einbettung" data-src="https://example.org/karte">
  <p>Diese Karte wird von example.org geladen.
     Dabei wird Ihre IP-Adresse übertragen.</p>
  <button type="button">Karte laden</button>
</div>

Für eine statische Karte gibt es oft auch den Ausweg ohne Einbettung: ein Screenshot des Ausschnitts plus ein normaler Link zum Kartendienst. Dann fällt die Einwilligung ganz weg, und die Seite lädt schneller.

Was hier steht, ordnet ein und ersetzt keine Rechtsberatung. Ob im Einzelfall eine Einwilligung nötig ist, hängt vom Anbieter und von der Ausgestaltung ab.

Die eigene Seite schützen

Die andere Richtung wird gern vergessen: Ohne Gegenmaßnahme kann jede fremde Seite die eigene in einen Rahmen setzen – etwa um Klicks auf unsichtbare Schaltflächen umzulenken. Zwei Header verhindern das, beide gehören in die Serverkonfiguration:

Content-Security-Policy: frame-ancestors 'self'
X-Frame-Options: SAMEORIGIN

frame-ancestors ist der modernere und genauere Weg; X-Frame-Options bleibt als Rückfall für ältere Browser. Diese Seite setzt beide.

Häufige Fehler

Kein title. Der häufigste Befund jedes Prüfwerkzeugs bei Einbettungen, und einer der am schnellsten behobenen.
Kein loading="lazy" bei Karten weit unten. Der Abruf kostet Zeit und Daten, auch wenn niemand hinunterscrollt.
Feste Pixelhöhe für responsiven Inhalt. Ein Video im Rahmen braucht ein Seitenverhältnis, keine feste Höhe: aspect-ratio: 16 / 9 am iframe, dazu width: 100%.
scrolling und frameborder. Beide sind seit HTML5 überholt. Rahmen entfernt man mit border: 0 in CSS.
Einbettung statt Link. Nicht jeder fremde Inhalt muss im Rahmen stehen. Ein Link kostet keine Einwilligung und keine Ladezeit.