Content Security Policies warning - How to fix in Magento 2 - DTF Digital

Content Security Policies (CSP) have been added to Magento 2, starting with Magento 2.3.5.

CSP’s are a powerful tool that helps to mitigate Cross Site Scripting (XSS) and other related attack vectors such as session hijacking and skimmers. A web server would send CSPs in the HTTP response headers Content-Security-Policy and Content-Security-Policy-Report-Only. These headers whitelist the origin locations of any style, script or other resources.

The long and short is that CSPs can help to prevent malicious scripts from being loaded, and run within your Magento 2 website.

Magento 2 now supports these headers, and by default, they are configured in “report-only” mode. Report only mode means that Magento will report any CSP violations by outputting them to your web browsers console.

Set the CSP mode

You can set the CSP mode in your own modules/extensions by editing the etc/config.xml. Change the values for storefront and/or admin to a 1 to enable report-only mode. Example below:

<?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>
            <mode>
                <storefront>
                    <report_only>0</report_only>
                </storefront>
                <admin>
                    <report_only>0</report_only>
                </admin>
            </mode>
        </csp>
    </default>
</config>

How do I whitelist resources?

Magento 2 has provided a number of ways to whitelist your extension or theme resources. There are a number of CSP types that Magento supports, and these are provided in full here: https://devdocs.magento.com/guides/v2.3/extension-dev-guide/security/content-security-policies.html#configure-csps-for-your-custom-codeextensiontheme

Magento recommends being cautious with your CSPs, and only add resources within extensions that require it. For example, if you only need to load a javascript file, it wouldn’t be a great idea to add a default-src policy when you could instead add a script-src policy. You can add your domain to the whitelist by adding a csp_whitelist.xml file to your extension’s etc folder.

An example is included below of how this file is structured:

<?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">
            <values>
                <value id="devdocs-base" type="host">https://devdocs.magento.com</value>
                <value id="magento" type="host">https://magento.com</value>
            </values>
        </policy>
       </policies>
</csp_whitelist>

Are there any extensions to manage this for me?

If you are scratching your head and wondering how to approach this, fear not. There are a number of addons that have started to appear which aim to tackle the issue, including Experius and Netalco.

DTF Digital