Nutze die Leistungsfähigkeit deines CMS, um das Einschleusen von Cross-Site-Scripting zu blockieren

|Benni Mack
Illustration eines Computerbildschirms mit Code und Warnsymbolen, die Cross-Site-Scripting (XSS)-Angriffe darstellen.

Im vorherigen Blogbeitrag haben wir die zentralen Elemente der Content Security Policy (CSP) vorgestellt, um Cross-Site-Scripting-Angriffe zu verhindern. Wenn du noch nicht auf dem Laufenden bist, lies bitte zuerst Teil 1. Lass uns nun in den praktischen Teil eintauchen, wie du deine TYPO3-Website sicherer machen kannst, indem du standardmäßig CSP-Header sendest.

Dream Team: TYPO3 und Sicherheit

Die geringe Anzahl an Sicherheitsproblemen bei TYPO3 liegt nicht nur daran, dass es auf Hunderttausenden Websites eingesetzt wird. In den letzten Jahren wurde jede neue Hauptversion von TYPO3 mit neuen Sicherheitsfunktionen ausgeliefert.

TYPO3 v12 bietet eine Out-of-the-Box-Unterstützung für das Übermitteln deiner Website-Inhalte mit einem vollständig anpassbaren Regelwerk für die Content-Security-Policy, das auf deinen Vorlagen, deinem TypoScript und sogar deinen Plugins und Inhalten basiert.

CSP und CMS: Warum ist das so kompliziert?

Ein großer Vorteil eines guten CMS ist, dass Redakteure Inhalte veröffentlichen können, ohne Programmierkenntnisse in HTML, CSS oder JavaScript zu haben. Es sind keine Schulungen und kein technisches Know-how erforderlich. Doch das Ergebnis: Redakteure können jede Art von Inhalt auf einer Seite einfügen, wie z. B. Plugins für eine Bildergalerie mit einer Zoom-Funktion, die auf einer JavaScript-Bibliothek basiert. In gängigen Szenarien müssen die Sicherheitsentwickler solchen Code für dieses Plugin auf die sicherste Art und Weise zulassen, damit er in den CSP-Regeln erlaubt ist. Aus diesem Grund können intelligente CMS, die im Gegensatz zu einem Headless-CMS auch Frontend-Rendering liefern – das ist eine andere Geschichte – damit umgehen, indem sie das Framework hinter dem CMS nutzen. TYPO3 v12, mit seiner Fähigkeit, die Nutzung einer Seite während der Seitengenerierung zu erkennen, nutzt alle gängigen CSP-Funktionen wie Nonces oder Hashes für nicht zwischenspeicherbare Inhalte, „unsafe-inline“ nur, wenn es in einer Vorlage markiert ist, unmittelbar.

Erweiterungen von Drittanbietern können gängige Plug-in-Muster (z. B. eine Google Maps-Integration) bereitstellen, um sich ebenfalls in die CSP-Header-Generierung einzuklinken.

Deaktiviert bei Updates, aktiviert für neue Websites

TYPO3 bietet in TYPO3 v12 ein starkes CSP-Framework – es müssen keine Erweiterungen oder Plugins hinzugefügt werden.

Wie bereits erwähnt, kann die Aktivierung von CSP auf deiner Website die Funktionalität beeinträchtigen, z. B. die von Captcha oder die direkte Integration in einen Social-Media-Post oder andere dynamische Funktionen. Daher muss der Einsatz von CSP wirklich auf Herz und Nieren getestet werden. TYPO3 v12 wird mit standardmäßig aktiviertem CSP für die Admin-Oberfläche für neue Websites ausgeliefert. Beim Upgrade ist diese Funktion jedoch deaktiviert, sodass du dir keine Gedanken über den Umgang mit CSP während des Upgrades machen musst. Du kannst dies jedoch in v12 während des Upgrades oder danach aktivieren, um von der erhöhten Sicherheit zu profitieren.

So aktivierst du CSP-Header im TYPO3-Backend

In TYPO3 v12 kannst du das Senden von CSP-Headern für das gesamte TYPO3-Backend über das Feature-Flag „security.backend.enforceContentSecurityPolicy“ aktivieren. Wenn du keine benutzerdefinierten Erweiterungen mit benutzerdefinierten Backend-Modulen oder erweitertem JavaScript oder Inline-CSS hast, kannst du die Option [SYS][features][security.backend.enforceContentSecurityPolicy] = true in deiner config/system/settings.php aktivieren.

