CSP FÜR STATISCHE WEBSITES

Die Content Security Policy ist ein HTTP-Header, der dem Browser mitteilt, von welchen Ursprüngen Ressourcen für Ihre Seite geladen werden dürfen. Richtig eingesetzt, verhindert sie die meisten XSS-, Clickjacking- und Supply-Chain-Angriffe. Falsch eingesetzt, führt sie unbemerkt zu Funktionsstörungen, deren Diagnose Tage in Anspruch nehmen kann.

Bei statischen Websites wird das CSP häufig nur unzureichend dokumentiert, da das wahrgenommene Risiko geringer ist. In Wirklichkeit kann eine statische Website ohne CSP-Anweisung jedoch dazu führen, dass die Videowiedergabe, das Laden von Bildern, die Suchfunktion oder die Darstellung von Schriftarten nicht mehr funktionieren – und die Meldung in der Browserkonsole ist dabei der einzige Hinweis, den Sie erhalten.

Die Anweisung, die den jeweiligen Ressourcentyp steuert:

„img-src“ für „img“-Tags. „media-src“ für Video-, Audio- und „source“-Elemente. „frame-src“ für „iframe“. „connect-src“ für „fetch“ und WebSocket. „script-src“ für „script“-Tags. „style-src“ für „style“-Tags und „link rel=stylesheet“. „font-src“ für „@font-face“.

Wichtig: „default-src" mit dem Wert „self“ gilt NICHT für Videos von Drittanbieter-Hosts. Ein Video aus dem Supabase-Speicher wird ohne Fehlermeldung nicht abgespielt, sodass nur das Vorschaubild angezeigt wird, wenn Sie „media-src“ vergessen haben. In der Browserkonsole wird die Anweisung angezeigt, die dies verhindert hat; überprüfen Sie diese zuerst, wenn ein Video aus unerklärlichen Gründen nicht abgespielt wird.

Im Mai 2026 wurde auf gautamkhorana.com ein Kling-MP4, das auf Supabase Storage gehostet wurde, zwar korrekt als HTML dargestellt, aber nicht abgespielt. Das Titelbild wurde angezeigt, doch das Video startete nicht. Nach zwanzig Minuten Fehlersuche stellte sich heraus, dass die CSP-Richtlinie keine „media-src“-Anweisung enthielt und der Browser das Videoelement stillschweigend blockierte.

Die Lösung bestand in einer einzigen Zeile, die der Datei „netlify.toml“ hinzugefügt wurde: media-src „self“ https://*.supabase.co. Das Symptom „Bild wird angezeigt, aber nicht abgespielt“ ist ein eindeutiges Anzeichen dafür: Es bedeutet, dass die CSP das Bild zulässt, das Video jedoch nicht.

Pagefind, Stork, Tinysearch und andere Suchbibliotheken für statische Websites nutzen WebAssembly in Verbindung mit Web Workers. CSP muss die Einträge „script-src ‚wasm-unsafe-eval‘“ UND „worker-src ‚self‘ blob:“ enthalten; andernfalls bleibt die Suche ohne Konsolenfehler dauerhaft bei „Searching...“ hängen.

Zweiter Vorfall auf gautamkhorana.com im Mai 2026: Die Suchleiste blieb bei „Suche läuft...“ hängen, da pagefind.init() stillschweigend fehlschlug, als WASM blockiert wurde. Die Lösung bestand darin, „wasm-unsafe-eval“ zu script-src und „self“ zum Blob worker-src hinzuzufügen.

Erforderlich:

img-src self https://*.supabase.co https://*.fal.media, für Hero-Bilder und von FAL generierte Assets. media-src self https://*.supabase.co, für Videos. connect-src self https://*.supabase.co, für Supabase-API-Aufrufe. script-src self „wasm-unsafe-eval“, für Pagefind. worker-src self blob:, für Pagefind-Worker. style-src self „unsafe-inline“, für Astro-Scoped-Styles. font-src self, für selbst gehostete Schriftarten.

Wenn Sie einen neuen Asset-Host hinzufügen (Cloudinary, Bunny, R2 oder einen anderen), überprüfen Sie die Datei „netlify.toml“ oder „vercel.json“ und fügen Sie den Host zu jeder Anweisung hinzu, die dieser Ressourcentyp möglicherweise verwendet. Wenn Sie hier einen Fehler machen, kann dies zu einem unbemerkten Ausfall führen, der erst in der Produktionsumgebung auffällt.

Im CSP-Modus „Nur Bericht“ können Sie Richtlinienänderungen in der Produktionsumgebung testen, ohne dass es zu Störungen kommt. Der Browser protokolliert potenzielle Verstöße an einem Berichtsendpunkt, anstatt die Anfrage zu blockieren. Führen Sie jede neue Direktive eine Woche lang im Modus „Nur Bericht“ aus, überprüfen Sie die Verstöße und schalten Sie die Direktive anschließend in den Durchsetzungsmodus um.

Die meisten CSP-Fehler treten im Produktivbetrieb unbemerkt auf. Nur über einen Reporting-Endpunkt lässt sich feststellen, was tatsächlich nicht mehr funktioniert. Richten Sie einen solchen Endpunkt ein, bevor Sie eine nicht triviale CSP-Änderung in Produktion geben.