When developing custom extensions in Magento 2, we encountered an issue where the Content Security Policy (CSP) hashes were not displayed in the browser console. These hashes are important for allowing inline scripts and other content that may be blocked by CSP. In this article, we show you how to create your own plugin to customize the CSP policies in Magento and make the hashes visible.
What is Content Security Policy (CSP) in Magento?
Content Security Policy (CSP) is an important security feature in Magento 2 that helps prevent attacks such as Cross-Site Scripting (XSS). By default, CSP blocks the execution of inline scripts, which can cause problems when you want to add custom scripts. To increase flexibility, you can create your own plugin to customize the CSP policies and make hashes visible.
Step-by-step guide: Creating your own plugin to customize CSP
1. Creating the plugin:
Create a new module, for example `Vendor/CspConfig`. Navigate to `app/code/Vendor/CspConfig` and create the necessary directories:
app/code/Vendor/CspConfig/etc
Create the module.xml file to register the module:
<?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. Customizing the CSP configuration:
Create the etc/config.xml file in the module directory:
<?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> <!-- Allow inline scripts on the frontend -->
</scripts>
</storefront>
</policies>
<mode>
<report_only>1</report_only> <!-- Enable debug mode -->
</mode>
</csp>
</default>
</config>
With this configuration, inline is set to 1, which allows inline scripts on the frontend. The report_only mode displays CSP violations in the browser console without blocking them, making debugging easier.
3. Registering and enabling the module:
Register the module by creating the registration.php file in the app/code/Vendor/CspConfig directory:
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'Vendor_CspConfig',
__DIR__
);
Enable the module and clear the cache:
php bin/magento module:enable Vendor_CspConfig
php bin/magento setup:upgrade
php bin/magento cache:clean
4. Making hashes visible in the console and adding them to the whitelist:
Visit your Magento website and open the browser console. You should now see the CSP hashes being displayed. These hashes can then be used to allow specific inline scripts.
Create the etc/csp_whitelist.xml file in your module:
<?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"/>
<!-- Add the specific hash for an inline script here -->
<value id="'sha256-AbCdEfGhIjKlMnOpQrStUvWxYz=='"/>
</policy>
</policies>
</csp_whitelist>
Replace sha256-AbCdEfGhIjKlMnOpQrStUvWxYz== with the actual hash you obtain from the browser console.
Conclusion
By creating your own plugin for Content Security Policy in Magento 2, you can flexibly customize your website's security settings. This approach allows you to make CSP hashes visible and manage inline scripts securely without compromising the security of your website.
