Security-Header-Architektur für Nuxt 3
Drei Konfigurationswege im Vergleich: nuxt-security Modul, routeRules in nuxt.config.ts und Nitro Server Middleware — von einfach bis maximal flexibel.
Architektur-Überblick für Nuxt 3
Nuxt 3 basiert auf dem Nitro Server Engine und Vue 3. Für Security Headers stehen drei Konfigurationswege zur Verfügung: das nuxt-security Modul für umfassende Defaults mit automatischen Nonces, routeRules in nuxt.config.ts für statische Header, und Nitro Server Middleware für maximale Kontrolle über dynamische Header.
Der Wolf-Agents Web Security Check bewertet Ihre Nuxt-Konfiguration anhand von 166 Prüfpunkten und zeigt genau, welche Header fehlen. In der Praxis erreichen Nuxt-Anwendungen mit dem nuxt-security Modul die höchsten Bewertungen, weil das Modul automatisch alle wichtigen Header mit sicheren Defaults setzt.
nuxt-security Modul installieren (empfohlen)
Das nuxt-security Modul ist der empfohlene Weg für alle Security Headers in Nuxt 3. Es setzt automatisch CSP, HSTS, X-Frame-Options, X-Content-Type-Options, Referrer-Policy und Permissions-Policy mit sicheren Defaults. Installation: npx nuxi module add nuxt-security.
// nuxt.config.ts — nuxt-security Modul (empfohlen)
export default defineNuxtConfig({
modules: ['nuxt-security'],
security: {
headers: {
contentSecurityPolicy: {
'default-src': ["'self'"],
'script-src': ["'self'", "'nonce-{{nonce}}'", "'strict-dynamic'"],
'style-src': ["'self'", "'unsafe-inline'"],
'img-src': ["'self'", "data:"],
'object-src': ["'none'"],
'base-uri': ["'self'"],
},
strictTransportSecurity: 'max-age=31536000; includeSubDomains; preload',
xFrameOptions: 'DENY',
xContentTypeOptions: 'nosniff',
referrerPolicy: 'strict-origin-when-cross-origin',
permissionsPolicy: {
'camera': ["()"],
'microphone': ["()"],
'geolocation': ["()"],
},
},
nonce: true,
},
})Das nuxt-security Modul übernimmt Nonce-Generierung, CSP-Header, Rate-Limiting und CORS automatisch. Manuelle routeRules-Header werden vom Modul überschrieben — verwenden Sie entweder das Modul oder routeRules, nicht beides gleichzeitig.
routeRules für statische Header
Wenn Sie kein zusätzliches Modul verwenden möchten, setzen Sie statische Security Headers über routeRules in nuxt.config.ts. Dieser Ansatz ist einfach, deklarativ und funktioniert mit allen Nitro-Presets — aber ohne automatische Nonces.
// nuxt.config.ts — routeRules (ohne Modul)
export default defineNuxtConfig({
routeRules: {
'/**': {
headers: {
'Strict-Transport-Security': 'max-age=31536000; includeSubDomains; preload',
'X-Frame-Options': 'DENY',
'X-Content-Type-Options': 'nosniff',
'Referrer-Policy': 'strict-origin-when-cross-origin',
'Permissions-Policy': 'camera=(), microphone=(), geolocation=()',
},
},
},
})'unsafe-inline' für script-src — deutlich weniger sicher. Nitro Server Middleware für dynamische Header
Für maximale Kontrolle implementieren Sie Security Headers als Nitro Server Middleware in server/middleware/. Dieser Ansatz ermöglicht dynamische Nonce-Generierung pro Request und bedingte Header-Logik.
// server/middleware/security.ts — Nitro Server Middleware
import crypto from 'node:crypto';
export default defineEventHandler((event) => {
const nonce = crypto.randomBytes(16).toString('base64');
event.context.nonce = nonce;
setHeaders(event, {
'Content-Security-Policy':
`default-src 'self'; script-src 'self' 'nonce-${nonce}' 'strict-dynamic'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; object-src 'none'; base-uri 'self'; form-action 'self'`,
'Strict-Transport-Security': 'max-age=31536000; includeSubDomains; preload',
'X-Frame-Options': 'DENY',
'X-Content-Type-Options': 'nosniff',
'Referrer-Policy': 'strict-origin-when-cross-origin',
'Permissions-Policy': 'camera=(), microphone=(), geolocation=()',
});
})Nitro Server Middleware läuft bei jedem Request — auch bei API-Routen. Wenn Sie Header nur für HTML-Seiten setzen möchten, prüfen Sie event.path oder verwenden Sie routeRules mit spezifischen Pfadmustern.
Header verifizieren
Starten Sie den Nuxt-Dev-Server und prüfen Sie die gesetzten Header. Beachten Sie, dass der Dev-Server andere Header setzen kann als der Produktiv-Build — testen Sie daher immer auch den Production-Build.
# Production-Build erstellen und starten
npx nuxi build
node .output/server/index.mjs
# Header prüfen
curl -sI https://ihre-domain.de | grep -iE "(strict-transport|content-security|x-frame|x-content|referrer|permissions)"
# Erwartete Ausgabe:
# Strict-Transport-Security: max-age=31536000; includeSubDomains; preload
# Content-Security-Policy: default-src 'self'; script-src 'self' 'nonce-...'
# X-Frame-Options: DENY
# X-Content-Type-Options: nosniff
# Referrer-Policy: strict-origin-when-cross-origin
# Permissions-Policy: camera=(), microphone=(), geolocation=()Häufige Fehler
nuxt-security überschreibt routeRules
Das nuxt-security Modul hat Vorrang vor manuellen routeRules-Headern. Konfigurieren Sie Header entweder über das Modul oder über routeRules — nicht beides gleichzeitig für denselben Header.
SSG hat keine Server-Header
nuxt generate erzeugt statische Dateien ohne Node-Server. HTTP-Header müssen dann auf Hosting-Ebene (Vercel, Netlify, Nginx) konfiguriert werden. routeRules greifen nur bei SSR.
Middleware läuft nicht bei Client-Navigation
Nitro Server Middleware wird nur bei initialen Requests ausgeführt. Client-seitige Navigation (Vue Router) sendet keine neuen HTTP-Header. Das ist bei Security Headers kein Problem — sie gelten für die gesamte Sitzung.
Dev-Server hat andere Header als Production
Der nuxi dev-Server setzt andere Header als nuxi build + Node. Testen Sie Security Headers immer mit dem Production-Build: npx nuxi build && node .output/server/index.mjs.
Compliance-Relevanz
Eine konsolidierte Security-Header-Architektur vereinfacht Audits und Compliance-Nachweise. PCI DSS 4.0 fordert die Kontrolle aller auf Zahlungsseiten geladenen Scripts — eine zentrale Header-Konfiguration dokumentiert dies nachvollziehbar. NIS2 verlangt technische Maßnahmen zur Cybersicherheit — der Wolf-Agents Web Security Check bewertet alle Header in einem Report und liefert den Compliance-Nachweis.
Wie steht Ihre Domain bei Implementierungs-Architektur?
Prüfen Sie es jetzt — kostenlos, ohne Registrierung, mit 166 Prüfpunkte.