CSP für Vercel konfigurieren
Schritt-für-Schritt-Anleitung: Content Security Policy auf Vercel einrichten — von statischer Policy per vercel.json bis zu dynamischen Nonces per Edge Middleware.
Content Security Policy auf Vercel
Content Security Policy (CSP) ist der wichtigste HTTP-Security-Header gegen Cross-Site Scripting (XSS). CSP definiert, welche Ressourcen der Browser laden darf — und blockiert alles andere. Mit 35 von 166 Punkten ist CSP der einflussreichste Header im Wolf-Agents Web Security Check.
Vercel bietet zwei Wege für CSP: Eine statische Policy per vercel.json für einfache Websites und dynamische Nonces per Edge Middleware für Anwendungen mit Inline-Scripts. Die Edge Middleware läuft auf Vercels globalem Edge Network in V8 Isolates und generiert pro Request einen einzigartigen Nonce.
Wichtig: Vercel setzt standardmäßig keine CSP. Ohne Konfiguration ist Ihre Anwendung ungeschützt. Mit der richtigen Strategie — Edge Middleware für Nonces, vercel.json als Fallback — erreichen Sie Note A+ im Wolf-Agents Web Security Check.
Statische CSP per vercel.json
Für Websites ohne Inline-Scripts genügt eine statische CSP in der vercel.json. Das Source-Pattern /(.*) wendet den Header auf alle Responses an. Beachten Sie, dass vercel.json-Header nicht automatisch für API Routes gelten — verwenden Sie ein separates Pattern oder Edge Middleware.
// vercel.json — Statische CSP (ohne Nonces)
{
"headers": [
{
"source": "/(.*)",
"headers": [
{
"key": "Content-Security-Policy",
"value": "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; object-src 'none'; base-uri 'self'; form-action 'self'; frame-ancestors 'none'"
}
]
}
]
} Eine statische CSP ohne Nonces blockiert alle Inline-Scripts. Wenn Ihr Framework (Next.js, Nuxt) Inline-Scripts generiert, benötigen Sie die Edge Middleware aus Schritt 2 für dynamische Nonces.
Edge Middleware für dynamische Nonces
Für Anwendungen mit Inline-Scripts generiert die Edge Middleware pro Request einen einzigartigen Nonce. Die middleware.ts im Projekt-Root läuft auf Vercels Edge Network — bei Kollision mit vercel.json gewinnt die Middleware. Der Nonce wird per x-nonce-Header an die Anwendung weitergegeben.
// middleware.ts — CSP mit dynamischen Nonces
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
export function middleware(request: NextRequest) {
const nonce = crypto.randomUUID();
const csp = [
"default-src 'self'",
`script-src 'self' 'nonce-${nonce}' 'strict-dynamic'`,
"style-src 'self' 'unsafe-inline'",
"img-src 'self' data: https:",
"object-src 'none'",
"base-uri 'self'",
"form-action 'self'",
"frame-ancestors 'none'",
].join('; ');
const response = NextResponse.next();
response.headers.set('Content-Security-Policy', csp);
response.headers.set('x-nonce', nonce);
return response;
}
export const config = {
matcher: ['/((?!api|_next/static|_next/image|favicon.ico).*)'],
}; vercel.json als auch in der Edge Middleware setzen, gewinnt die Middleware. Entfernen Sie den CSP-Eintrag aus vercel.json, sobald Sie die Middleware nutzen — sonst erhalten gecachte Responses den statischen Header. Report-Only testen und verifizieren
Starten Sie immer im Report-Only-Modus. Violations werden protokolliert, aber nicht blockiert. Erst wenn keine unerwarteten Violations auftreten, wechseln Sie auf Enforcement. Prüfen Sie den Header mit curl oder dem Wolf-Agents Web Security Check.
// middleware.ts — Report-Only-Modus zum Testen
response.headers.set(
'Content-Security-Policy-Report-Only',
csp + "; report-uri /api/csp-report"
); # CSP-Header nach Deployment prüfen
curl -sI https://ihre-domain.de | grep -i content-security-policy
# Erwartete Ausgabe (mit Nonce):
content-security-policy: default-src 'self'; script-src 'self' 'nonce-a1b2c3d4-...' 'strict-dynamic'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; object-src 'none'; base-uri 'self'; form-action 'self'; frame-ancestors 'none' Häufige Fehler
vercel.json CSP gilt nicht für API Routes
Das Source-Pattern /(.*) matched keine Serverless Functions unter /api/*. API Routes senden die statische CSP nicht — setzen Sie CSP per Edge Middleware oder separatem Pattern.
Edge Middleware und vercel.json Kollision
Wenn beide CSP setzen, gewinnt die Middleware. Ältere gecachte Responses könnten noch den vercel.json-Header enthalten. Entfernen Sie CSP aus vercel.json, wenn die Middleware aktiv ist.
Nonce nicht an Framework weitergegeben
Die Middleware generiert den Nonce, aber das Framework muss ihn in Script-Tags einsetzen. In Next.js lesen Sie den Nonce aus dem x-nonce-Header in app/layout.tsx.
Preview Deployments mit anderer Domain
Preview URLs laufen auf *.vercel.app. Wenn Ihre CSP connect-src oder frame-src hartcodiert, schlagen API-Aufrufe auf Preview Deployments fehl.
Compliance-Relevanz
PCI DSS 4.0 fordert seit März 2025 eine dokumentierte CSP-Implementierung für alle Zahlungsseiten — das betrifft auch Vercel-gehostete Shops und Checkout-Flows. NIS2 verlangt angemessene technische Maßnahmen zum Schutz vor Angriffen — CSP gehört zu den wichtigsten Schutzmechanismen gegen XSS. Der Wolf-Agents Web Security Check prüft CSP-Direktiven, Nonce-Nutzung und Report-Konfiguration.
Wie steht Ihre Domain bei Content Security Policy?
Prüfen Sie es jetzt — kostenlos, ohne Registrierung, mit 166 Prüfpunkte.