Subresource Integrity in Contao konfigurieren
Subresource Integrity (SRI) in Contao aktivieren — über Twig-Templates, Webpack Encore oder manuell. Mit Hash-Generierung, Verifizierung und häufigen Fehlern.
Subresource Integrity in Contao
Subresource Integrity (SRI) schützt Ihre Contao-Website vor manipulierten externen Scripts und Stylesheets. Der Browser berechnet einen kryptografischen Hash der heruntergeladenen Datei und vergleicht ihn mit dem im HTML hinterlegten Wert. Stimmen die Hashes nicht überein, blockiert der Browser die Ressource vollständig. SRI ist mit 15 von 166 Punkten im Wolf-Agents Web Security Check relevant.
In Contao integrieren Sie SRI direkt in Twig-Templates mit dem integrity-Attribut. Für Projekte mit Webpack Encore generiert das webpack-subresource-integrity-Plugin die Hashes automatisch in der Build-Pipeline. Contao 5.3+ mit nativem CSP-Support ergänzt SRI optimal, da beide Mechanismen gemeinsam Supply-Chain-Angriffe verhindern.
Der Wolf-Agents Web Security Check prüft automatisch, ob Ihre Contao-Installation SRI für CDN-Ressourcen verwendet, und vergibt bis zu 15 Punkte für korrekte Implementierung.
SRI-Implementierung in Contao
SRI wird im HTML-Markup gesetzt, nicht per HTTP-Header. In Contao haben Sie zwei Wege: Manuell in Twig-Templates für einzelne CDN-Ressourcen, oder automatisiert über Webpack Encore für alle Build-Assets. Beide Methoden lassen sich kombinieren. Achten Sie darauf, CDN-URLs immer auf eine feste Version zu pinnen, damit sich der Hash nicht unerwartet ändert.
{# templates/fe_page.html.twig — SRI für externe Scripts #}
{# Methode 1: Manuell mit fest gepinnter CDN-Version #}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
{# Methode 2: SRI für externe Stylesheets #}
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YcnS/3p0L7fU8Otle0e4NsmMkEe4Pvj4bqC7"
crossorigin="anonymous">
{# Methode 3: Google Fonts mit SRI (falls self-hosted) #}
<link rel="stylesheet" href="/assets/fonts/inter.css"
integrity="sha384-<hash-hier-einsetzen>">
Für Contao-Projekte mit Webpack Encore (Contao Encore Bundle) können Sie SRI-Hashes automatisch generieren lassen. Das Plugin berechnet den Hash beim Build und fügt ihn in das entrypoints.json ein.
// webpack.config.js — Contao Encore Bundle mit SRI
const Encore = require('@symfony/webpack-encore');
const SriPlugin = require('webpack-subresource-integrity');
Encore
.setOutputPath('public/build/')
.setPublicPath('/build')
.addPlugin(new SriPlugin({
hashFuncNames: ['sha384'],
enabled: Encore.isProduction(),
}))
;
// Hash manuell generieren:
// openssl dgst -sha384 -binary datei.js | openssl base64 -ANach jeder Template-Änderung: vendor/bin/contao-console cache:clear --env=prod. Contao cached Twig-Templates aggressiv.
Verifizierung
Nach der Implementierung prüfen Sie die SRI-Integrität auf mehreren Wegen. Der wichtigste Test: Öffnen Sie die Browser DevTools (F12), wechseln Sie zum Network-Tab und klicken Sie auf ein externes Script. Unter „Headers" muss das integrity-Attribut erscheinen. Zusätzlich zeigt die Console bei einem Hash-Mismatch eine deutliche Fehlermeldung.
# 1. Cache leeren
vendor/bin/contao-console cache:clear --env=prod
# Erwartete Ausgabe: (keine Fehler)
# 2. SRI-Hash manuell generieren und vergleichen
curl -s https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js \
| openssl dgst -sha384 -binary | openssl base64 -A
# Ausgabe muss mit dem integrity-Attribut übereinstimmen
# 3. HTML-Quellcode prüfen — integrity-Attribut vorhanden?
curl -s https://ihre-domain.de | grep -o 'integrity="sha384-[^"]*"' | head -5
# integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
# 4. Browser DevTools → Network → Script auswählen → integrity prüfen
# 5. Wolf-Agents Web Security Check: SRI-Prüfung (15 Punkte)
Testen Sie SRI auf verschiedenen Seitentypen Ihrer Contao-Installation — Startseite, Nachrichtenarchiv, Detailseiten und Formulare. Jede Seite, die externe Ressourcen lädt, sollte integrity-Attribute verwenden.
Häufige Fehler bei SRI in Contao
CDN liefert andere Version — SRI blockiert
Pinnen Sie CDN-URLs immer auf feste Versionen, z.B. /lib@1.2.3/dist/lib.min.js. URLs ohne Versionsnummer (wie @latest) ändern den Inhalt ohne Vorwarnung, und SRI blockiert die Ressource. In Contao-Insert-Tags wie {{file::*}} verwenden Sie absolute URLs mit Version.
crossorigin-Attribut fehlt
SRI erfordert bei Cross-Origin-Ressourcen zwingend crossorigin="anonymous". Ohne dieses Attribut ignoriert der Browser den Integrity-Hash komplett. Achten Sie in Contao-Layouts darauf, dass die Twig-Templates beide Attribute setzen.
Contao Encore-Bundle Hash-Mismatch nach Build
Versioned Assets ändern Hashes nach jedem Build. Generieren Sie Hashes als Teil der Build-Pipeline mit dem webpack-subresource-integrity-Plugin. Manuelle Hashes für Build-Assets sind nicht praktikabel, da sie bei jedem Deployment aktualisiert werden müssen.
Contao Manager überschreibt Templates
Bei Updates über den Contao Manager können angepasste Templates zurückgesetzt werden. Legen Sie Templates unter templates/ im Projekt-Root an, nicht im Bundle-Verzeichnis. Nutzen Sie contao:diff um Template-Änderungen nach Updates zu prüfen.
Compliance-Relevanz
Subresource Integrity schützt die Lieferkette Ihrer Contao-Website. Wenn ein CDN kompromittiert wird, verhindert SRI die Auslieferung manipulierter Scripts an Ihre Besucher — ein Szenario, das Supply-Chain-Angriffe wie den Polyfill.io-Vorfall 2024 direkt adressiert.
Wie steht Ihre Domain bei Subresource Integrity?
Prüfen Sie es jetzt — kostenlos, ohne Registrierung, mit 166 Prüfpunkte.