Magento 2 Onlineshop Konsolen Fehler Titelbild

Wir haben in unserer Internetagentur nach der Aktualisierung von Magento auf Version 2.3.5 festgestellt, dass die Konsole einige Fehler ausgibt. Dabei wurde das Laden von verschiedenen Dateitypen aus externen Quellen bemängelt (Refused to load the...). Beispielsweise Javascript, CSS, Bilder und Google-Fonts.

Es hat sich herausgestellt, dass sich die Content Security Policy kurz CSP geändert hat.

 

Die CSP soll die Möglichkeit von Cross-Site-Scripting (XSS) Angriffen erschweren. Dabei wird fremder Javascript Code in die Seite injiziert, um zum Beispiel Kreditkarten Daten von Onlineshops abzufangen und auszulesen.

 

Um solche Angriffe zu erschweren, müssen in Zukunft externe Quellen als vertrauenswürdig einstgestuft werden. Vor allem, wenn man ein Content Delivery Network einsetzt, ist es nötig, den Anbieter als vertrauenswürdig einzustufen.

 

Um dies zu machen, kann man in einem selbst erstellten Modul eine csp_whitelist.xml erstellen.

 

Wie man ein Modul erstellt, wird hier in diesem Beitrag nicht explizit behandelt.

 

Die csp_whitelist.xml Datei muss dabei im etc Ordner des Plugins hinzugefügt werden.

 

Die Struktur der XML Datei muss wie folgt aufgebaut werden:

 


<?xml version="1.0"?>
<csp_whitelist xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Csp:etc/csp_whitelist.xsd">
    <policies>
        <policy id="style-src">
            <values>
                <value id="cdn_jsdelivr_styles" type="host">https://cdn.jsdelivr.net><value>
            </values>
        </policy>
    </policies>
</csp_whitelist>

 

Bei der Struktur ist es wichtig beim <policy> Element, den richtigen Policy Typ über die id hinzuzufügen. Die verschiedenen Typen kann man in der Magento 2 Entwickler Dokumentation nachlesen.

 

https://devdocs.magento.com/guides/v2.4/extension-dev-guide/security/content-security-policies.html

 

Wenn man mehrere Typen hinzufügen möchte, braucht man für jeden Typ ein eigenes <policy> Element mit der dazugehörigen id.

 


<?xml version="1.0"?>
	<csp_whitelist xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Csp:etc/csp_whitelist.xsd">
		<policies>
			<policy id="style-src">
				<values>
					<value id="cdn_jsdelivr_styles" type="host">https://cdn.jsdelivr.net</value>
				</values>
			</policy>
			<policy id="script-src">
				<values>
					<value id="cdn_jsdelivr_scripts" type="host">https://cdn.jsdelivr.net</value>
					<value id="gtm_scripts" type="host">https://www.googletagmanager.com</value>
					<value id="hotjar_scripts" type="host">https://script.hotjar.com</value>
					<value id="hotjar_statics" type="host">https://static.hotjar.com</value>
				</values>
			</policy>
		</policies>
	</csp_whitelist>

Sobald man die Änderungen durchgeführt hat, muss man noch die Caches löschen.

 

Es ist noch wichtig zu verstehen, dass Magento (zumindest bei uns) bei der Aktualisierung sich in den report-only Modus geschaltet hat. Das heißt, dass zwar auf die externen Skripte hingewiesen wird, allerdings werden diese nicht blockiert. Um sich vor den XSS Angriffen zu schützen, muss der Modus auf strict umgeschaltet werden. Danach werden allerdings alle externen Skripte blockiert, die nicht als vertrauenswürdig eingestuft wurden sind.

 

Gesehen in unserer Agentur mit Magento 2.3.5