Nuxt 3 — Alle Security-Header-Anleitungen
Schritt-für-Schritt-Anleitungen für jeden Security Header in Nuxt 3. routeRules, nuxt-security Modul und Nitro Server Middleware — von HSTS in 5 Minuten bis CSP mit Nonces.
Security Headers in Nuxt 3 — drei Konfigurationswege
Nuxt 3 basiert auf dem Nitro Server Engine und Vue 3. Das Framework
bietet drei Wege zur Header-Konfiguration: routeRules in nuxt.config.ts
für statische Header, das nuxt-security Modul für umfassende Security-Defaults mit
automatischen Nonces, und Nitro Server Middleware in server/middleware/
für maximale Kontrolle über dynamische Header.
Das nuxt-security Modul ist der empfohlene Weg: Es setzt alle wichtigen Security
Headers mit sinnvollen Defaults, generiert CSP-Nonces automatisch und lässt sich vollständig über
nuxt.config.ts konfigurieren. Der Wolf-Agents Web Security Check bewertet Ihre
Konfiguration anhand von 166 Prüfpunkten und zeigt genau, wo Handlungsbedarf besteht.
Wichtig: Bei statischem Output (nuxt generate) gibt es keinen
Node-Server, der HTTP-Header setzen könnte. Header müssen dann auf Hosting-Ebene (Vercel, Netlify,
Nginx) konfiguriert werden. Unsere Anleitungen behandeln beide Szenarien — SSR mit Nitro und
SSG mit Hosting-Konfiguration.
Nuxt-3-Anleitungen nach Thema
Jede Anleitung erklaert einen Security Header Schritt für Schritt — mit Nuxt-spezifischen Konfigurationen für routeRules, nuxt-security und Nitro Server Middleware. Die Punkte zeigen den Einfluss auf Ihre Web Security Note.
Implementierungs-Architektur
Alle Security Headers zentral in einer Nitro Server Middleware — konsolidierte Architektur für Nuxt 3 mit nuxt-security und routeRules.
Content Security Policy (CSP)
XSS-Schutz mit nuxt-security Modul und automatischen Nonces oder per routeRules in nuxt.config.ts.
HTTP Strict Transport Security
HTTPS erzwingen per routeRules oder nuxt-security — inklusive Preload und Nitro-Server-Konfiguration.
Sichere Cookie-Konfiguration
useCookie() Composable mit Secure, HttpOnly und SameSite — Server-seitig über setCookie() in Event Handlern.
Permissions Policy
Browser-APIs einschränken per routeRules oder nuxt-security — Kamera, Mikrofon, Geolocation sperren.
Clickjacking-Schutz
X-Frame-Options und frame-ancestors per routeRules — nuxt-security setzt den Header automatisch.
Referrer-Policy
Referrer-Informationen kontrollieren per routeRules oder Nitro Server Middleware.
X-Content-Type-Options
MIME-Sniffing verhindern per routeRules — nuxt-security setzt nosniff automatisch.
Cross-Origin Headers
CORP, COEP und COOP gegen Spectre-Angriffe — routeRules-Konfiguration mit crossOriginIsolated.
Subresource Integrity
Hash-Prüfung externer Scripts per useHead() und Nitro-Plugin für automatische SRI-Generierung.
security.txt
Kontaktdatei unter public/.well-known/ — Nitro serviert die Datei automatisch.
TLS & Zertifikate
TLS-Konfiguration auf Hosting-Ebene — Nuxt kontrolliert kein TLS direkt, HSTS per routeRules.
Cache-Control
Sicherheitsrelevante Cache-Direktiven per routeRules — /_nuxt/ Assets automatisch gecached.
Reporting API
Report-To und Reporting-Endpoints per Nitro Server Middleware — CSP-Violations dauerhaft erfassen.
Clear-Site-Data
Browser-Daten beim Logout löschen über Nitro API Route mit setHeader().
Erweiterte Header
Origin-Agent-Cluster, HTTPS-Redirects, Resource Isolation Policy und X-DNS-Prefetch-Control.
In 3 Schritten zur sicheren Nuxt-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.
nuxt-security installieren
Installieren Sie das nuxt-security Modul
mit npx nuxi module add nuxt-security. Es setzt automatisch HSTS,
X-Content-Type-Options, Permissions-Policy und weitere Header mit sinnvollen Defaults.
CSP mit Nonces konfigurieren
Die Content Security Policy konfigurieren Sie über das nuxt-security Modul mit automatischer Nonce-Generierung. Unsere Anleitung führt Sie Schritt für Schritt von Report-Only bis Enforcement.
Nicht Nuxt? 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 Nuxt 3?
Es gibt drei Wege: Per routeRules in nuxt.config.ts für statische Header, über das nuxt-security Modul (empfohlen) für umfassende Security-Defaults, oder per Nitro Server Middleware in server/middleware/ für dynamische Header wie CSP-Nonces.
Was ist das nuxt-security Modul?
Das nuxt-security Modul ist ein Community-Modul, das automatisch alle wichtigen Security Headers mit sinnvollen Defaults setzt — CSP, HSTS, X-Frame-Options, Permissions-Policy und mehr. Es unterstützt Nonce-basierte CSP und lässt sich vollständig über nuxt.config.ts konfigurieren. Installation: npx nuxi module add nuxt-security.
Funktionieren routeRules-Header auch bei nuxt generate (SSG)?
Nein. Bei statischem Output (nuxt generate) gibt es keinen Node-Server, der HTTP-Header setzen könnte. Die Header müssen dann auf dem Hosting-Anbieter (Vercel, Netlify, Nginx) konfiguriert werden. routeRules-Header funktionieren nur bei node-server oder nitro-presets mit Server-Runtime.
Wie generiere ich CSP-Nonces in Nuxt 3?
Das nuxt-security Modul generiert automatisch Nonces pro Request und injiziert sie in Script- und Style-Tags. Alternativ können Sie in server/middleware/csp.ts manuell einen Nonce generieren, ihn per event.context.nonce weitergeben und in useHead() verwenden.
Was ist der Unterschied zwischen routeRules und Nitro Server Middleware?
routeRules in nuxt.config.ts setzen statische Header deklarativ — einfach und wartbar. Nitro Server Middleware (server/middleware/) läuft als Code bei jedem Request und kann Header dynamisch generieren (z.B. Nonces). Für statische Header wie HSTS sind routeRules ideal, für dynamische Header wie CSP mit Nonces die Middleware.