CSP Nonce in Nuxt: Inline Scripts sicher erlauben

TL;DR: Content Security Policy blockiert standardmäßig Inline-Scripts – und bricht damit viele Nuxt-Apps. Jakub Andrzejewski vom Nuxt Ecosystem Team zeigt, wie CSP Nonces dieses Dilemma lösen, ohne die Sicherheit zu opfern.

Inline-Scripts sind in Nuxt-Anwendungen unvermeidbar: Vue-Hydration, <script setup> und serverseitig gerenderte Daten landen alle als Inline-Code im HTML. Eine strict Content Security Policy (CSP) blockiert genau das – und schützt damit vor XSS-Angriffen, macht aber gleichzeitig die App unbrauchbar. Das klassische Workaround 'unsafe-inline' hebelt den Schutz vollständig aus. CSP Nonces sind der saubere Mittelweg: Ein kryptografisch sicheres, einmaliges Token wird serverseitig pro Request generiert, im CSP-Header bekannt gemacht und in alle erlaubten <script>-Tags injiziert. Angreifer-Skripte ohne dieses Token werden vom Browser blockiert.

Was ist neu?

Andrzejewski beschreibt in seinem Artikel die manuelle Node.js-Implementierung als Ausgangspunkt und stellt dann das @nuxtjs/security-Modul als vollautomatische Alternative vor. Nach der Installation via npx nuxi@latest module add security genügen wenige Zeilen in der nuxt.config.ts, um die Nonce-Generierung zu aktivieren. Das Modul übernimmt danach die komplette Arbeit: Es generiert den Nonce serverseitig pro Request, setzt den korrekten CSP-Header und injiziert das Token automatisch in alle Nuxt-internen Inline-Scripts – inklusive Vue-Hydration und Setup-Code. Für eigene Inline-Scripts steht das Composable useNonce() bereit, das von nuxt-security automatisch bereitgestellt wird. Der manuelle Weg ist fehleranfällig; vergisst man ein einzelnes <script>-Tag, blockiert die CSP ohne offensichtliche Fehlermeldung.

Was bedeutet das für Vue- und Nuxt-Entwickler?

Für Vue-3-Projekte mit Nuxt ist CSP Nonce die empfohlene Strategie, um Inline-Script-Anforderungen und Sicherheitsanforderungen zu vereinbaren – gerade in Enterprise-Umgebungen, wo Sicherheits-Audits zunehmend auf strict CSP-Header bestehen. Das nuxt-security-Modul nimmt den größten Implementierungsaufwand ab und reduziert das Risiko von Konfigurationsfehlern erheblich. Wer 'unsafe-inline' noch in seiner CSP verwendet, sollte die Migration ernsthaft in Betracht ziehen: Der Wechsel zu Nonces ist mit dem Modul überschaubar und der Sicherheitsgewinn signifikant.

Quellen & Weiterführende Links

• 📰 Original-Artikel – Jakub Andrzejewski auf DEV.to
• 📚 Nuxt Security Modul – Offizielle Docs
• 📚 MDN – CSP script-src nonce
• 🎓 Workshops & Kurse (verifiziert via API):
  • Nuxt.js 3 Intensiv-Schulung — Rendering-Modi, Routing, Composables und Nitro praxisnah in einem realen Projekt
  • Vue.js: Modul 1 – Komponenten, Reaktivität & Schnittstellen — Solide Vue-3-Grundlagen als Basis für sichere Nuxt-Anwendungen