Header image

TYPO3 und die Content Security Policy

20.08.2022
Markus Sommer
Tutorial, TYPO3

Gemäß der Beschreibung auf Wikipedia stellt die Same-Origin-Policy ein Problem dar, da Webseiten aktive Inhalte enthalten können, zum Beispiel in Form von JavaScript-Code. Wenn Webbrowser diesen Code ausführen, sorgt die Same-Origin-Policy dafür, dass Code von einer Quelle nicht auf Inhalte einer anderen Quelle zugreifen kann. Zum Beispiel darf der Code auf einer Webseite, die von einem Angreifer stammt, nicht auf die Elemente einer Onlinebanking-Webseite zugreifen.

Leider sind Cross-Site-Scripting-Schwachstellen in der Praxis weit verbreitet, wodurch die Same-Origin-Policy ausgehebelt wird. Eine Cross-Site-Scripting-Schwachstelle tritt auf, wenn eine Webseite durch fehlerhafte Maskierung Code eingeschleust bekommt. Aus Sicht des Browsers stammt dieser untergeschobene Code von der gleichen Quelle wie die angegriffene Webseite.

Die Lösung

Um die Sicherheit einer Website zu gewährleisten, kann die Header-Variable genutzt werden. Durch diese Variable wird der Browser dazu veranlasst, Skripte und Anweisungen im Quelltext zu überprüfen und gegebenenfalls nicht auszuführen. Allerdings müssen viele Funktionen, die eine Website nutzt, wie beispielsweise Google Fonts, externe Bibliotheken oder Content Delivery Networks (CDNs), in Ausnahmefällen definiert werden.

Um diesen Prozess zu vereinfachen, gibt es die Webseite https://www.cspisawesome.com/. Diese Seite ermöglicht es uns, die passende Content Security Policy für unsere Seite zu generieren. Eine Content Security Policy ist eine Sammlung von Anweisungen, die dem Browser mitteilen, welche Ressourcen auf der Website geladen werden dürfen und welche nicht. Durch die Verwendung einer Content Security Policy kann das Risiko von Cross-Site-Scripting-Angriffen und anderen Sicherheitsbedrohungen verringert werden.

Es ist also wichtig, die Header-Variable und eine Content Security Policy zu nutzen, um die Sicherheit unserer Website zu erhöhen und mögliche Angriffe zu verhindern. Dank Tools wie https://www.cspisawesome.com/ kann dieser Prozess erleichtert werden und wir können uns auf die Entwicklung unserer Website konzentrieren.

Einbindung

Die Einbindung einer Content Security Policy (CSP) in unsere Webseite ist wichtig, um uns vor potenziellen Angriffen wie Cross-Site-Scripting oder Clickjacking zu schützen. Eine Möglichkeit, dies zu erreichen, besteht darin, die CSP über unseren Webserver einzubinden, beispielsweise über den Apache-Server und die .htaccess-Datei.

Header set Content-Security-Policy "default-src 'none'"

Das Problem bei dieser Methode ist jedoch, dass die CSP bei jedem Request eingebunden wird, was nicht nur für die Frontend-Ausgabe, sondern auch für alle Assets und das Backend gilt. Dadurch kann es schwierig werden, das Backend zu bedienen, es sei denn, wir heben die Einschränkungen der CSP wieder auf, was wiederum dem Zweck der CSP widerspricht.

TypoScript: Eine bessere Alternative

Eine bessere Alternative besteht darin, TypoScript zu verwenden, um die CSP nur auf unsere TYPO3-Frontendausgabe anzuwenden, ohne das Backend oder Assets zu beeinflussen. Dies kann auf einfache Weise durch folgenden Code erreicht werden:

config.additionalHeaders {
 10.header = Content-Security-Policy: default-src 'none'
}

Sobald wir das ergänzt haben wird ab jetzt im Frontend immer dieser Header mit ausgegeben.