Subresource Integrity für Netlify konfigurieren
Schritt-für-Schritt-Anleitung: SRI-Hashes für externe Scripts generieren, Build-Pipeline einrichten und Netlify Large Media Kompatibilität sicherstellen.
Subresource Integrity auf Netlify
Subresource Integrity (SRI) stellt sicher, dass extern geladene Scripts und Stylesheets nicht manipuliert wurden. Der Browser vergleicht einen Hash-Wert im HTML mit dem tatsächlichen Inhalt der geladenen Datei. Stimmen die Hashes nicht überein, wird die Ressource blockiert. SRI ist mit 15 von 166 Punkten ein relevanter Faktor im Wolf-Agents Web Security Check.
Auf Netlify setzen Sie SRI-Attribute direkt in Ihren HTML-Templates. Für automatische SRI-Generierung nutzen Sie Netlify Build-Plugins oder Framework-spezifische Tools, die SRI-Hashes während des Build-Prozesses generieren und in HTML-Dateien einfügen.
Wichtig: Netlify Large Media transformiert Bilder on-the-fly — SRI funktioniert dort nicht, da sich der Inhalt bei jedem Request ändern kann. Verwenden Sie SRI ausschließlich für Scripts und Stylesheets, nicht für transformierte Medien.
SRI-Hashes manuell generieren
Fügen Sie integrity und crossorigin="anonymous" Attribute zu allen externen Script- und Link-Tags hinzu. Der Hash muss zum Inhalt der geladenen Datei passen. Verwenden Sie SHA-384 als Hash-Algorithmus — er bietet den besten Kompromiss aus Sicherheit und Kompatibilität.
<!-- SRI für externe Scripts -->
<script
src="https://cdn.example.com/lib.min.js"
integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"
crossorigin="anonymous"
></script>
<!-- SRI für Stylesheets -->
<link
rel="stylesheet"
href="https://cdn.example.com/style.css"
integrity="sha384-..."
crossorigin="anonymous"
/># SRI-Hash per Terminal generieren (SHA-384)
curl -s https://cdn.example.com/lib.min.js \
| openssl dgst -sha384 -binary \
| openssl base64 -A
# Oder mit shasum
curl -s https://cdn.example.com/lib.min.js \
| shasum -a 384 \
| awk '{print $1}' \
| xxd -r -p \
| base64
# Ergebnis als integrity-Attribut verwenden:
# integrity="sha384-<base64-hash>"Build-Pipeline und Edge Function
Für automatische SRI-Generierung integrieren Sie ein Build-Plugin in Ihre netlify.toml. Netlify unterstützt Community-Plugins, die SRI-Hashes während des Build-Prozesses generieren und in HTML-Dateien einfügen. Alternativ können Sie eine Edge Function nutzen, um SRI-Anforderungen per CSP-Direktive zu erzwingen.
# netlify.toml — Build-Pipeline mit SRI
[build]
command = "npm run build"
publish = "dist"
# Netlify Plugin für automatische SRI-Generierung
[[plugins]]
package = "netlify-plugin-sri"
# Oder manuell per Build-Script:
# package.json
# {
# "scripts": {
# "build": "astro build && node scripts/generate-sri.js"
# }
# }// netlify/edge-functions/sri-headers.ts
import type { Context } from "https://edge.netlify.com";
export default async (request: Request, context: Context) => {
const response = await context.next();
const contentType = response.headers.get("content-type") || "";
// Nur HTML-Responses verarbeiten
if (!contentType.includes("text/html")) {
return response;
}
// require-sri-for Header setzen (experimentell)
response.headers.set(
"Content-Security-Policy",
response.headers.get("Content-Security-Policy")
+ "; require-sri-for script style"
);
return response;
};
export const config = { path: "/*" };SRI verifizieren
Prüfen Sie in den Browser DevTools (Elements-Tab), ob alle externen Resources ein integrity-Attribut haben. SRI-Fehler erscheinen als Netzwerkfehler in der Console. Der Wolf-Agents Web Security Check testet automatisch, ob externe Scripts SRI-Attribute haben.
// SRI-Fehler erkennen (Browser Console):
// "Failed to find a valid digest in the 'integrity' attribute"
// → Hash stimmt nicht mit dem Dateiinhalt überein
// Alle Scripts mit SRI auflisten
document.querySelectorAll('script[integrity]').forEach(s =>
console.log(s.src, s.integrity)
);
// Alle Scripts OHNE SRI auflisten (potenzielle Lücken)
document.querySelectorAll('script[src]:not([integrity])').forEach(s =>
console.warn('Kein SRI:', s.src)
);
// Stylesheets mit SRI prüfen
document.querySelectorAll('link[rel="stylesheet"][integrity]').forEach(l =>
console.log(l.href, l.integrity)
);Der automatische Check unter wolf-agents.com/tools/web-security-check prüft SRI-Attribute für alle externen Scripts und Stylesheets und bewertet die Abdeckung mit bis zu 15 Punkten.
Häufige Fehler bei SRI auf Netlify
Netlify Large Media bricht SRI
Netlify Large Media transformiert Assets on-the-fly. Transformierte Dateien haben bei jedem Request unterschiedliche Inhalte — SRI-Hashes sind daher ungueltig. Verwenden Sie SRI nicht für Large-Media-Assets.
crossorigin fehlt
Ohne crossorigin="anonymous" wird SRI für Cross-Origin-Ressourcen ignoriert. Beide Attribute — integrity und crossorigin — müssen gesetzt sein, damit SRI greift.
CDN aktualisiert, Hash nicht
Wenn der CDN-Anbieter die Datei aktualisiert, stimmt der Hash nicht mehr. Nutzen Sie versionierte URLs (z.B. lib@2.0.0.min.js) statt latest. Pinnen Sie die exakte Version.
Build-Cache invalidiert Hashes
Netlify cached Build-Ergebnisse. Wenn sich ein externes Script ändert, aber der Build aus dem Cache kommt, stimmt der Hash nicht mehr. Löschen Sie den Build-Cache nach CDN-Updates.
Compliance-Relevanz
SRI schützt gegen Supply-Chain-Angriffe über kompromittierte CDN-Ressourcen und ist für mehrere Standards relevant.
PCI DSS 4.0
Anforderung 6.4.3 fordert die Integritätsprüfung aller auf Zahlungsseiten geladenen Scripts. SRI erfüllt diese Anforderung für extern geladene Ressourcen.
NIS2
Verlangt Maßnahmen gegen Lieferketten-Risiken (Artikel 21). SRI schützt gegen kompromittierte Third-Party-Bibliotheken und ist eine technische Gegenmaßnahme.
OWASP
Empfiehlt SRI als Best Practice für Third-Party-Script-Sicherheit. Die OWASP Third-Party JavaScript Management Cheat Sheet listet SRI als Pflichtmassnahme.
Wolf-Agents Check
Bewertet SRI mit bis zu 15 Punkten. Geprüft werden integrity-Attribute für alle externen Scripts und Stylesheets sowie das Vorhandensein von crossorigin.
Wie steht Ihre Domain bei Subresource Integrity?
Prüfen Sie es jetzt — kostenlos, ohne Registrierung, mit 166 Prüfpunkte.