magento2 – CSP Whitelist like ignored. How to set it?


I’m trying to set the CSP whitelist for Magento. I tried in many ways but I’m not able to make it works.

The module is enabled but csp_whitelist.xml seems like ignored. After changed the file I run, of course, setup:upgrade and I cleared the cache.

My configuration:

  • Magento 2.4.0 served by Apache
  • Varnish Cache in front of Apache
  • Nginx as reverse proxy and SSL Termination in front of Varnish

This is the app/code/Vendor/Module/ I created:

registration.php

<?php

MagentoFrameworkComponentComponentRegistrar::register(
    MagentoFrameworkComponentComponentRegistrar::MODULE,
    'Vendor_Module',
    __DIR__
);

etc/module.xml

<?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_Module" setup_version="1.0.0"/>
</config>

etc/config.xml

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

etc/csp_whitelist.xml

<?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="default-src">
            <values>
                <value id="paypal" type="host">*.paypal.com</value>
            </values>
        </policy>
        <policy id="script-src">
            <values>
                <value id="cloudflare" type="host">*.cloudflare.com</value>
                <value id="twitter.com" type="host">*.twitter.com</value>
                <value id="google-analytics" type="host">*.google-analytics.com</value>
                <value id="googletagmanager.com" type="host">googletagmanager.com</value>
                <value id="google" type="host">*.google.com</value>
                <value id="gstatic" type="host">*.gstatic.com</value>
                <value id="trustedshops" type="host">*.trustedshops.com</value>
                <value id="fontawesome" type="host">*.fontawesome.com</value>
                <value id="addthis.com" type="host">*.addthis.com</value>
                <value id="s7.addthis.com" type="host">s7.addthis.com</value>
                <value id="m.addthis.com" type="host">m.addthis.com</value>
                <value id="addthis-analytics" type="host">z.moatads.com</value>
                <value id="addthis-cdn" type="host">*.addthisedge.com</value>
                <value id="googleapis" type="host">apis.google.com</value>
                <value id="graph-facebook" type="host">graph.facebook.com</value>
                <value id="widgets-pinterest" type="host">widgets.pinterest.com</value>
            </values>
        </policy>
        <policy id="style-src">
            <values>
                <value id="cloudflare" type="host">*.cloudflare.com</value>
                <value id="googleapis" type="host">*.googleapis.com</value>
                <value id="twitter.com" type="host">*.twitter.com</value>
                <value id="gstatic" type="host">*.gstatic.com</value>
                <value id="typekit" type="host">*.typekit.net</value>
                <value id="fontawesome" type="host">*.fontawesome.com</value>
                <value id="fontawesomecdn" type="host">*.bootstrapcdn.com</value>
            </values>
        </policy>
        <policy id="img-src">
            <values>
                <value id="cloudflare" type="host">*.cloudflare.com</value>
                <value id="googleadservices" type="host">*.googleadservices.com</value>
                <value id="google-analytics" type="host">*.google-analytics.com</value>
                <value id="paypal" type="host">*.paypal.com</value>
                <value id="twitter.com" type="host">*.twitter.com</value>
                <value id="vimeocdn" type="host">*.vimeocdn.com</value>
                <value id="data" type="host">'self' data:</value>
            </values>
        </policy>
        <policy id="connect-src">
            <values>
                <value id="cloudflare" type="host">*.cloudflare.com</value>
                <value id="twitter.com" type="host">*.twitter.com</value>
                <value id="paypal" type="host">*.paypal.com</value>
            </values>
        </policy>
        <policy id="font-src">
            <values>
                <value id="cloudflare" type="host">*.cloudflare.com</value>
                <value id="twitter.com" type="host">*.twitter.com</value>
                <value id="gstatic" type="host">*.gstatic.com</value>
                <value id="typekit" type="host">*.typekit.net</value>
                <value id="googleapis" type="host">*.googleapis.com</value>
                <value id="fontawesome" type="host">*.fontawesome.com</value>
                <value id="fontawesomecdn" type="host">*.bootstrapcdn.com</value>
            </values>
        </policy>

        <policy id="frame-src">
            <values>
                <value id="twitter.com" type="host">*.twitter.com</value>
                <value id="google.com" type="host">*.google.com</value>
                <value id="addthis.com" type="host">*.addthis.com</value>
            </values>
        </policy>

        <policy id="form-action">
            <values>
                <value id="twitter.com" type="host">*.twitter.com</value>
            </values>
        </policy>
    </policies>
</csp_whitelist>

Any Ideas?