Security-Header-Architektur für Vercel
Alle Security Headers zentral über vercel.json, Edge Middleware und Framework-Config konfigurieren — konsolidierte Architektur für Vercel-Deployments.
Security-Header-Architektur für Vercel
Vercel bietet drei Konfigurationswege für Security Headers: die vercel.json für statische Header, Edge Middleware für dynamische Header wie CSP-Nonces und die Framework-Konfiguration (z.B. next.config.ts). Die Architektur-Entscheidung hat direkte Auswirkungen auf Performance und Sicherheit Ihrer Vercel-Deployments.
Vercel setzt keine Security Headers standardmäßig. Im Wolf-Agents Web Security Check erreichen Vercel-Projekte ohne Konfiguration Note F. Mit der richtigen Architektur — vercel.json für statische Header, Edge Middleware für CSP-Nonces — erreichen Sie Note A+ in wenigen Minuten.
Alle statischen Header in vercel.json
Die vercel.json im Projekt-Root ist der einfachste Weg für statische Security Headers. Das source-Pattern /(.*) wendet die Header auf alle Responses an. Für API Routes benötigen Sie ein separates Pattern oder Edge Middleware.
// vercel.json — Alle Security Headers zentral
{
"headers": [
{
"source": "/(.*)",
"headers": [
{ "key": "Strict-Transport-Security",
"value": "max-age=31536000; includeSubDomains; preload" },
{ "key": "X-Content-Type-Options",
"value": "nosniff" },
{ "key": "X-Frame-Options",
"value": "SAMEORIGIN" },
{ "key": "Referrer-Policy",
"value": "strict-origin-when-cross-origin" },
{ "key": "Permissions-Policy",
"value": "camera=(), microphone=(), geolocation=(), payment=()" },
{ "key": "Cross-Origin-Opener-Policy",
"value": "same-origin" },
{ "key": "Cross-Origin-Resource-Policy",
"value": "same-origin" }
]
}
]
}Header aus vercel.json und Framework-Config (z.B. next.config.ts headers) werden gemerged. Bei identischen Keys gewinnt die Framework-Konfiguration. Definieren Sie Security Headers an einem Ort, nicht an beiden.
Edge Middleware für dynamische Header
Für dynamische Header wie CSP-Nonces erstellen Sie eine middleware.ts im Projekt-Root. Edge Middleware läuft auf Vercels Edge Network in V8 Isolates — nah am Nutzer, mit minimaler Latenz. Bei Kollision mit vercel.json gewinnt die Middleware.
// middleware.ts — Edge Middleware für dynamische Header
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
export function middleware(request: NextRequest) {
const nonce = crypto.randomUUID();
const cspHeader = [
"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'",
].join('; ');
const response = NextResponse.next();
response.headers.set('Content-Security-Policy', cspHeader);
response.headers.set('x-nonce', nonce);
return response;
}vercel.json effizienter. Konfiguration verifizieren
Nach dem Deployment prüfen Sie die Header mit curl oder dem Wolf-Agents Web Security Check. Testen Sie sowohl die Produktions-URL als auch Preview Deployments — Header-Konfigurationen gelten für alle Environments.
# Header prüfen nach Deployment
curl -sI https://ihre-domain.de | grep -iE "strict-transport|x-content-type|x-frame|referrer-policy|permissions-policy"
# Erwartete Ausgabe:
strict-transport-security: max-age=31536000; includeSubDomains; preload
x-content-type-options: nosniff
x-frame-options: SAMEORIGIN
referrer-policy: strict-origin-when-cross-origin
permissions-policy: camera=(), microphone=(), geolocation=(), payment=()Häufige Fehler
vercel.json gilt nicht für API Routes
Das Source-Pattern /(.*) matched keine Serverless Functions unter /api/*. Verwenden Sie ein separates Pattern oder setzen Sie Header per Edge Middleware.
Framework-Config überschreibt vercel.json
Header aus next.config.ts haben Vorrang vor vercel.json. Definieren Sie Security Headers an genau einem Ort, um Konflikte zu vermeiden.
Edge Middleware und vercel.json Kollision
Wenn Edge Middleware und vercel.json den gleichen Header setzen, gewinnt die Middleware. Das führt zu unerwarteten Werten, wenn nur einer der beiden Orte aktualisiert wird.
Preview Deployments vergessen
Preview Deployments laufen auf *.vercel.app-Subdomains. HSTS mit includeSubDomains kann Preview URLs betreffen. Testen Sie Header auf allen Environments.
Compliance-Relevanz
Eine konsolidierte Header-Architektur ist die Grundlage für Compliance-Anforderungen. NIS2 fordert angemessene technische Maßnahmen — Security Headers gehören dazu. PCI DSS 4.0 verlangt CSP-Implementierung ab März 2025. Der Wolf-Agents Web Security Check prüft 166 Punkte und zeigt Ihren aktuellen Compliance-Status.
Wie steht Ihre Domain bei Implementierungs-Architektur?
Prüfen Sie es jetzt — kostenlos, ohne Registrierung, mit 166 Prüfpunkte.