Subresource Integrity für Nuxt 3
Schritt-für-Schritt: SRI-Hashes für externe Scripts und Stylesheets in Nuxt 3 — per useHead() Composable und Nitro-Plugin.
Subresource Integrity in Nuxt 3
Subresource Integrity (SRI) stellt sicher, dass externe Ressourcen von CDNs oder Drittanbietern nicht manipuliert wurden. Der Browser berechnet einen kryptografischen Hash der heruntergeladenen Datei und vergleicht ihn mit dem im HTML hinterlegten Wert. Bei Abweichung wird die Ressource blockiert. SRI ist mit 15 von 166 Punkten ein gewichtiger Faktor im Wolf-Agents Web Security Check.
In Nuxt 3 setzen Sie SRI-Hashes per useHead() Composable für externe Scripts und Stylesheets. Für automatische SRI-Generierung bei Inline-Scripts implementieren Sie ein Nitro-Plugin, das Hashes zur Render-Zeit berechnet. Wichtig: useHead() setzt HTML-Attribute wie integrity und crossorigin korrekt in den gerenderten Output — im Gegensatz zu HTTP-Headern, die per routeRules oder Middleware gesetzt werden.
SRI-Hash generieren
Generieren Sie einen SHA-384-Hash für jede externe Ressource. Der Hash muss bei jeder Aktualisierung der Ressource neu berechnet werden. Verwenden Sie versionierte CDN-URLs (z.B. lib@3.2.1.js) statt latest, damit sich der Hash nicht unerwartet ändert.
# SRI-Hash für externe Ressource generieren (SHA-384)
curl -s https://cdn.example.com/lib.js | \
openssl dgst -sha384 -binary | \
openssl base64 -A
# Ergebnis: oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K...
# Alternative mit shasum (auf macOS vorinstalliert)
curl -s https://cdn.example.com/lib.js | \
shasum -a 384 -b | \
xxd -r -p | \
base64SHA-384 bietet das beste Verhältnis aus Sicherheit und Performance. SHA-256 ist ebenfalls gültig. SHA-512 ist überdimensioniert für SRI. Verwenden Sie den Präfix sha384- vor dem Base64-Hash.
SRI per useHead() einbinden
Verwenden Sie das useHead() Composable, um externe Scripts und Stylesheets mit integrity- und crossorigin-Attributen zu laden. Alternativ können Sie SRI-Attribute direkt im Template setzen.
// app.vue oder beliebige Nuxt-Komponente
useHead({
script: [
{
src: 'https://cdn.example.com/lib.js',
integrity: 'sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K...',
crossorigin: 'anonymous',
},
],
link: [
{
rel: 'stylesheet',
href: 'https://cdn.example.com/styles.css',
integrity: 'sha384-abc123def456...',
crossorigin: 'anonymous',
},
],
})<!-- Im Nuxt-Template: SRI direkt im HTML -->
<template>
<div>
<script
src="https://cdn.example.com/analytics.js"
integrity="sha384-oqVuAfXRKap7fdg..."
crossorigin="anonymous"
defer
></script>
</div>
</template>SRI erfordert das crossorigin="anonymous"-Attribut bei Ressourcen von fremden Domains. Ohne dieses Attribut ignoriert der Browser den integrity-Hash komplett — die Prüfung findet nicht statt.
Automatische SRI per Nitro-Plugin (fortgeschritten)
Für automatische SRI-Generierung bei Inline-Scripts implementieren Sie ein Nitro-Plugin. Das Plugin berechnet SHA-384-Hashes zur Render-Zeit und fügt integrity-Attribute ein. Dies ist besonders nützlich, wenn Nuxt Inline-Scripts für Hydration generiert.
// server/plugins/sri.ts — SRI-Hashes zur Render-Zeit berechnen
import crypto from 'node:crypto';
export default defineNitroPlugin((nitro) => {
nitro.hooks.hook('render:html', (html) => {
// Inline-Scripts mit SRI-Hash versehen
html.head = html.head.map((tag) => {
if (tag.includes('<script') && !tag.includes('src=')) {
const match = tag.match(/<script[^>]*>([\s\S]*?)<\/script>/);
if (!match) return tag;
const content = match[1];
const hash = crypto.createHash('sha384')
.update(content).digest('base64');
return tag.replace(
'<script',
`<script integrity="sha384-${hash}"`
);
}
return tag;
});
});
})Verifizierung
Erstellen Sie einen Production-Build und prüfen Sie die SRI-Attribute im gerenderten HTML. Der Dev-Server kann Scripts anders behandeln als der Produktiv-Build. Testen Sie immer mit nuxi build. Der Wolf-Agents Web Security Check prüft automatisch, ob externe Ressourcen SRI-Hashes verwenden.
# Production-Build erstellen und starten
npx nuxi build
node .output/server/index.mjs
# HTML-Quelltext auf integrity-Attribute prüfen
curl -s https://ihre-domain.de | grep -o 'integrity="[^"]*"'
# Erwartete Ausgabe:
# integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K..."
# Cache leeren nach Änderungen
npx nuxi cleanup && npx nuxi devHäufige Fehler
Hash stimmt nach CDN-Update nicht
Wenn das CDN die Datei aktualisiert, ändert sich der Hash. SRI blockiert die Ressource. Nutzen Sie versionierte URLs (lib@3.2.1) statt latest und aktualisieren Sie den Hash bei jedem Dependency-Update.
crossorigin-Attribut fehlt bei useHead()
Ohne crossorigin: 'anonymous' im useHead()-Objekt ignoriert der Browser den integrity-Hash bei Cross-Origin-Ressourcen. Nuxt setzt das Attribut nicht automatisch — Sie müssen es explizit angeben.
SRI mit CSP strict-dynamic inkompatibel
Wenn Ihre CSP 'strict-dynamic' verwendet (z.B. über nuxt-security), werden SRI-Hashes in der script-src-Direktive ignoriert. strict-dynamic vertraut nur Nonces. SRI-Hashes im HTML-Attribut funktionieren weiterhin für die Integritätsprüfung.
SSG-Build generiert andere Hashes als Dev
Bei nuxt generate können Inline-Scripts abweichen. Das Nitro-Plugin für SRI-Hashes funktioniert nur im SSR-Modus. Bei SSG müssen SRI-Hashes für externe Ressourcen manuell im Template gesetzt werden.
Compliance-Relevanz
PCI DSS 4.0 (Anforderung 6.4.3) fordert ab März 2025 Integritätsprüfungen für alle Scripts auf Zahlungsseiten. SRI erfüllt diese Anforderung direkt und ist die einfachste Implementierung. NIS2 (Artikel 21) verlangt Supply-Chain-Sicherheit und Integritätsprüfungen für Drittanbieter-Code. BSI IT-Grundschutz (APP.3.1) empfiehlt den Einsatz von Integritätskontrollen für externe Ressourcen. Der Wolf-Agents Web Security Check bewertet SRI mit bis zu 15 Punkten und prüft automatisch, ob externe Scripts und Stylesheets integrity-Attribute verwenden.
Wie steht Ihre Domain bei Subresource Integrity?
Prüfen Sie es jetzt — kostenlos, ohne Registrierung, mit 166 Prüfpunkte.