How can I fix “Refused to load the stylesheet because it violates the following Content” in Magento 2.3.5

Question

I've recently upgraded to Magento 2.3.5 and I've been encountering an issue with my Content Security Policy when trying to load a style sheet.

The error (Chrome dev console): I've added maxcdn to my csp_whitelist.xml but the error still occurs after setup:upgrade + setup:static-content:deploy + cache flush

My 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="style-src">
            <values>
                <value id="maxcdn-fontawesome" type="host">maxcdn.bootstrapcdn.com</value>
            </values>
        </policy>
    </policies>
</csp_whitelist>

I've tried adding https in the hostname, but that didn't make any difference.

I'm curious as to why the violated directives are from different domains as well. getfirebug.com is only used for the tinymce editor in my admin backend not on the storefront.

How can I go about removing this error?

Also, could anyone provide me with additional resources for researching this? I've read through Mozillas CSP guide, but it's not exactly the same for Magento 2.3.5.

Answer 1

I have this code and it works fine:

<?xml version="1.0" encoding="UTF-8"?>
<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="bootstrapCdn" type="host">*.bootstrapcdn.com</value>
            </values>
        </policy>
    </policies>
</csp_whitelist>

Try to clear these folders manually also:

rm -rf var/cache/*
rm -rf var/page_cache/*
rm -rf pub/static/*

Answer 2

Magento 2.3.5 p1 added a new module module-csp ( Magento_Csp ) which supports Content Security Policies ( CSP ) headers and provides ways to configure them. The policies can be configured for backend and frontend areas both.

Content Security Policies ( CSP ) has two modes – report-only and restrict. In Magento 2.3.5 p1, the default mode is report-only which is shows the policy violations in the browser's console. You can configure these csp for all third party loaded content as per your custom modules and theme.

I was able to solve all the policy errors for my site by creating a custom module.

app/code/Namespace/Csp/registration.php

\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Namespace_Csp',
    __DIR__
);

app/code/Namespace/Csp/etc/module.xml

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Namespace_Csp" setup_version="1.0.0" />
</config>

app/code/Namespace/Csp/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>https://www.example.com/</report_uri>
                </storefront>
                <admin>
                    <report_uri>https://www.example.com/</report_uri>
                </admin>
            </mode>

        </csp>
    </default>
</config>

app/code/Namespace/Csp/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="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="twimg" type="host">*.twimg.com</value>
                <value id="gstatic" type="host">*.gstatic.com</value>
                <value id="trustedshops" type="host">*.trustedshops.com</value>
                <value id="usercentrics" type="host">*.usercentrics.eu</value>
                <value id="fontawesome" type="host">*.fontawesome.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="twimg" type="host">*.twimg.com</value>
                <value id="gstatic" type="host">*.gstatic.com</value>
                <value id="typekit" type="host">*.typekit.net</value>
                <value id="trustedshops" type="host">*.trustedshops.com</value>
                <value id="usercentrics" type="host">*.usercentrics.eu</value>
                <value id="fontawesome" type="host">*.fontawesome.com</value>

            </values>
        </policy>
        <policy id="img-src">
            <values>
                <value id="cloudflare" type="host">*.cloudflare.com</value>
                <value id="klarna-base" type="host">*.klarna.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="twimg" type="host">*.twimg.com</value>
                <value id="vimeocdn" type="host">*.vimeocdn.com</value>
                <value id="youtube-img" type="host">*.ytimg.com</value>
                <value id="data" type="host">'self' data:</value>
                <value id="lightemporium" type="host">*.lightemporium.com</value>                
                <value id="usercentrics" type="host">*.usercentrics.eu</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>
                <value id="twimg" type="host">*.twimg.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="twimg" type="host">*.twimg.com</value>
                <value id="trustedshops" type="host">*.trustedshops.com</value>
                <value id="googleapis" type="host">*.googleapis.com</value>
            </values>
        </policy>

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

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

Add your thirdparty urls/domains to csp_whitelist.xml. All suggestions are most welcome

Answer 3

You met this issue because the Security Policy was added into Magento version 2.3.5

For detailed information, please check this document: https://devdocs.magento.com/guides/v2.3/extension-dev-guide/security/content-security-policies.html

Answer 4

I am trying to use the solution above but it is not working

it is showing: php bin/magento module:enable Namespace_Csp \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::MODULE, 'Namespace_Csp', DIR

And yes, I have tried changing "Namespace" to something else and still, not working