X-Frame-Options

Verwendung

Clickjacking-Angriffe verleiten Nutzer dazu, auf verborgene Elemente zu klicken, die über einer legitimen Seite liegen. Ein Angreifer bettet die Zielseite in ein transparentes iframe ein, platziert eine täuschende Benutzeroberfläche darüber und fängt Klicks ab, die dem eingebetteten Inhalt gelten. X-Frame-Options verhindert dies, indem der Header dem Browser mitteilt, ob die Antwort innerhalb eines Frames erscheinen darf.

Hinweis

X-Frame-Options gilt zugunsten von CSP frame-ancestors als veraltet. Alle modernen Browser unterstützen frame-ancestors, das feinere Kontrolle bietet, einschließlich mehrerer Origins und Scheme-Abgleich. X-Frame-Options ist aus Gründen der Abwärtskompatibilität mit älteren Browsern weiterhin weit verbreitet im Einsatz.

Der Header akzeptiert zwei aktive Werte: DENY und SAMEORIGIN. Ein dritter Wert, ALLOW-FROM, war in früheren Implementierungen definiert, ist inzwischen jedoch obsolet und wird von modernen Browsern ignoriert.

DENY

Der Wert DENY verhindert, dass die Seite in irgendeinem Frame angezeigt wird, unabhängig von der anfragenden Website. Unter keinen Umständen ist eine Einbettung in einen Frame zulässig.

SAMEORIGIN

Der Wert SAMEORIGIN erlaubt die Einbettung der Seite in einen Frame nur durch Seiten derselben Origin. Eine Seite auf https://example.re darf eine andere Seite von https://example.re einbetten, eine Seite auf einer anderen Origin wird hingegen blockiert.

ALLOW-FROM (obsolete)

Der Wert ALLOW-FROM uri wies den Browser einst an, die Einbettung nur von der angegebenen URI aus zu erlauben. Moderne Browser unterstützen diese Direktive nicht mehr. Die entsprechende Funktionalität steht über die CSP-Direktive frame-ancestors zur Verfügung:

Content-Security-Policy: frame-ancestors https://trusted.example.re

Beispiel

Jegliche Einbettung einer Seite in Frames blockieren, der strengste Schutz gegen Clickjacking:

X-Frame-Options: DENY

Einbettung durch dieselbe Origin erlauben, während externe Websites am Einbetten der Seite gehindert werden:

X-Frame-Options: SAMEORIGIN

Eine Defense-in-Depth-Konfiguration, die X-Frame-Options mit der CSP-Direktive frame-ancestors kombiniert, um eine breite Browserabdeckung zu erreichen:

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

Fehlersuche

Frame-Probleme zeigen sich als leere iframes oder Konsolenfehler, wenn eine Seite sich weigert, innerhalb eines anderen Dokuments zu rendern.

Konsolenfehler “Refused to display in a frame”. Der Browser blockiert die eingebettete Seite und protokolliert Refused to display ‘https://example.re/’ in a frame because it set ‘X-Frame-Options’ to ‘DENY’ (oder ‘SAMEORIGIN’). Prüfen Sie die Antwort-Header der eingebetteten URL im Netzwerk-Tab der DevTools. Muss die Seite einbettbar sein, ändern Sie den Header-Wert von DENY auf SAMEORIGIN oder entfernen Sie den Header vollständig und verwenden Sie CSP frame-ancestors für feinere Kontrolle.

ALLOW-FROM funktioniert in modernen Browsern nicht. Die Direktive ALLOW-FROM ist obsolet. Chrome, Firefox und Safari ignorieren die Direktive vollständig und behandeln den Header so, als wäre kein gültiger Wert gesetzt. Ersetzen Sie ALLOW-FROM durch die CSP-Direktive frame-ancestors, die mehrere Origins unterstützt: Content-Security-Policy: frame-ancestors https://trusted.example.re https://other.example.re.

Widersprüchliche X-Frame-Options und CSP frame-ancestors. Sind beide Header vorhanden, ignorieren Browser mit Unterstützung für CSP Level 2 und höher X-Frame-Options und richten sich ausschließlich nach frame-ancestors. Ältere Browser ohne CSP-Unterstützung greifen auf X-Frame-Options zurück. Vergewissern Sie sich, dass die beabsichtigte Richtlinie über beide Header hinweg konsistent ist. X-Frame-Options: DENY zusammen mit frame-ancestors ‘self’ zu senden, erzeugt eine Diskrepanz: Moderne Browser erlauben die Einbettung durch dieselbe Origin, während ältere Browser jede Einbettung blockieren.

Legitime Einbettung blockiert (Zahlungsformulare, Widgets, eingebettete Anwendungen). Drittanbieterdienste, die eine iframe-Einbettung voraussetzen, schlagen fehl, wenn die Hostseite X-Frame-Options: DENY sendet. Verwenden Sie CSP frame-ancestors, um bestimmte Origins, die Einbettungszugriff benötigen, auf die Zulassungsliste zu setzen: Content-Security-Policy: frame-ancestors ‘self’ https://payments.provider.example.re.

Migration von X-Frame-Options zu CSP frame-ancestors. Setzen Sie während der Übergangsphase beide Header ein. Konfigurieren Sie frame-ancestors passend zur beabsichtigten Einbettungsrichtlinie. Behalten Sie X-Frame-Options für Browser ohne CSP-Unterstützung bei. Sobald der Traffic älterer Browser unter akzeptable Schwellenwerte fällt, entfernen Sie X-Frame-Options und verlassen sich allein auf frame-ancestors. Testen Sie die Migration, indem Sie die Seite von einer erlaubten Origin aus in ein iframe einbetten und in mehreren Browsern überprüfen, ob der Frame geladen wird.