Bei der Entwicklung von benutzerdefinierten Erweiterungen in Magento 2 hatten wir das Problem, dass die Content Security Policy (CSP) Hashes in der Browser-Konsole nicht angezeigt wurden. Diese Hashes sind wichtig, um Inline-Skripte und andere Inhalte, die von CSP blockiert werden könnten, zu erlauben. In diesem Beitrag zeigen wir Ihnen, wie Sie ein eigenes Plugin erstellen, um die CSP-Richtlinien in Magento anzupassen und die Hashes sichtbar zu machen.
Was ist Content Security Policy (CSP) in Magento?
Content Security Policy (CSP) ist eine wichtige Sicherheitsfunktion in Magento 2, die hilft, Angriffe wie Cross-Site-Scripting (XSS) zu verhindern. Standardmäßig blockiert CSP die Ausführung von Inline-Skripten, was zu Problemen führen kann, wenn Sie benutzerdefinierte Skripte hinzufügen möchten. Um die Flexibilität zu erhöhen, können Sie ein eigenes Plugin erstellen, um die CSP-Richtlinien anzupassen und Hashes sichtbar zu machen.
Schritt-für-Schritt-Anleitung: Eigenes Plugin zur Anpassung der CSP
1. Erstellen des Plugins:
Erstellen Sie ein neues Modul, z.B. `Vendor/CspConfig`. Navigieren Sie zu `app/code/Vendor/CspConfig` und erstellen Sie die notwendigen Verzeichnisse:
app/code/Vendor/CspConfig/etc
Erstellen Sie die module.xml-Datei, um das Modul zu registrieren:
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Vendor_CspConfig" setup_version="1.0.0">
<sequence>
<module name="Magento_Csp"/>
</sequence>
</module>
</config>
2. CSP-Konfiguration anpassen:
Erstellen Sie die Datei etc/config.xml im Modulverzeichnis:
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Store:etc/config.xsd">
<default>
<csp>
<policies>
<storefront>
<scripts>
<inline>1</inline> <!-- Inline-Skripte im Frontend erlauben -->
</scripts>
</storefront>
</policies>
<mode>
<report_only>1</report_only> <!-- Debug-Modus aktivieren -->
</mode>
</csp>
</default>
</config>
Mit dieser Konfiguration wird inline auf 1 gesetzt, wodurch Inline-Skripte im Frontend erlaubt werden. Der report_only-Modus zeigt CSP-Verletzungen in der Browser-Konsole an, blockiert sie aber nicht, was das Debuggen erleichtert.
3. Modul registrieren und aktivieren:
Registrieren Sie das Modul, indem Sie die Datei registration.php im Verzeichnis app/code/Vendor/CspConfig erstellen:
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'Vendor_CspConfig',
__DIR__
);
Aktivieren Sie das Modul und leeren Sie den Cache:
php bin/magento module:enable Vendor_CspConfig
php bin/magento setup:upgrade
php bin/magento cache:clean
4. Hashes in der Konsole sichtbar machen und in die Whitelist einfügen:
Besuchen Sie Ihre Magento-Website und öffnen Sie die Browser-Konsole. Sie sollten nun sehen, dass die CSP-Hashes angezeigt werden. Diese Hashes können dann verwendet werden, um spezifische Inline-Skripte zu erlauben.
Erstellen Sie die Datei etc/csp_whitelist.xml in Ihrem Modul:
<?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="script-src">
<value id="self"/>
<!-- Hier fügen Sie den spezifischen Hash für ein Inline-Skript hinzu -->
<value id="'sha256-AbCdEfGhIjKlMnOpQrStUvWxYz=='"/>
</policy>
</policies>
</csp_whitelist>
Ersetzen Sie sha256-AbCdEfGhIjKlMnOpQrStUvWxYz== durch den tatsächlichen Hash, den Sie aus der Browser-Konsole erhalten.
Fazit
Durch das Erstellen eines eigenen Plugins für die Content Security Policy in Magento 2 können Sie die Sicherheitseinstellungen Ihrer Website flexibel anpassen. Diese Methode ermöglicht es Ihnen, CSP-Hashes sichtbar zu machen und Inline-Skripte sicher zu verwalten, ohne die Sicherheit Ihrer Website zu gefährden.
