CSP für Nuxt 3 konfigurieren
Schritt-für-Schritt-Anleitung: Content Security Policy in Nuxt 3 einrichten — mit nuxt-security Modul und automatischen Nonces, von Report-Only bis Enforcement.
Content Security Policy in Nuxt 3
Content Security Policy (CSP) ist der wichtigste HTTP-Security-Header gegen Cross-Site Scripting (XSS). Er teilt dem Browser mit, welche Ressourcen geladen werden dürfen — und blockiert alles andere. CSP ist mit 35 von 166 Punkten der einflussreichste Header im Wolf-Agents Web Security Check.
In Nuxt 3 gibt es drei Wege zur CSP-Konfiguration: das nuxt-security Modul generiert automatisch Nonces pro Request und ist der empfohlene Ansatz. Alternativ setzen routeRules eine statische CSP, und Nitro Server Middleware bietet maximale Kontrolle über dynamische Header.
CSP mit nuxt-security konfigurieren
Das nuxt-security Modul ist der sicherste Weg für CSP in Nuxt 3. Es generiert automatisch kryptografische Nonces pro Request und injiziert sie in Script-Tags. Installation: npx nuxi module add nuxt-security. Starten Sie im Report-Only-Modus, um Violations zu erkennen.
// nuxt.config.ts — CSP mit nuxt-security (empfohlen)
export default defineNuxtConfig({
modules: ['nuxt-security'],
security: {
nonce: true,
headers: {
contentSecurityPolicy: {
'default-src': ["'self'"],
'script-src': [
"'self'",
"'nonce-{{nonce}}'",
"'strict-dynamic'",
],
'style-src': ["'self'", "'unsafe-inline'"],
'img-src': ["'self'", "data:"],
'font-src': ["'self'"],
'connect-src': ["'self'"],
'object-src': ["'none'"],
'base-uri': ["'self'"],
'form-action': ["'self'"],
'frame-ancestors': ["'self'"],
},
},
},
})'nonce-{{nonce}}'? nuxt-security ersetzt {{nonce}} automatisch durch einen echten kryptografischen Nonce bei jedem Request. 'strict-dynamic' erlaubt Scripts, die von einem Nonce-autorisierten Script geladen werden — ideal für Vue-Hydration.
Violations analysieren und CSP anpassen
Öffnen Sie die Browser DevTools (F12) und die Console. CSP-Violations erscheinen als Warnungen mit der blockierten Ressource und der verletzten Direktive. Passen Sie die CSP-Konfiguration in nuxt.config.ts an, bis keine unerwarteten Violations mehr auftreten.
| Violation | Lösung in nuxt.config.ts |
|---|---|
| Vue-Hydration blockiert | 'strict-dynamic' in script-src + nonce: true |
| Google Fonts blockiert | fonts.googleapis.com in style-src, fonts.gstatic.com in font-src |
| API-Calls blockiert | API-Domain zu connect-src hinzufügen |
| Analytics blockiert | Analytics-Domain zu script-src und connect-src |
| iframe-Einbettung blockiert | *.youtube.com in frame-src hinzufügen |
Alternative: Nitro Server Middleware
Für maximale Kontrolle über die CSP setzen Sie den Header per Nitro Server Middleware. Dieser Ansatz erlaubt bedingte Logik — beispielsweise unterschiedliche CSP-Policies für verschiedene Routen.
// server/middleware/csp.ts — manuelle Nonces
import crypto from 'node:crypto';
export default defineEventHandler((event) => {
const csrNonce = crypto.randomBytes(16).toString('base64');
event.context.nonce = csrNonce;
setHeader(event,
'Content-Security-Policy',
[
"default-src 'self'",
"script-src 'self' 'nonce-" + csrNonce + "' 'strict-dynamic'",
"style-src 'self' 'unsafe-inline'",
"img-src 'self' data:",
"font-src 'self'",
"connect-src 'self'",
"object-src 'none'",
"base-uri 'self'",
"form-action 'self'",
].join('; ')
);
})// nuxt.config.ts — statische CSP ohne Nonces
export default defineNuxtConfig({
routeRules: {
'/**': {
headers: {
'Content-Security-Policy':
"default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; object-src 'none'; base-uri 'self'",
},
},
},
})'unsafe-inline' in script-src ist deutlich weniger sicher als Nonce-basierte CSP. Verwenden Sie routeRules nur als Fallback für SSG-Deployments. CSP verifizieren
Erstellen Sie einen Production-Build und prüfen Sie den CSP-Header. Der Wolf-Agents Web Security Check analysiert Ihre CSP detailliert — inklusive Nonce-Erkennung, Direktiven-Bewertung und strict-dynamic-Support.
# Production-Build und Header prüfen
npx nuxi build
node .output/server/index.mjs
curl -sI https://ihre-domain.de | grep -i content-security
# Erwartete Ausgabe:
# Content-Security-Policy: default-src 'self'; script-src 'self' 'nonce-abc123...' 'strict-dynamic'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self'; connect-src 'self'; object-src 'none'; base-uri 'self'; form-action 'self'; frame-ancestors 'self'Häufige Fehler bei CSP in Nuxt 3
useHead() setzt kein HTTP-Header
useHead() setzt <meta http-equiv>-Tags — keine echten HTTP-Header. Meta-CSP unterstützt kein frame-ancestors und kein report-uri. Verwenden Sie immer Server-seitige Header.
nuxt-security überschreibt manuelle Header
Wenn nuxt-security aktiv ist, überschreibt es routeRules-CSP-Header. Konfigurieren Sie CSP ausschließlich über das security-Objekt in nuxt.config.ts.
SSG-Build hat keine Server-CSP
nuxt generate erzeugt statische HTML-Dateien. CSP-Header müssen auf dem Hosting-Anbieter (Vercel vercel.json, Netlify _headers) konfiguriert werden.
Nonce fehlt bei dynamischen Scripts
Scripts, die per document.createElement('script') eingefügt werden, erhalten keinen Nonce. 'strict-dynamic' löst das Problem — es erlaubt Scripts, die von Nonce-autorisierten Scripts geladen werden.
Compliance-Relevanz
PCI DSS 4.0 (Anforderung 6.4.3) fordert ab März 2025 die Kontrolle aller auf Zahlungsseiten geladenen Scripts — eine Nonce-basierte CSP erfüllt diese Anforderung. NIS2 verlangt technische Maßnahmen zur Cybersicherheit — CSP ist der wirksamste Schutz gegen XSS-Angriffe. Der Wolf-Agents Web Security Check bewertet CSP mit bis zu 35 Punkten und dokumentiert den Umsetzungsstand.
Wie steht Ihre Domain bei Content Security Policy?
Prüfen Sie es jetzt — kostenlos, ohne Registrierung, mit 166 Prüfpunkte.