SRI mit Cloudflare konfigurieren
Schritt-für-Schritt-Anleitung: integrity- und crossorigin-Attribute mit Cloudflare Workers und HTMLRewriter am Edge injizieren — plus Auto SRI als Dashboard-Option.
SRI mit Cloudflare
Cloudflare sitzt als Reverse Proxy vor Ihrer Origin und kann HTML-Responses am Edge transformieren — bevor sie den Browser erreichen. Workers und HTMLRewriter ermöglichen es, integrity- und crossorigin-Attribute programmatisch in externe Script- und Stylesheet-Tags zu injizieren, ohne Änderungen an Ihrem Backend-Code.
Drei Optionen stehen zur Verfügung: Workers mit Regex (flexibel, bewährter Ansatz), HTMLRewriter (eleganter, robuster — empfohlen) und Auto SRI im Dashboard (einfachste Option für Standard-CDN-Ressourcen, Beta). Diese Anleitung zeigt alle drei Wege in vier Schritten.
Cloudflare Workers für SRI-Injection
Ein Cloudflare Worker holt die HTML-Response vom Origin, durchsucht sie per Regex nach bekannten CDN-URLs und fügt integrity- und crossorigin-Attribute ein. Die Hashes werden im SRI_HASHES-Objekt gepflegt — Schlüssel ist die vollständige CDN-URL, Wert der sha384--Hash.
// worker.js — SRI-Hashes als Konfiguration
const SRI_HASHES = {
'https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js':
'sha384-vtXRMe3mGCbOeY7l30aIg8H9p3GdeSe4IFlP6KgnmM...',
'https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js':
'sha384-ENjdO4Dr2bkBIFxQpeoA6Da/tI3mqqnFqRMINF...',
};
// SRIHandler: Setzt integrity + crossorigin auf Script- und Link-Tags
class SRIHandler {
element(element) {
const src = element.getAttribute('src')
|| element.getAttribute('href');
if (src && SRI_HASHES[src]) {
element.setAttribute('integrity', SRI_HASHES[src]);
element.setAttribute('crossorigin', 'anonymous');
}
}
}
export default {
async fetch(request) {
const response = await fetch(request);
// HTMLRewriter modifiziert den HTML-Stream am Edge
return new HTMLRewriter()
.on('script[src^="https://cdn"]', new SRIHandler())
.on('link[href^="https://cdn"]', new SRIHandler())
.transform(response);
}
}; Den SHA-384-Hash einer CDN-Ressource berechnen Sie mit: curl -s https://cdn.example.com/script.js | openssl dgst -sha384 -binary | openssl base64 -A. Das Ergebnis im Format sha384-ABC123... tragen Sie als Wert ins SRI_HASHES-Objekt ein.
wrangler deploy HTMLRewriter als elegante Alternative
Die HTMLRewriter API ist Cloudflares empfohlener Weg für HTML-Transformation. Anders als Regex versteht sie HTML strukturell: Sie registrieren einen Handler für CSS-Selektoren (script[src^="https://cdn"]), der direkt auf DOM-Elemente zugreift und Attribute setzt. Das ist robuster, lesbarer und schneller als Regex-Ersetzung.
// worker.js — HTMLRewriter: eleganter und robuster als Regex
const SRI_HASHES = {
'https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js':
'sha384-vtXRMe3mGCbOeY7l30aIg8H9p3GdeSe4IFlP6KgnmM...',
'https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css':
'sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2...',
};
class SRIHandler {
element(element) {
// src für script, href für link[rel=stylesheet]
const src = element.getAttribute('src')
|| element.getAttribute('href');
if (src && SRI_HASHES[src]) {
element.setAttribute('integrity', SRI_HASHES[src]);
element.setAttribute('crossorigin', 'anonymous');
}
}
}
export default {
async fetch(request) {
const response = await fetch(request);
const contentType = response.headers.get('content-type') || '';
if (!contentType.includes('text/html')) return response;
return new HTMLRewriter()
.on('script[src^="https://cdn"]', new SRIHandler())
.on('link[rel="stylesheet"][href^="https://cdn"]', new SRIHandler())
.transform(response);
}
}; | Methode | HTML-Verständnis | Empfehlung |
|---|---|---|
| HTMLRewriter | Strukturell — DOM-Selektoren | Neue Projekte |
| Workers + Regex | Oberflächlich — String-Matching | Legacy-Kompatibilität |
| Auto SRI (Dashboard) | Cloudflare-intern | Standard-CDNs, Beta |
Cloudflare Auto SRI (Dashboard-Option)
Auto SRI ist eine Beta-Option im Cloudflare Dashboard, die Hashes für bekannte CDN-Bibliotheken automatisch injiziert — ohne Worker-Code. Cloudflare pflegt intern eine Hash-Datenbank für populäre CDNs (jsDelivr, cdnjs, unpkg). Für Standard-Websites mit üblichen CDN-Ressourcen ist dies der einfachste Weg.
# Cloudflare Dashboard — Auto SRI (Beta)
# Pfad: Speed > Optimization > Content Optimization
Schritt 1: Cloudflare Dashboard öffnen
Schritt 2: Zone auswählen → Speed → Optimization
Schritt 3: Tab "Content Optimization" öffnen
Schritt 4: "Subresource Integrity" auf ON stellen
# Cloudflare prüft bekannte CDN-URLs automatisch:
# - jsDelivr (cdn.jsdelivr.net)
# - cdnjs (cdnjs.cloudflare.com)
# - unpkg (unpkg.com)
# Für unbekannte CDNs → Workers + HTMLRewriter verwenden curl, ob die gewünschten Scripts tatsächlich das integrity-Attribut erhalten. Verifizierung
Nach dem Deploy prüfen Sie mit curl, ob die integrity- und crossorigin-Attribute korrekt in den HTML-Responses erscheinen. Der Response-Header cf-ray bestätigt, dass die Antwort über das Cloudflare-Edge läuft. Mit wrangler tail beobachten Sie Worker-Logs in Echtzeit.
# 1. Worker deployen
wrangler deploy
# 2. HTML-Antwort auf integrity-Attribute prüfen
curl -s https://ihre-domain.de | grep -i integrity
# Erwartete Ausgabe:
# <script src="https://cdn.jsdelivr.net/..." integrity="sha384-..." crossorigin="anonymous">
# 3. Worker-Logs in Echtzeit beobachten
wrangler tail
# 4. Browser DevTools: Network → Response → HTML prüfen
# cf-ray Header bestätigt Durchlauf durch Cloudflare-Edge Öffnen Sie DevTools (F12) → Sources → die CDN-URL aufrufen → in der Network-Ansicht den Initiator prüfen. Wenn der Browser ein Script wegen SRI-Mismatch blockiert, erscheint in der Console: Failed to find a valid digest in the 'integrity' attribute.
Wie steht Ihre Domain bei Subresource Integrity?
Prüfen Sie es jetzt — kostenlos, ohne Registrierung, mit 166 Prüfpunkte.
Häufig gestellte Fragen
HTMLRewriter oder Workers mit Regex — was soll ich für SRI verwenden?
HTMLRewriter ist die empfohlene Methode: Die API versteht HTML semantisch, greift direkt auf script- und link-Elemente zu und setzt Attribute ohne Regex-Risiken. Workers mit Regex sind ein Fallback für Setups, die keine HTMLRewriter-Unterstützung haben — sie sind fehleranfälliger, weil Regex HTML nur oberflächlich parst. Für neue Projekte verwenden Sie immer HTMLRewriter.
Was ist Cloudflare Auto SRI und wann reicht es aus?
Cloudflare Auto SRI ist eine Beta-Dashboard-Option unter Speed > Optimization > Content Optimization. Cloudflare berechnet dabei Hashes für bekannte CDN-Bibliotheken und injiziert das integrity-Attribut automatisch. Es eignet sich für einfache Websites mit Standard-CDN-Ressourcen (jsDelivr, cdnjs). Für unbekannte CDNs oder Ressourcen, die nicht in Cloudflares Hash-Datenbank sind, müssen Sie Workers + HTMLRewriter verwenden.
Kann Cloudflare SRI für alle externen Scripts setzen?
Nein — Cloudflare kann nur Hashes für Ressourcen berechnen, deren Inhalt bekannt ist. Bei Auto SRI nutzt Cloudflare eine interne Hash-Datenbank. Bei HTMLRewriter / Workers müssen Sie die Hashes selbst im SRI_HASHES-Objekt pflegen. Für dynamisch generierte Scripts (z.B. personalisierte Analytics-Tags) ist SRI grundsätzlich nicht möglich.
Wie pflege ich den SRI_HASHES-Objekt im Worker?
Das SRI_HASHES-Objekt im Worker ist ein JavaScript-Key-Value-Store: URL als Schlüssel, sha384-Hash als Wert. Generieren Sie den Hash mit "openssl dgst -sha384 -binary < datei.js | openssl base64 -A" und tragen Sie ihn mit dem sha384- Präfix ein. Bei CDN-Updates müssen Sie die URL und den Hash aktualisieren — verwenden Sie daher immer versionierte URLs (z.B. jquery@3.6.0), nicht unversionierte (jquery@latest).
Verlangsamt ein Cloudflare Worker für SRI die Seite?
Kaum messbar. HTMLRewriter läuft am Cloudflare-Edge als Streaming-Transformer — die HTML-Verarbeitung geschieht, während die Antwort zum Browser übertragen wird, ohne zusätzliche Round-Trips. Der Overhead für das Setzen von Attributen im DOM ist vernachlässigbar und liegt typischerweise unter 1 ms.
Funktioniert SRI mit Cloudflare zusammen mit CSP?
Ja — und die Kombination ist empfohlen. SRI prüft die Dateiintegrität, CSP (require-sri-for script style) erzwingt, dass der Browser SRI für alle Scripts und Stylesheets verlangt. Beide zusammen bilden eine starke Defense-in-Depth-Strategie gegen Supply-Chain-Angriffe. Der Cloudflare Worker kann beide Header-Injektionen in einem Schritt erledigen.
Gilt SRI für Cloudflare Workers Free Plan?
Ja. Cloudflare Workers sind im Free Plan mit 100.000 Requests pro Tag verfügbar — ausreichend für die meisten kleineren Websites. HTMLRewriter ist ebenfalls im Free Plan enthalten. Auto SRI ist eine Beta-Feature und für alle Pläne verfügbar, solange sie im Dashboard freigeschaltet ist.