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.

Vercel · Schritt für Schritt

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.

1 Schritt 1 von 3

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 Produktiv
// 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'"
        }
      ]
    }
  ]
}
Statisch vs. Dynamisch

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.

2 Schritt 2 von 3

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 Edge
// 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).*)'],
};
Wenn Sie CSP sowohl in 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.
3 Schritt 3 von 3

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) Testen
// middleware.ts — Report-Only-Modus zum Testen
response.headers.set(
  'Content-Security-Policy-Report-Only',
  csp + "; report-uri /api/csp-report"
);
Terminal Verifizieren
# 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.