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.
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.
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 — 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 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 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 — 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/"
}
} 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.
# 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.