Subresource Integrity für Bunny CDN konfigurieren
SRI-Hashes in der Build-Pipeline generieren — CDN-Cache-Invalidierung, CORS-Voraussetzungen und Perma-Cache-Strategien.
Subresource Integrity auf Bunny CDN
Subresource Integrity (SRI) stellt sicher, dass Scripts und Stylesheets, die von einem CDN geladen werden, nicht manipuliert wurden. Der Browser vergleicht den Inhalt der Datei mit einem kryptografischen Hash im integrity-Attribut. SRI ist mit 15 von 166 Punkten ein wichtiger Faktor im Wolf-Agents Web Security Check.
Auf Bunny CDN ist SRI besonders relevant: Wenn Ihre Assets über das CDN ausgeliefert werden, schützt SRI vor Manipulationen auf CDN-Ebene oder Man-in-the-Middle-Angriffen. Die Herausforderung liegt in der Build-Pipeline — SRI-Hashes müssen bei jedem Deployment neu berechnet und in das HTML eingefügt werden. Wolf-Agents empfiehlt Content-Hash-basierte Dateinamen in Kombination mit SRI für maximale Sicherheit.
SRI-Hashes in der Build-Pipeline
Berechnen Sie SRI-Hashes als Teil Ihres Build-Prozesses. Moderne Build-Tools wie Vite, Rollup und Webpack können Hashes automatisch generieren und in HTML-Tags einfügen. Verwenden Sie SHA-384 als Hash-Algorithmus — er bietet das beste Verhältnis aus Sicherheit und Kompatibilität.
# SRI-Hash für eine Datei berechnen
cat script.js | openssl dgst -sha384 -binary | openssl base64 -A
# Ergebnis als integrity-Attribut verwenden:
<script src="https://cdn.example.com/script.js"
integrity="sha384-{HASH}"
crossorigin="anonymous"></script>
# Build-Tool-Integration (Vite/Rollup/Webpack):
# → Hashes werden automatisch berechnet und in HTML eingefügt
# → Dateinamen enthalten Content-Hash (cache-busting)
# Beispiel: script.a1b2c3d4.jsBuild-Tools generieren Dateinamen mit Content-Hash (z.B. app.a1b2c3.js). Das garantiert Cache-Busting bei Änderungen. SRI stellt zusätzlich sicher, dass die Datei unter diesem Hash nicht manipuliert wurde. Beide Mechanismen ergänzen sich.
CDN-Invalidierung und CORS per API
Nach einem Deployment müssen alte Dateien im CDN-Cache invalidiert werden, damit die neuen Hashes mit den neuen Dateien übereinstimmen. Mit Content-Hash-Dateinamen ist kein Purge nötig — neue Dateinamen sind automatisch uncached. Zusätzlich benötigen SRI-geschützte Assets einen CORS-Header, wenn sie von einer anderen Domain geladen werden.
# Bunny API — Cache Purge nach Deployment
curl -X POST https://api.bunny.net/pullzone/{pullZoneId}/purgeCache \
-H "AccessKey: YOUR_API_KEY" \
-H "Content-Type: application/json"
# Einzelne Datei purgen (effizienter)
curl -X POST "https://api.bunny.net/purge?url=https://cdn.example.com/script.js" \
-H "AccessKey: YOUR_API_KEY"
# CORS-Header per Edge Rule für SRI (crossorigin="anonymous")
curl -X POST https://api.bunny.net/pullzone/{pullZoneId}/edgerules \
-H "AccessKey: YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"ActionType": 15,
"ActionParameter1": "Access-Control-Allow-Origin",
"ActionParameter2": "*",
"Triggers": [{"Type": 0, "PatternMatchingType": 0, "PatternMatches": ["*.js", "*.css"]}],
"TriggerMatchingType": 0,
"Description": "CORS for SRI assets",
"Enabled": true
}'crossorigin="anonymous" auf dem Script/Link-Tag und einen Access-Control-Allow-Origin Header vom CDN. Ohne CORS blockiert der Browser die SRI-Prüfung und die Ressource wird nicht geladen. SRI-Integrität verifizieren
Berechnen Sie den Hash der CDN-Datei und vergleichen Sie ihn mit dem integrity-Attribut im HTML. Bei einem Mismatch blockiert der Browser das Script und zeigt einen Fehler in der Konsole. Prüfen Sie auch den CORS-Header.
# SRI-Hash einer CDN-Datei prüfen
curl -s https://cdn.example.com/script.js | openssl dgst -sha384 -binary | openssl base64 -A
# Vergleich mit dem integrity-Attribut im HTML
# → Hashes müssen identisch sein
# Browser DevTools → Console bei SRI-Mismatch:
Failed to find a valid digest in the 'integrity' attribute
for resource 'https://cdn.example.com/script.js'
# CORS-Header prüfen (Voraussetzung für SRI)
curl -sI https://cdn.example.com/script.js | grep -i access-control
access-control-allow-origin: *Häufige Fehler
Perma-Cache liefert veraltete Datei
Bunny Perma-Cache kann Dateien unbegrenzt vorhalten. Wenn Sie eine Datei aktualisieren und das HTML den neuen SRI-Hash enthält, aber der Perma-Cache die alte Datei liefert, schlägt die Prüfung fehl. Verwenden Sie Content-Hash-Dateinamen, um dieses Problem zu vermeiden.
Fehlender CORS-Header
SRI funktioniert nur mit CORS. Ohne Access-Control-Allow-Origin Header kann der Browser den Dateiinhalt nicht prüfen und blockiert die Ressource. Setzen Sie eine Edge Rule für *.js und *.css Dateien.
Bunny Shield verändert Response
Bunny Shield (Origin Shield) cached Responses auf einer zusätzlichen Ebene. In seltenen Fällen können Encoding-Unterschiede (gzip vs. ungezippt) den SRI-Hash verändern. Berechnen Sie den Hash immer auf der unkomprimierten Datei und stellen Sie sicher, dass der Browser dieselbe Version erhält.
Compliance-Relevanz
SRI schützt vor Supply-Chain-Angriffen — einer zunehmend häufigen Bedrohung. PCI DSS 4.0 (Requirement 6.4.3) fordert ein Inventar autorisierter Scripts und deren Integritätsprüfung. SRI erfüllt diese Anforderung technisch. NIS2 fordert Maßnahmen zur Sicherheit der Lieferkette. BSI IT-Grundschutz empfiehlt die Prüfung externer Ressourcen auf Integrität. Der Wolf-Agents Web Security Check prüft SRI-Attribute für alle externen Scripts und Stylesheets und vergibt bis zu 15 Punkte.
Wie steht Ihre Domain bei SRI?
Prüfen Sie es jetzt — kostenlos, ohne Registrierung, mit 166 Prüfpunkte.