X-Frame-Options für Next.js konfigurieren
Schritt-für-Schritt-Anleitung: X-Frame-Options und CSP frame-ancestors in Next.js einrichten — beide Header gleichzeitig in next.config.js, kein Middleware nötig.
Clickjacking-Schutz in Next.js
X-Frame-Options und CSP frame-ancestors verhindern, dass Ihre Next.js-Anwendung in fremden iFrames eingebettet wird. In Next.js konfigurieren Sie beide Header über die headers()-Funktion in der next.config.js — statische Header, die keine Middleware erfordern. Der Vorteil: Beide Header werden in einem Konfigurationsblock gesetzt, und das /:path*-Pattern schützt alle Routen gleichzeitig.
X-Frame-Options ist mit 10 von 166 Punkten ein Faktor im Wolf-Agents Web Security Check. Die Konfiguration dauert weniger als 5 Minuten.
X-Frame-Options und frame-ancestors konfigurieren
Fügen Sie beide Header in Ihrer next.config.js hinzu. Das /:path*-Pattern matcht alle Routen. DENY und frame-ancestors 'none' blockieren jede iFrame-Einbettung — der stärkste Schutz gegen Clickjacking.
// Clickjacking-Schutz — Defense-in-Depth
const nextConfig = {
async headers() {
return [{
source: '/:path*',
headers: [
{ key: 'X-Frame-Options', value: 'DENY' },
{ key: 'Content-Security-Policy', value: "frame-ancestors 'none'" }
]
}]
},
};
module.exports = nextConfig;Die Next.js-Konfiguration setzt DENY, weil die meisten Next.js-Apps keine iFrame-Einbettung benötigen. Wenn Sie iFrames verwenden (z.B. Dashboard-Widgets), ersetzen Sie DENY durch SAMEORIGIN und frame-ancestors 'none' durch frame-ancestors 'self'.
Header verifizieren
Starten Sie den Entwicklungsserver neu und verifizieren Sie beide Header mit curl. Änderungen an next.config.js erfordern einen Neustart — Hot Reload greift bei Konfigurationsänderungen nicht.
# Entwicklungsserver neu starten
npm run dev
# X-Frame-Options-Header prüfen
curl -sI http://localhost:3000 | grep -i x-frame
# Erwartete Ausgabe:
# X-Frame-Options: DENY
# frame-ancestors prüfen
curl -sI http://localhost:3000 | grep -i content-security
# Erwartete Ausgabe:
# Content-Security-Policy: frame-ancestors 'none'next build && next start — die Header sollten identisch sein. Wie steht Ihre Domain bei X-Frame-Options?
Prüfen Sie es jetzt — kostenlos, ohne Registrierung, mit 166 Prüfpunkte.
Häufig gestellte Fragen
Brauche ich Middleware für X-Frame-Options in Next.js?
Nein. X-Frame-Options und frame-ancestors sind statische Header — derselbe Wert für jeden Request. Die headers()-Funktion in next.config.js genügt vollständig. Middleware wäre nur nötig, wenn der Header-Wert pro Request variieren müsste.
Warum setzt die Next.js-Konfiguration DENY statt SAMEORIGIN?
Next.js-Anwendungen benötigen in der Regel keine iFrame-Einbettung. DENY blockiert jede Einbettung — auch von der eigenen Domain. Wenn Sie iFrames benötigen (z.B. für ein Dashboard-Widget), wechseln Sie zu SAMEORIGIN und frame-ancestors 'self'.
Funktioniert die Konfiguration auf Vercel?
Ja. Vercel übernimmt die headers()-Konfiguration aus next.config.js automatisch. Alternativ können Sie Header auch in der vercel.json definieren.
Wird der Header auch bei API-Routes gesetzt?
Ja, das Pattern /:path* matcht alle Pfade inklusive /api/*. Für API-Routes ist X-Frame-Options weniger relevant (sie liefern keine HTML-Seiten), aber der Header schadet nicht.
Was wenn ich bereits eine CSP-Middleware mit frame-ancestors habe?
Wenn Ihre CSP-Middleware bereits frame-ancestors setzt, entfernen Sie die frame-ancestors-Zeile aus der next.config.js. Doppelte CSP-Header können zu Konflikten führen. Setzen Sie nur X-Frame-Options als zusätzlichen Fallback.