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.

Cloudflare · Schritt für Schritt

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.

1 Schritt 1 von 4

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 Cloudflare Worker
// 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);
  }
};
Hash generieren

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.

Worker deployen und aktivieren:
wrangler deploy
2 Schritt 2 von 4

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-Variante Empfohlen
// 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
HTMLRewriter verarbeitet die Response als Stream — Attribute werden gesetzt, während Cloudflare die Antwort zum Browser überträgt. Das bedeutet null zusätzliche Latenz für den Endnutzer.
3 Schritt 3 von 4

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
# 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
Auto SRI ist Beta — Cloudflare kennt nicht alle CDN-URLs. Für unbekannte Ressourcen, eigene CDNs oder Bibliotheken außerhalb der Hash-Datenbank müssen Sie Workers + HTMLRewriter verwenden. Prüfen Sie nach der Aktivierung per curl, ob die gewünschten Scripts tatsächlich das integrity-Attribut erhalten.
4 Schritt 4 von 4

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.

Terminal Verifizierung
# 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
Browser DevTools als Alternative

Ö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.