Wenn du keine Versionskontrolle oder Kommandozeile verwendest, findest du den Umschalter unter „Admin Tools“ => „Einstellungen“ => „Funktionsschalter“ => „Sicherheit: Backend erzwingt Content-Security-Richtlinie“.

Screenshot aus dem TYPO3-Backend (v12) mit Funktionsschaltern zur Aktivierung der CSP-Standardeinstellungen

Wie man CSP-Header für das Frontend und pro Website konfiguriert

Das Aktivieren von CSP-Headern für das Frontend funktioniert fast genauso. Es gibt einen ähnlichen Schalter [SYS][features][security.frontend.enforceContentSecurityPolicy] = true. Für jede Website können die CSP-Header individuell konfiguriert werden, die über eine Website-Konfigurationsdatei „csp.yaml“ gesendet werden sollen. Vollständige Referenz und Details siehe: https://docs.typo3.org/m/typo3/reference-coreapi/main/en-us/ApiOverview/ContentSecurityPolicy/Index.html#site-specific-frontend

Häufige Fehler und Best Practices

  1. Gehe von streng nach locker
    Stelle sicher, dass zunächst nichts erlaubt ist, und überprüfe dann deine Website, deine speziellen Funktionen und Plugins, um zu sehen, ob alles funktioniert – und lockere deine Richtlinien bei Bedarf, anstatt alle Optionen zuzulassen.
  2. Analysiere und debugge
    TYPO3 wird mit einem neuen „Content Security Policy“-Modul geliefert, das Verstöße meldet und auch anzeigt, ob die CSP-Funktion für TYPO3 richtig eingerichtet ist.
  3. Verwende den reinen Berichtsmodus
    In TYPO3 v12.4.20 wurde ein reiner Berichtsmodus mit einem separaten Feature-Flag hinzugefügt. https://github.com/TYPO3/typo3/commit/43cb28906c9c8a0d59577f09c9ca0b6660bd44ee Dies ermöglicht es, strengere Regeln im Produktionsmodus auszuprobieren.
  4. Überwache deine Browser-Konsole
    Die DevTools deiner Browserkonsole protokollieren in der Regel auch Informationen über CSP-Verstöße, sodass du strengere Regeln ausprobieren kannst.
  5. Vorsicht vor Fehlalarmen
    Schau dir immer die Grenzfälle an, die du nicht beheben kannst. Ein Beispiel: Spezielle Browser wie der In-App-Browser von Facebook in Mobilgeräten melden immer CSP-Verstöße, da die Facebook-App dynamisch JS einfügt, was du natürlich vermeiden möchtest, damit deine Website und deine Benutzer dies zulassen.
  6. Versende gute Standardwerte aus benutzerdefinierten Erweiterungen
    Denke an all die Plugins, Inline-JavaScript, CSS und Schriftarten, die in die Darstellung deiner Website eingebunden sind, und teste sie in einem echten Browser. Erweiterungen können benutzerdefinierte CSP-Regeln vorbereiten, die du einbinden kannst. Schau dir tt_address als Beispiel an. https://docs.typo3.org/p/friendsoftypo3/tt-address/main/en-us/Administration/Changelog/v/8-0-0.html#better-csp-support

Wenn du immer noch neugierig bist und tiefer einsteigen möchtest, wirf einen Blick auf das ChangeLog von TYPO3: https://docs.typo3.org/c/typo3/cms-core/main/en-us/Changelog/12.3/Feature-99499-IntroduceContent-Security-PolicyHandling.html

Oliver Hader, der Autor der CSP-Integration in TYPO3 v12, hat außerdem eine lokale Umgebung auf Basis von DDEV erstellt, um CSP in Aktion zu sehen. „CSP Simulator“ https://github.com/ohader/csp-simulator
 

Zusammenfassung

Für die Einrichtung von TYPO3 mit grundlegender CSP-Unterstützung sind keine PHP-Entwicklerkenntnisse erforderlich, insbesondere für neue Websites ist diese Funktion ein Muss. Achte jedoch bei Aktualisierungen darauf, CSP im Nur-Bericht-Modus zu aktivieren, um herauszufinden, was du anpassen musst, bevor du CSP-Header für deine Website aktivierst.