Clickjacking und X-Frame-Options: halte deine Seiten aus iframes heraus
Clickjacking bringt Nutzer dazu, versteckte Steuerelemente auf deiner Seite anzuklicken, indem sie in einem transparenten iframe auf einer vom Angreifer kontrollierten Website geladen wird. X-Frame-Options — oder die moderne CSP-Direktive frame-ancestors — sagt Browsern, das Einbetten deiner Seite zu verweigern, und schließt den Angriff vollständig.
Was es ist
Ein Clickjacking-Angriff funktioniert, indem deine Website in einem unsichtbaren oder durchscheinenden iframe auf der Seite des Angreifers geframt wird. Das Opfer sieht Köderinhalte und klickt auf etwas, das wie ein harmloser Button aussieht; der versteckte iframe fängt den echten Klick auf deiner Seite ab — eine Überweisung, eine Einstellungsänderung, eine OAuth-Freigabe — ohne dass der Nutzer es merkt.
X-Frame-Options ist ein HTTP-Response-Header mit zwei nützlichen Werten: DENY (Framing durch jeden verweigern) und SAMEORIGIN (Framing nur durch Seiten deines eigenen Origins erlauben). Die frame-ancestors-Direktive der CSP erledigt dieselbe Aufgabe mit feinerer Kontrolle — du kannst bestimmte vertrauenswürdige Origins auflisten — und ersetzt X-Frame-Options in Browsern, die CSP unterstützen.
Warum es wichtig ist
Jede Seite mit einer bedeutsamen Aktion — Kontoeinstellungen, Zahlungsbestätigung, E-Mail-Einstellungen oder ein Admin-Schalter — ist ein Clickjacking-Ziel. Ein eingeloggter Nutzer, der auf einer bösartigen Seite landet, kann dazu gebracht werden, echte Aktionen auszuführen, die er nie beabsichtigt hat, ohne sichtbares Zeichen, dass etwas nicht stimmt.
X-Frame-Options hinzuzufügen kostet nichts und wird von jedem modernen Browser unterstützt. Ihn auf Seiten wegzulassen, die sensible Aktionen ausführen, ist schlicht eine Fehlkonfiguration, keine fehlende Funktion.
So behebst du es
Setze den Header in next.config.js, damit er für jede Route gilt. DENY ist der sichere Standard für Apps, die nicht eingebettet werden müssen.
// next.config.js
module.exports = {
async headers() {
return [
{
source: "/:path*",
headers: [{ key: "X-Frame-Options", value: "DENY" }],
},
];
},
};Die frame-ancestors-Direktive der CSP ersetzt X-Frame-Options in modernen Browsern und gibt dir Kontrolle pro Origin. Füge sie zum bereits gesetzten Content-Security-Policy-Header hinzu.
// extend your existing CSP string
const csp = [
// ... your other directives ...
"frame-ancestors 'none'",
].join("; ");Wenn du Seiten legitim in deine eigene Website einbettest — ein Vorschau-iframe oder ein eingebettetes Widget im selben Origin —, verwende X-Frame-Options: SAMEORIGIN statt DENY oder frame-ancestors 'self'.
Wenn du Antworten über einen nginx-Proxy auslieferst, füge den Header in deinem server-Block hinzu.
add_header X-Frame-Options "DENY" always;FAQ
X-Frame-Options oder CSP frame-ancestors — was sollte ich verwenden?
Verwende beides. X-Frame-Options deckt ältere Browser ab; frame-ancestors in der CSP gibt dir Granularität pro Origin und ist der moderne Standard. Sie koexistieren problemlos — Browser, die CSP unterstützen, verwenden frame-ancestors und ignorieren X-Frame-Options.
Bricht DENY das Einbetten meiner eigenen Widgets oder Analyse-Dashboards?
Ja — DENY blockiert jedes Framing, einschließlich deines eigenen Origins. Musst du eine bestimmte Seite in einem iframe auf deiner eigenen Domain einbetten, verwende SAMEORIGIN oder frame-ancestors 'self'. Lockere es nur für die Seiten, die das Einbetten wirklich brauchen.
Welchen Schweregrad meldet AppSafe für ein fehlendes X-Frame-Options?
Mittel. Für sich genommen ist es kein unmittelbarer Datendiebstahl-Vektor, aber jede Seite, die Konto-Aktionen ausführt, ist ohne ihn einem echten Clickjacking-Risiko ausgesetzt.
Ist deine App betroffen?
AppSafe prüft dies und Dutzende weitere Probleme in einem kostenlosen Scan.
Meine App gratis scannenVerwandte Guides
Content-Security-Policy (CSP): was sie ist und wie du eine hinzufügst
Der Header, der verhindert, dass eingeschleuste Skripte ausgeführt werden.
Die Cookie-Flags Secure, HttpOnly und SameSite
Drei Flags, die verhindern, dass Session-Cookies gestohlen werden.
CORS-Fehlkonfiguration: die Wildcard- und Reflection-Fallen
Erlaube jeden Origin und jede Website kann deine API lesen.