Welches Problem löst SRI?
Wer JavaScript- oder CSS-Dateien von einem fremden CDN einbindet, vertraut diesem CDN blind: Wird das CDN gehackt oder spielt es plötzlich manipulierten Code aus, läuft dieser Code automatisch auf jeder Seite, die das CDN einbindet — mit allen Rechten der eigenen Webseite. Bekanntestes Beispiel: der Polyfill.io-Vorfall 2024, bei dem ein populäres CDN den Eigentümer wechselte und plötzlich Schadcode in Millionen Webseiten einschleuste.
SRI verhindert das. Du gibst beim Einbinden den Hash der erwarteten Datei mit. Der Browser lädt das Skript, berechnet den Hash und vergleicht ihn — stimmt der Hash nicht, wird das Skript nicht ausgeführt. Manipulationen am CDN sind damit wirkungslos.
Wie funktioniert SRI?
Du fügst beim <script>- oder
<link>-Tag das Attribut
integrity hinzu, mit Algorithmus
und Base64-codiertem Hash:
<script src="https://cdn.example.com/lib.js" integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC" crossorigin="anonymous"></script>
Erlaubt sind sha256,
sha384 und
sha512. Empfehlung: SHA-384.
Du kannst auch mehrere Hashes angeben (Browser akzeptiert, wenn einer matcht) — nützlich
beim Versions-Wechsel.
Hash erzeugen
Auf der Kommandozeile (Linux/Mac):
curl -s https://cdn.example.com/lib.js | openssl dgst -sha384 -binary | openssl base64 -A
Online:
srihash.org generiert SRI-Hashes inkl. fertigem HTML-Snippet. Viele CDNs (cdnjs.cloudflare.com, jsdelivr.net) zeigen den passenden integrity-Wert direkt mit der Versions-URL an.
crossorigin="anonymous"
Damit SRI funktioniert, muss die externe Datei mit korrekten CORS-Headern ausgeliefert
werden. Das crossorigin="anonymous"
-Attribut ist Pflicht, sonst erlaubt der Browser keine Hash-Prüfung. Gute CDNs liefern
den richtigen Access-Control-Allow-Origin-
Header automatisch — wenn deine eigene Datei nicht funktioniert, ist meistens das fehlende
CORS schuld.
Wann SRI nutzen?
Immer, wenn du Code von Drittanbietern einbindest:
- Bibliotheken von cdnjs, jsDelivr, unpkg.
- Google Fonts CSS (das CSS, nicht die Font-Files selbst — die werden separat).
- Analytics-/Tracking-Skripte (sofern der Anbieter das versionsstabil ausliefert).
- Interne CDNs: auch dort ist SRI eine zweite Verteidigungslinie.
Nicht möglich bei Skripten, die bei jedem Request neu generiert werden
(Google Tag Manager, dynamische Werbeskripte) — der Hash wäre jedes Mal anders. Hier
hilft nur eine restriktive Content-Security-Policy mit script-src.
Häufige Fehler
- Versionsupdate vergessen: Lädt jQuery 3.7 aktualisiert hochgeladen, aber Hash bleibt der alte — Skript lädt nicht mehr. Lösung: pin to specific version (jQuery 3.6.0, nicht "@latest") und den Hash entsprechend updaten.
- crossorigin vergessen: SRI greift nicht. Nicht alle Browser warnen freundlich — manche laden die Datei einfach nicht.
- Nur SHA-256 verwenden: SHA-384 oder SHA-512 sind sicherer und genauso effizient.