Clickjacking-Schutz für Vercel konfigurieren
Schritt-für-Schritt-Anleitung: X-Frame-Options und CSP frame-ancestors auf Vercel einrichten — Iframe-Einbettung kontrollieren und Clickjacking verhindern.
Clickjacking-Schutz auf Vercel
X-Frame-Options verhindert, dass Ihre Website in einem Iframe auf einer fremden Domain eingebettet wird. Angreifer nutzen Clickjacking, um Nutzer zu täuschen — sie klicken auf eine unsichtbar eingebettete Seite. X-Frame-Options ist mit 10 von 166 Punkten im Wolf-Agents Web Security Check bewertet.
Auf Vercel setzen Sie X-Frame-Options per vercel.json oder Edge Middleware. Verwenden Sie SAMEORIGIN, wenn Ihre Seite sich selbst einbetten darf, oder DENY für vollständigen Iframe-Schutz. Ergänzen Sie den Header durch frame-ancestors in Ihrer CSP für maximale Browser-Kompatibilität.
X-Frame-Options per vercel.json
Fügen Sie den X-Frame-Options-Header in Ihre vercel.json ein. SAMEORIGIN erlaubt die Einbettung auf der gleichen Domain — ideal, wenn Sie selbst Iframes verwenden. Für maximalen Schutz setzen Sie DENY.
// vercel.json — Clickjacking-Schutz
{
"headers": [
{
"source": "/(.*)",
"headers": [
{
"key": "X-Frame-Options",
"value": "SAMEORIGIN"
}
]
}
]
}CSP frame-ancestors ergänzen
Der modernere Ansatz ist frame-ancestors 'none' in Ihrer Content Security Policy. Wenn Sie CSP per Edge Middleware setzen (siehe CSP-Kapitel), fügen Sie frame-ancestors direkt in die Policy ein. Beide Header — X-Frame-Options und frame-ancestors — sollten konsistent sein.
// middleware.ts — X-Frame-Options + CSP frame-ancestors
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
export function middleware(request: NextRequest) {
const response = NextResponse.next();
// Legacy-Header für ältere Browser
response.headers.set('X-Frame-Options', 'SAMEORIGIN');
// Moderner Ersatz via CSP (frame-ancestors)
// Wenn CSP separat gesetzt wird, frame-ancestors dort einbauen
return response;
}frame-ancestors in der CSP und X-Frame-Options sich widersprechen, hat frame-ancestors Vorrang in modernen Browsern. Ältere Browser ignorieren frame-ancestors und nutzen nur X-Frame-Options — setzen Sie daher beide konsistent. Header verifizieren
Prüfen Sie den X-Frame-Options-Header nach dem Deployment. Testen Sie auch, ob Ihre Seite tatsächlich nicht in einem Iframe auf einer fremden Domain geladen werden kann. Der Wolf-Agents Web Security Check prüft sowohl X-Frame-Options als auch frame-ancestors.
# X-Frame-Options prüfen
curl -sI https://ihre-domain.de | grep -i x-frame-options
# Erwartete Ausgabe:
x-frame-options: SAMEORIGINHäufige Fehler
ALLOW-FROM wird nicht unterstützt
X-Frame-Options kennt nur DENY und SAMEORIGIN. ALLOW-FROM wird von modernen Browsern ignoriert. Verwenden Sie frame-ancestors in der CSP für spezifische Domain-Freigaben.
vercel.json gilt nicht für API Routes
API Routes unter /api/* erhalten den X-Frame-Options-Header aus vercel.json nicht automatisch. Setzen Sie den Header per Edge Middleware oder direkt in der API Route.
Widerspruch zwischen X-Frame-Options und CSP
Wenn X-Frame-Options SAMEORIGIN sagt, aber CSP frame-ancestors 'none' setzt, gewinnt CSP in modernen Browsern. Stellen Sie Konsistenz sicher.
Compliance-Relevanz
Clickjacking-Schutz ist eine Basisanforderung für Web-Sicherheit. OWASP listet Clickjacking als bekannten Angriffsvektor. PCI DSS und NIS2 fordern Schutzmaßnahmen gegen bekannte Angriffsmuster — X-Frame-Options und frame-ancestors gehören dazu. Der Wolf-Agents Web Security Check bewertet beide Header im Zusammenspiel.
Wie steht Ihre Domain bei Clickjacking-Schutz?
Prüfen Sie es jetzt — kostenlos, ohne Registrierung, mit 166 Prüfpunkte.