SRI mit AWS CloudFront und S3 konfigurieren

SRI-Hashes in der Build-Pipeline generieren, nach S3 deployen und per CloudFront ausliefern — mit CodeBuild-Integration und npm-Script-Alternative.

AWS CloudFront · Schritt für Schritt

Subresource Integrity auf AWS CloudFront

Subresource Integrity (SRI) schützt gegen die Manipulation externer Scripts und Stylesheets. Der Browser prüft den kryptografischen Hash jeder Ressource vor der Ausführung — stimmt der Hash nicht überein, wird die Datei blockiert. SRI ist mit 15 von 166 Punkten ein relevanter Faktor im Wolf-Agents Web Security Check.

Bei AWS CloudFront mit S3-Origin werden SRI-Hashes in der Build-Pipeline generiert — nicht auf CDN-Ebene. CodeBuild berechnet SHA-384-Hashes für alle JS- und CSS-Dateien und fügt die integrity- und crossorigin-Attribute in die HTML-Dateien ein, bevor diese nach S3 deployt werden. Alternativ nutzen Sie ein npm-Script für lokale Builds.

Wichtig: SRI erfordert crossorigin="anonymous" bei allen Ressourcen, die von einer anderen Domain geladen werden. Bei Same-Origin (alles vom gleichen CloudFront-Distribution) ist crossorigin optional, aber empfohlen. Nach jedem Deploy muss der CloudFront-Cache invalidiert werden, damit HTML-Dateien mit den neuen Hashes ausgeliefert werden.

1 Schritt 1 von 4

SRI-Hashes in CodeBuild generieren

Die buildspec.yml generiert SHA-384-Hashes für alle JS- und CSS-Dateien im Build-Output und fügt die integrity-Attribute automatisch in die HTML-Dateien ein. Anschließend wird nach S3 deployt und der CloudFront-Cache invalidiert. Dieser Prozess läuft vollautomatisch bei jedem Build.

buildspec.yml CodeBuild
# buildspec.yml — SRI-Hashes generieren
version: 0.2
phases:
  install:
    runtime-versions:
      nodejs: 20
  build:
    commands:
      # 1. Anwendung bauen
      - npm ci
      - npm run build

      # 2. SRI-Hashes für JS und CSS generieren
      - |
        for file in dist/**/*.js dist/**/*.css; do
          hash=$(openssl dgst -sha384 -binary "$file" | openssl base64 -A)
          echo "$file: sha384-$hash" >> sri-manifest.json
        done

      # 3. Integrity-Attribute in HTML einfügen
      - |
        for html in dist/**/*.html; do
          while IFS=': ' read -r file hash; do
            basename=$(basename "$file")
            sed -i "s|src=\"\([^\"]*$basename\)\"|src=\"\1\" integrity=\"$hash\" crossorigin=\"anonymous\"|g" "$html"
            sed -i "s|href=\"\([^\"]*$basename\)\"|href=\"\1\" integrity=\"$hash\" crossorigin=\"anonymous\"|g" "$html"
          done < sri-manifest.json
        done

  post_build:
    commands:
      # 4. Nach S3 deployen
      - aws s3 sync dist/ s3://$BUCKET_NAME/ --delete
      # 5. CloudFront-Cache invalidieren
      - aws cloudfront create-invalidation --distribution-id $CF_DIST_ID --paths "/*"

artifacts:
  files:
    - '**/*'
  base-directory: dist
2 Schritt 2 von 4

Alternative: npm-Script für lokale Builds

Wenn Sie nicht CodeBuild verwenden, generieren Sie SRI-Hashes mit einem Node.js-Script. Das Script erzeugt ein Manifest mit allen Hashes, das für die HTML-Injection genutzt werden kann. Integrieren Sie das Script als Post-Build-Step in Ihre package.json.

scripts/generate-sri.mjs Node.js
// scripts/generate-sri.mjs — Node.js SRI-Generator
import { createHash } from 'crypto';
import { readFileSync, writeFileSync, globSync } from 'fs';

