SRI für Next.js konfigurieren
Schritt-für-Schritt-Anleitung: Externe Scripts mit next/script und integrity-Prop absichern, Layout-Komponente für Stylesheets einrichten und das Webpack-Plugin für automatische Hash-Generierung konfigurieren.
SRI in Next.js
Next.js generiert bei jedem Build automatisch Hashes für alle eigenen Bundles und Chunks — das ist ein großer Vorteil gegenüber anderen Stacks. Für externe CDN-Ressourcen müssen Sie jedoch selbst aktiv werden: next/script unterstützt das integrity-Prop direkt, und das webpack-subresource-integrity Plugin automatisiert die Hash-Generierung für den Build-Output.
SRI bringt 15 von 166 Punkten im Wolf-Agents Web Security Check. Diese Anleitung zeigt die Konfiguration in vier Schritten — von der einfachsten Methode mit next/script über die Layout-Komponente für Stylesheets bis zum vollautomatischen Webpack-Plugin für Produktions-Builds.
next/script für externe Scripts mit SRI
Die next/script-Komponente ist die empfohlene Methode, externe Scripts in Next.js einzubinden. Sie unterstützt das integrity-Prop direkt und leitet es als HTML-Attribut an das generierte <script>-Tag weiter. Wichtig: Das JSX-Prop heißt crossOrigin (camelCase) — ohne dieses Attribut kann der Browser den Hash nicht prüfen.
// pages/_app.tsx oder app/layout.tsx
import Script from 'next/script';
export default function RootLayout({ children }) {
return (
<html lang="de">
<body>
// Externes Script mit SRI absichern
<Script
src="https://cdn.example.com/analytics.js"
integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"
crossOrigin="anonymous"
strategy="afterInteractive"
/>
// Weiteres CDN-Script — gleiche Methode
<Script
src="https://cdn.example.com/tracking.js"
integrity="sha384-..."
crossOrigin="anonymous"
strategy="lazyOnload"
/>
{children}
</body>
</html>
);
}SRI funktioniert mit allen strategy-Werten: beforeInteractive, afterInteractive und lazyOnload. Wählen Sie die Strategie nach Performance-Anforderungen — für kritische Abhängigkeiten beforeInteractive, für Analytics und Tracking lazyOnload.
Layout-Komponente für Stylesheets mit SRI
Externe Stylesheets werden nicht über next/script, sondern über <link>-Tags im <head> eingebunden. In der App Router-Architektur gehören sie in die app/layout.tsx. Das crossOrigin-Prop muss ebenfalls in camelCase angegeben werden. Für <script>-Tags im <head> gilt dieselbe Schreibweise.
// app/layout.tsx — Externe Stylesheets mit SRI
import type { Metadata } from 'next';
export const metadata: Metadata = {
title: 'Meine App',
};
export default function RootLayout({ children }) {
return (
<html lang="de">
<head>
{/* Externes Stylesheet mit SRI */}
<link
rel="stylesheet"
href="https://cdn.example.com/styles.css"
integrity="sha384-7mAd4y5SCmwD3aKHQDtGurx9i0FY0hvRxqPEToMBRkBmZDVnTOeNLHkdvQ2y9A/n"
crossOrigin="anonymous"
/>
{/* Externes Script im <head> mit SRI */}
<script
src="https://cdn.example.com/lib.js"
integrity="sha384-..."
crossOrigin="anonymous"
defer
/>
</head>
<body>{children}</body>
</html>
);
}| Attribut (JSX) | HTML-Ausgabe | Pflicht? |
|---|---|---|
integrity | integrity="sha384-..." | Ja — ohne Hash kein SRI |
crossOrigin="anonymous" | crossorigin="anonymous" | Ja — ohne CORS kein Hash-Vergleich |
crossOrigin="use-credentials" | crossorigin="use-credentials" | Nur bei authentifizierten CDN-Anfragen |
curl -s https://cdn.example.com/styles.css | openssl dgst -sha384 -binary | openssl base64 -A — dann sha384- voranstellen. Nutzen Sie immer versionierte URLs, damit sich die Datei nicht ohne Ihr Wissen ändert. Webpack-Plugin für automatische Hash-Generierung
Das Plugin webpack-subresource-integrity berechnet beim Build automatisch SHA-384-Hashes für alle generierten Chunks und Bundle-Dateien und bettet sie als integrity-Attribute in die HTML-Ausgabe ein. Es läuft nur clientseitig (isServer: false) und nur in der Produktion — das verhindert Build-Overhead in der Entwicklung.
# Plugin installieren
npm install --save-dev webpack-subresource-integrity
# Alternativ mit yarn
yarn add --dev webpack-subresource-integrity// next.config.js — webpack-subresource-integrity Plugin
const { SubresourceIntegrityPlugin } = require('webpack-subresource-integrity');
module.exports = {
webpack: (config, { isServer }) => {
if (!isServer) {
// crossOriginLoading ist Voraussetzung für SRI
config.output.crossOriginLoading = 'anonymous';
config.plugins.push(
new SubresourceIntegrityPlugin({
hashFuncNames: ['sha384'],
enabled: process.env.NODE_ENV === 'production',
})
);
}
return config;
},
};crossOriginLoading: 'anonymous' in der Webpack-Konfiguration ist Voraussetzung für das Plugin. Ohne diese Einstellung generiert das Plugin zwar Hashes, der Browser kann die Ressourcen aber nicht laden, da CORS fehlt. SRI-Konfiguration verifizieren
Nach dem Production Build prüfen Sie, ob alle script- und link-Tags das integrity-Attribut enthalten. Fehlgeschlagene SRI-Checks erscheinen in der Browser-Konsole als Fehler — das ist das erwünschte Verhalten, wenn ein Hash nicht stimmt. Im Normalbetrieb sollten keine solchen Fehler auftreten.
# 1. Production Build erstellen
npm run build
# 2. HTML-Ausgabe prüfen — integrity-Attribute sollten sichtbar sein
# Im .next/server/pages/_document.html oder ähnlichen Artefakten
# 3. Hash für externe Datei manuell berechnen
curl -s https://cdn.example.com/analytics.js \
| openssl dgst -sha384 -binary \
| openssl base64 -A
# Ausgabe: oqVuAfXRKap7fdg... → integrity="sha384-oqVuAfXRKap7fdg..."
# 4. Browser DevTools: Konsole auf Integrity-Fehler prüfen
# Fehler: "Failed to find a valid digest in the 'integrity' attribute"
# bedeutet: Hash stimmt nicht — Datei geändert oder falscher HashÖffnen Sie DevTools (F12) → Network → laden Sie die Seite neu. Klicken Sie auf eine Script- oder CSS-Ressource und prüfen Sie im Headers-Tab unter Request Headers, ob origin gesendet wird (CORS aktiv). Im Elements-Tab sehen Sie, ob das integrity-Attribut im generierten HTML vorhanden ist.
Wie steht Ihre Domain bei Subresource Integrity?
Prüfen Sie es jetzt — kostenlos, ohne Registrierung, mit 166 Prüfpunkte.
Häufig gestellte Fragen
Unterstützt next/script das integrity-Prop?
Ja. Die next/script-Komponente leitet alle unbekannten Props als HTML-Attribute an das generierte script-Tag weiter. Sie können integrity und crossOrigin direkt als JSX-Props übergeben: <Script src="..." integrity="sha384-..." crossOrigin="anonymous" />. Das funktioniert mit allen strategy-Werten (beforeInteractive, afterInteractive, lazyOnload).
Warum heißt das Prop crossOrigin (mit großem O) und nicht crossorigin?
In JSX und React werden HTML-Attribute in camelCase geschrieben. Das HTML-Attribut crossorigin heißt in JSX crossOrigin. Next.js übersetzt das intern korrekt in das lowercase HTML-Attribut. Ohne crossOrigin="anonymous" kann der Browser den Inhalt der externen Datei nicht lesen und die Hash-Prüfung schlägt fehl.
Was macht das webpack-subresource-integrity Plugin genau?
Das Plugin berechnet beim Build SHA-384-Hashes für alle von Webpack generierten Chunks und Bundle-Dateien und fügt das integrity-Attribut in die generierten script- und link-Tags ein. So müssen Sie keine manuellen Hashes pflegen. Das Plugin läuft nur clientseitig (isServer: false) und nur in der Produktion.
Erzeugt Next.js SRI-Hashes für eigene Bundles automatisch?
Next.js selbst generiert keine SRI-Hashes ohne Plugin. Das webpack-subresource-integrity Plugin ergänzt diese Funktionalität. Für externe CDN-Ressourcen müssen Sie den Hash immer manuell berechnen (z.B. mit openssl dgst -sha384 -binary datei.js | openssl base64 -A) oder das SRI-Hash-Generator-Tool auf srihash.org nutzen.
Wie generiere ich einen SHA-384-Hash für eine externe Datei?
Entweder auf der Kommandozeile: curl -s https://cdn.example.com/lib.js | openssl dgst -sha384 -binary | openssl base64 -A — und dann sha384- voranstellen. Oder Sie nutzen srihash.org / developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity. Wichtig: Holen Sie die Datei zum Hash-Generieren von der exakt selben URL, die Sie auch einbinden.
Funktioniert SRI mit dynamisch geladenem Code (React.lazy, next/dynamic)?
Nein. SRI funktioniert nur für statisch im HTML deklarierte script- und link-Tags. Dynamisch per JavaScript geladene Bundles (next/dynamic, React.lazy) können nicht mit SRI gesichert werden — hier hilft das webpack-subresource-integrity Plugin für die initiale Bundle-Integrität. Für API-Aufrufe ist HTTPS + CORS die richtige Absicherung.
Was passiert, wenn sich eine CDN-Datei nach dem Hash-Generieren ändert?
Der Browser blockiert die Ressource und zeigt in der Konsole einen Integrity-Fehler. Das ist das erwünschte Verhalten — genau dieser Schutz soll verhindern, dass manipulierter Code ausgeführt wird. Lösung: Versionierte CDN-URLs verwenden (z.B. lib-3.2.0.min.js), Hash aktualisieren, neu deployen.