CSP für Next.js konfigurieren
Schritt-für-Schritt-Anleitung: Content Security Policy in Next.js einrichten, testen und aktivieren — mit next.config.ts und Middleware-Nonces.
Content Security Policy in Next.js
Next.js ist ein React-Framework mit eingebauter Middleware-Unterstützung, das sich ideal für dynamische CSP mit Nonces eignet. Anders als bei klassischen Webservern können Sie CSP in Next.js auf zwei Ebenen konfigurieren: statisch über next.config.ts (für einfache Policies) oder dynamisch über Middleware (für Nonce-basierte CSP). Der Middleware-Ansatz ist empfehlenswert, weil er pro Request einen frischen Nonce generiert und diesen über Headers an Server Components weitergibt.
CSP ist mit 35 von 166 Punkten der einflussreichste Header im Wolf-Agents Web Security Check. Diese Anleitung zeigt die Implementierung in vier Schritten: von der statischen Konfiguration in next.config.ts bis zur produktionsreifen Middleware mit Nonces.
Report-Only Modus starten
Beginnen Sie immer im Report-Only-Modus. Der Browser meldet CSP-Verstöße in der Konsole und an Ihren Reporting-Endpoint, blockiert aber keine Ressourcen. So können Sie die Policy in Ruhe anpassen, ohne dass Ihre Website für Besucher kaputt geht.
// next.config.ts
const securityHeaders = [
{
key: 'Content-Security-Policy-Report-Only',
value: "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'"
}
];
export default {
async headers() {
return [{
source: '/:path*',
headers: securityHeaders,
}];
},
};Die statische Konfiguration in next.config.ts eignet sich zum Testen. Für Nonces wechseln Sie in Schritt 4 zu Middleware — dort können Sie pro Request einen frischen Nonce generieren.
Violations analysieren und CSP anpassen
Öffnen Sie die Browser DevTools (F12) → Console. CSP-Violations erscheinen als Warnungen mit der blockierten Ressource und der verantwortlichen Direktive. Passen Sie die Policy an, bis keine unerwarteten Violations mehr auftreten.
| Violation | Lösung |
|---|---|
| Inline-Script blockiert | Nonce oder Hash hinzufügen (siehe Schritt 4) |
| Externe Bibliothek blockiert | Domain zu script-src hinzufügen |
| Google Fonts blockiert | fonts.googleapis.com → style-src, fonts.gstatic.com → font-src |
| Google Analytics blockiert | *.google-analytics.com *.googletagmanager.com → script-src |
| WebSocket blockiert | wss://domain.tld → connect-src |
| next/script blockiert | Nonce zu <Script>-Komponente hinzufügen |
| _next/static blockiert | 'self' deckt Next.js-eigene Assets ab |
next dev setzt eigene CSP-Header — testen Sie immer auch mit next build && next start. Enforcement aktivieren
Wenn keine unerwarteten Violations mehr auftreten, ändern Sie den Header-Namen. Ersetzen Sie Content-Security-Policy-Report-Only durch Content-Security-Policy — der Browser blockiert ab sofort nicht autorisierte Ressourcen.
// next.config.ts - Produktions-CSP
const securityHeaders = [
{
key: 'Content-Security-Policy',
value: [
"default-src 'self'",
"script-src 'self'",
"style-src 'self' 'unsafe-inline'",
"img-src 'self' data: https:",
"font-src 'self'",
"connect-src 'self'",
"frame-ancestors 'self'",
"object-src 'none'",
"base-uri 'self'",
"form-action 'self'",
].join('; '),
}
];
export default {
async headers() {
return [{
source: '/:path*',
headers: securityHeaders,
}];
},
};Reporting-Endpoints-Header bei, um auch im Enforcement-Modus Violations zu erfassen. Nonces per Middleware einrichten
Next.js Middleware generiert pro Request einen frischen Nonce und übergibt ihn per Header an Server Components. So können Sie 'unsafe-inline' aus Ihrer CSP entfernen und erreichen das höchste Sicherheitsniveau. Dieser Ansatz ersetzt die statische Konfiguration aus den vorherigen Schritten.
// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
export function middleware(request: NextRequest) {
const nonce = Buffer.from(crypto.randomUUID()).toString('base64');
const cspHeader = `
default-src 'self';
script-src 'self' 'nonce-${nonce}' 'strict-dynamic';
style-src 'self' 'nonce-${nonce}';
img-src 'self' data: https:;
font-src 'self';
object-src 'none';
base-uri 'self';
form-action 'self';
frame-ancestors 'self';
`.replace(/\s{2,}/g, ' ').trim();
const response = NextResponse.next();
response.headers.set('Content-Security-Policy', cspHeader);
response.headers.set('x-nonce', nonce);
return response;
}// In Ihren Komponenten:
import Script from 'next/script';
import { headers } from 'next/headers';
export default function Page() {
const nonce = headers().get('x-nonce') ?? '';
return <Script nonce={nonce} src="/script.js" />;
}Next.js Middleware läuft auf der Edge Runtime und generiert für jeden Request einen frischen Nonce. Der Nonce wird über den x-nonce Header an Server Components weitergegeben — so können Sie ihn in jeder Komponente verwenden.
Wie steht Ihre Domain bei Content Security Policy?
Prüfen Sie es jetzt — kostenlos, ohne Registrierung, mit 166 Prüfpunkte.