Next.js — Alle Security-Header-Anleitungen
Schritt-für-Schritt-Anleitungen für jeden Security Header in Next.js. Per next.config.ts, Middleware oder Custom Server — für App Router und Pages Router.
Security Headers in Next.js — next.config.ts und Middleware
Next.js ist das führende React-Framework und bietet über die headers()-Funktion in next.config.ts
volle Kontrolle über HTTP-Response-Header. Jeder Security Header lässt sich über die
next.config.ts konfigurieren — statische Header deklarativ, dynamische per Middleware.
Der kostenlose Wolf-Agents Web Security Check zeigt
Ihnen in Sekunden, welche Header bereits gesetzt sind und wo Handlungsbedarf besteht.
Für fortgeschrittene Szenarien wie dynamische CSP-Nonces steht die Middleware zur Verfügung. Die Anleitungen decken sowohl die next.config.ts-Methode als auch die Middleware für App Router und Pages Router ab.
Wichtig: Bei Vercel-Hosting werden Header über vercel.json ODER next.config.ts gesetzt — nicht beides gleichzeitig. Bei Custom Server (Express/Fastify) gilt die Server-Konfiguration. Unsere Anleitungen zeigen die Unterschiede zwischen Vercel, Custom Server und Edge Runtime.
Next.js-Anleitungen nach Thema
Jede Anleitung erklärt einen Security Header Schritt für Schritt — mit copy-paste-fertiger next.config.ts und Middleware-Konfiguration. Die Punkte zeigen den Einfluss auf Ihre Web Security Note.
Implementierungs-Architektur
Alle Security Headers über next.config.ts headers() — optimale Reihenfolge und Multi-Layer-Konflikte.
Content Security Policy (CSP)
XSS-Schutz durch kontrolliertes Script-Loading — next.config.ts headers() und Middleware-Konfiguration.
HTTP Strict Transport Security
HTTPS erzwingen und SSL-Stripping verhindern — next.config.ts headers() für Strict-Transport-Security.
Sichere Cookie-Konfiguration
HttpOnly, Secure, SameSite Flags — Cookie-Flags über Next.js Middleware und API Routes.
Permissions Policy
Browser-APIs wie Kamera und Mikrofon kontrollieren — next.config.ts headers() für Permissions-Policy.
Clickjacking-Schutz
X-Frame-Options und frame-ancestors — next.config.ts headers() Konfiguration.
Referrer-Policy
Referrer-Informationen kontrollieren — next.config.ts headers() für Referrer-Policy.
X-Content-Type-Options
MIME-Sniffing verhindern — next.config.ts headers() für X-Content-Type-Options.
Cross-Origin Headers
CORP, COEP und COOP gegen Spectre-Angriffe — Cross-Origin Isolation über next.config.ts headers().
Subresource Integrity
Hash-Prüfung externer Scripts — SRI-Integration über Next.js Script Component.
security.txt
Standardisierte Kontaktdatei für Sicherheitsforscher — security.txt über public/ Verzeichnis oder API Route.
TLS & Zertifikate
TLS 1.3 aktivieren, Cipher Suites konfigurieren, OCSP Stapling einrichten.
Cache-Control
Sicherheitsrelevante Cache-Direktiven — no-store für API Routes und dynamische Seiten über headers().
Reporting API
Report-To über next.config.ts headers() und API Route.
Clear-Site-Data
Browser-Daten beim Logout sicher löschen — API Route mit Response Header für Logout.
Erweiterte Header
HTTPS-Redirects, WWW-Normalisierung über redirects() in next.config.ts.
In 3 Schritten zur sicheren Next.js-Konfiguration
Status prüfen
Starten Sie mit dem kostenlosen Web Security Check. 166 Prüfpunkte zeigen Ihnen in Sekunden, welche Header fehlen und wo Handlungsbedarf besteht.
Einfache Header zuerst
Beginnen Sie mit HSTS, X-Content-Type-Options und Referrer-Policy — diese drei Header sind in 5 Minuten konfiguriert und bringen sofort eine deutlich bessere Note.
CSP als Krönung
Die Content Security Policy ist der wirksamste aber auch komplexeste Header. Unsere Anleitung führt Sie durch Report-Only-Modus, Violation-Analyse und Enforcement — Schritt für Schritt.
Nicht Next.js? Andere Anleitungen verfügbar
Webserver
CMS & Shop-Systeme
Frameworks & Sprachen
Hosting-Anbieter
Wie sicher ist Ihre Website?
Prüfen Sie es jetzt — kostenlos, ohne Registrierung, mit 166 Prüfpunkte.
Häufig gestellte Fragen
Wo konfiguriere ich Security Headers in Next.js?
In der next.config.ts über die headers()-Funktion für statische Header. Für dynamische Header (CSP-Nonces) verwenden Sie Middleware. Bei Vercel-Hosting alternativ über vercel.json — aber next.config.ts hat Vorrang.
Warum werden meine Next.js-Header nicht angezeigt?
Häufigste Ursache: Bei Vercel überschreiben Edge-Funktionen die next.config.ts-Header. Prüfen Sie die Reihenfolge: Middleware-Header überschreiben next.config.ts-Header. Zweite Ursache: Bei Custom Server (Express) müssen Header VOR dem Next.js-Handler gesetzt werden.
Brauche ich alle Security Headers gleichzeitig?
Nein. Beginnen Sie mit den einfachen Headern (HSTS, X-Content-Type-Options, Referrer-Policy — zusammen 5 Minuten) und arbeiten Sie sich zu CSP vor. Unsere Anleitungen sind nach Schwierigkeit sortiert.
Kann ich Security Headers testen ohne die Live-Site zu gefährden?
Ja. CSP bietet einen Report-Only-Modus der Violations protokolliert ohne zu blockieren. Für alle anderen Header: Testen Sie auf einer Staging-Umgebung oder nutzen Sie den kostenlosen Wolf-Agents Web Security Check zur Validierung.
Funktionieren die Anleitungen mit dem App Router?
Ja. Alle Anleitungen funktionieren mit dem App Router (ab Next.js 13+) und dem Pages Router. Die Middleware-Methode für dynamische Header wie CSP-Nonces ist App-Router-nativ und die empfohlene Methode seit Next.js 14.