const manifest = {};
for (const file of globSync('dist/**/*.{js,css}')) {
  const hash = createHash('sha384')
    .update(readFileSync(file))
    .digest('base64');
  manifest[file] = `sha384-${hash}`;
}

writeFileSync(
  'dist/sri-manifest.json',
  JSON.stringify(manifest, null, 2)
);
console.log(
  `SRI: ${Object.keys(manifest).length} Hashes generiert`
);
package.json Scripts
// package.json — SRI-Scripts
{
  "scripts": {
    "build": "vite build",
    "build:sri": "vite build && node scripts/generate-sri.mjs",
    "deploy": "npm run build:sri && aws s3 sync dist/ s3://$BUCKET/"
  }
}
3 Schritt 3 von 4

Verifizierung

Prüfen Sie die SRI-Attribute im ausgelieferten HTML. Jedes Script- und Stylesheet-Element sollte ein integrity-Attribut mit SHA-384-Hash und ein crossorigin-Attribut haben. Der Wolf-Agents Web Security Check prüft SRI-Attribute auf korrekte Hashes und crossorigin-Konfiguration automatisch.

Terminal Verifizieren
# SRI-Attribute im HTML prüfen
curl -s https://ihre-domain.de | grep -o 'integrity="sha384-[^"]*"' | head -5

# Erwartete Ausgabe:
integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"
integrity="sha384-Li9vy3DqF8tnTXuiaAJuML3ky+er10rcgNR/VqsVpcw+ThHmYcwiB1pbOxEb2wo+"

# crossorigin-Attribut prüfen
curl -s https://ihre-domain.de | grep -c 'crossorigin="anonymous"'

# Hash manuell verifizieren
curl -s https://ihre-domain.de/assets/app.js | \
  openssl dgst -sha384 -binary | openssl base64 -A

Häufige Fehler

Hash stimmt nach CloudFront-Komprimierung nicht

CloudFront komprimiert Ressourcen mit gzip/Brotli — der Browser dekomprimiert vor dem Hash-Vergleich. Generieren Sie Hashes immer auf den unkomprimierten Build-Output, nicht auf bereits komprimierte Dateien.

crossorigin-Attribut fehlt

Ohne crossorigin="anonymous" wird SRI bei Cross-Origin-Requests ignoriert. Wenn Sie ein CDN oder eine andere Domain verwenden, muss crossorigin gesetzt sein — auch bei Same-Origin ist es empfohlen.

Cache-Invalidierung nach Re-Deploy vergessen

Nach einem Re-Deploy liefert CloudFront noch alte HTML-Dateien mit alten Hashes aus, während die neuen JS/CSS-Dateien andere Hashes haben. SRI blockiert dann alle Ressourcen. Invalidieren Sie immer /* nach dem Deploy.

Dynamisch geladene Scripts ohne SRI

Scripts, die per document.createElement('script') geladen werden, haben standardmäßig keine integrity-Attribute. Setzen Sie script.integrity und script.crossOrigin programmatisch bei dynamischen Loads.

Compliance-Relevanz

PCI DSS 4.0 (Requirement 6.4.3) fordert explizit die Integritätsprüfung von Scripts auf Zahlungsseiten — SRI ist die technische Umsetzung dieser Anforderung und seit März 2025 verpflichtend. OWASP empfiehlt SRI als Schutz gegen Supply-Chain-Angriffe auf CDN-Ressourcen. NIS2 fordert Maßnahmen zur Lieferkettensicherheit — SRI validiert die Integrität externer Abhängigkeiten bei jedem Seitenaufruf. BSI IT-Grundschutz empfiehlt die Integritätsprüfung eingebundener Ressourcen. Der Wolf-Agents Web Security Check prüft SRI-Attribute auf korrekte Hashes und crossorigin-Konfiguration.

Wie steht Ihre Domain bei SRI?

Prüfen Sie es jetzt — kostenlos, ohne Registrierung, mit 166 Prüfpunkte.