X-Frame-Options: HTTP-Security-Header zum Schutz vor Clickjacking

Durch Verwendung des HTTP-Security-Headers X-Frame-Options können sogenannte Clickjacking-Angriffe unterbunden werden. Hierfür wird dem Webbrowser mitgeteilt, inwieweit die aufgerufene Webseite in eine andere Webseite - z.B. via Frames - eingebettet werden darf.

Details zum Einsatz von X-Frame-Options erfahrt ihr in diesem Beitrag.

X-Frame-Options - Beschreibung & Funktionsweise

Im Normalfall kann eine Webseite ohne Weiteres in eine andere Webseite eingebettet werden. Dies kann über folgende HTML-Elemente erfolgen:

• frame
• iframe
• object
• embed

Um dem Webbrowser mitzuteilen, wie dieser sich verhalten soll, wenn die eigene Webseite in eine andere Webseite eingebunden werden soll, wird in der HTTP-Antwort der entsprechende HTTP-Header mitgesendet:

HTTP/2 200 OK
date: Sun, 15 Mar 2020 14:30:45 GMT
content-type: text/html; charset=UTF-8
content-length: 2802
x-frame-options: deny

Im o.a. Beispiel wird die Einstellung deny gewählt. Hiermit wird der Webbrowser dazu angehalten, die Einbettung der Webseite zu verbieten.

Beispiel - X-Frame-Options in Aktion

Zum Verdeutlichen der Funktionsweise soll ein einfaches Beispiel dienen. Angenommen eine Webseite von Domain A möchte eine Webseite von Domain B einbinden. Der vereinfachte Quellcode für die Webseite von Domain B würde wie folgt aussehen:

<body>
<p>Webseite Domain B</p>
</body>

Der Quellcode für die Webseite von Domain A sehe hingegen so aus:

<body>
<p>Webseite Domain A</p>
<iframe src="https://domain-b/webseite.html" />
</body>

Ohne weitere Vorkehrungen würde beim Aufruf der Webseite von Domain A die Webseite von Domain B im iframe vom Webbrowser angezeigt werden:

Um nun zu Verhindern, dass der Webbrowser das Einbetten bzw. Einbinden der Webseite von Domain B erlaubt, kann der X-Frame-Options-Header z.B. mit dem Wert deny verwendet werden. Als Ergebnis würde der Webbrowser dieses Mal einen entsprechenden Fehlerhinweis anzeigen:

Header-Einstellungen im Detail

Der X-Frame-Options-Header unterstützt folgende drei Einstellungswerte:

deny
Diese Angabe führt dazu, dass die Webseite generell nicht eingebettet werden kann.

sameorigin
In diesem Fall kann die Webseite nur von anderen Webseiten der gleichen Quelle eingebettet werden.

allow-from uri
Die Einbindung der Webseite ist nur von Webseiten aus der angegebenen Quelle gestattet.

X-Frame-Options vs CSP frame-anchestors

Die Funktionalität der Policy-Direktive frame-anchestors der Content-Security-Policy (CSP) überschneidet sich mit dem X-Frame-Options-Header. Laut der W3C-Spezifikation hat die CSP frame-anchestors-Angabe Vorrang und macht die Angabe des X-Frame-Headers eigentlich obsolet. Letztendlich schadet es aber auch nicht den Header trotz CSP mitzusenden.

Webbrowser-Unterstützung

X-Frame-Options wird von allen gängigen Webbrowsern unterstützt (siehe caniuse.com). Allerdings wird der Einstellungswert allow-from anscheinend von den meisten Webbrowsern nicht unterstützt.

X-Frame-Options-Header übertragen

Damit der Webserver den X-Frame-Options-Header zum Client mitsendet, muss die Konfiguration des Webservers angepasst werden.

Apache:
In der Konfigurationsdatei von Apache oder in der .htaccess ist folgende Anweisung zu hinterlegen:

Header always set X-Frame-Options "deny"

nginx:
Analog dazu ist für nginx in der Konfigurationsdatei Folgendes einzufügen:

add_header X-Frame-Options "deny";

X-Frame-Options-Einstellung von codingblatt.de

Für meinen Blog verwende ich die Einstellung deny. Ein Einbinden ist also generell nicht erlaubt. Wie oben bereits beschrieben, könnte ich den X-Frame-Options-Header theoretisch aber auch weglassen, da ich auch die Content-Security-Policy und die dazugehörige frame-anchestors-Direktive gesetzt habe.

Fazit

Um eure Website oder Webanwendung vor Clickjacking zu schützen, solltet ihr als weiteren Sicherheitsbaustein den X-Frame-Options-Header verwenden.