Die CSP-Variante des Hyvä-Parent-Themes (Kapitel 3) bringt eine strikte Content Security Policy mit. Das ist ein HTTP-Header-Mechanismus, mit dem der Browser angewiesen wird, welche Skript-, Style- und Ressourcenquellen überhaupt ausgeführt werden dürfen. Für uns als Entwickler bedeutet das vor allem: Inline-<script>-Blöcke funktionieren nicht automatisch.

Warum Inline-JS standardmäßig blockiert ist

Eine strikte CSP verbietet typischerweise beliebiges Inline-JavaScript, weil das eine der häufigsten Angriffsflächen für Cross-Site-Scripting ist: Wenn ein Angreifer irgendwie eigenes HTML in eine Seite einschleusen kann, darf ein eingeschleustes <script>-Tag nicht einfach ausgeführt werden. Ohne CSP würde genau das passieren. Mit CSP muss jedes erlaubte Skript entweder aus einer registrierten externen Datei kommen oder explizit als vertrauenswürdig markiert sein.

$hyvaCsp->registerInlineScript() im Detail

Hyvä löst das mit einem eigenen Service, der in jedem Template über $hyvaCsp zur Verfügung steht. Nach jedem Inline-<script>-Block muss $hyvaCsp->registerInlineScript() aufgerufen werden - das erzeugt einen kryptografischen Hash über den exakten Skriptinhalt und trägt ihn in die CSP-Direktive ein, sodass der Browser genau dieses (und nur dieses) Skript ausführen darf.

<script>
    document.addEventListener('alpine:init', () => {
        Alpine.data('teamFilter', () => ({
            activeCategory: 'alle',
        }));
    });
</script>
<?php $hyvaCsp->registerInlineScript(); ?>

Warum direkt danach, nicht am Dateiende

Der Aufruf steht bewusst direkt nach dem zugehörigen <script>-Block, nicht gesammelt am Ende der Datei: Bei mehreren Inline-Skripten im selben Template lässt sich sonst leicht durcheinanderbringen, welches registerInlineScript() zu welchem Skript gehört - und je nach interner Hash-Berechnung kann eine falsche Zuordnung dazu führen, dass ein Skript trotz Registrierung blockiert bleibt.

Externe Skript-Quellen

Für Skripte aus externen Quellen (CDN, Drittanbieter) reicht ein Hash nicht - diese müssen stattdessen über etc/csp_whitelist.xml als erlaubte Host-Quelle eingetragen werden. In diesem Projekt gilt aber die Regel: kein zusätzliches externes JavaScript laden, sondern nur das in Hyvä bereits enthaltene Alpine.js nutzen - dieser Fall taucht also in der Praxis kaum auf.

Inline-style-Attribute und CSP

Auch style="..."-Attribute können von einer strikten CSP betroffen sein. In diesem Projekt werden Styles konsequent über Tailwind-Klassen statt Inline-Styles gelöst - das umgeht das Problem von vornherein und ist ohnehin die bessere Praxis mit einem Utility-CSS-Framework.