5

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): chrome console error 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.

4 Answers 4

5

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/*
1
  • 1
    I figured this out and forgot to answer the question. But this solution is absolutely correct!
    – Hunter
    Commented May 8, 2020 at 14:37
6

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

6
  • Hi. I've tried this solution and it works great. Could you tell me where I would add a policy for the following please? - [Report Only] Refused to connect to 'wss://widget-mediator.zopim.com/s/W/ws/P+K0WawtTPyb04Z+/c/1593506456470' because it violates the following Content Security Policy directive: "connect-src geostag.cardinalcommerce.com geo.cardinalcommerce.com 1eafstag.cardinalcommerce.com 1eaf.cardinalcommerce.com centinelapistag.cardinalcommerce.com centinelapi.cardinalcommerce.com *.sagepay.com *.zdassets.com *.trustpilot.com *.zendesk.com *.zopim.com 'self' 'unsafe-inline'".
    – CJNotts
    Commented Jun 30, 2020 at 9:25
  • @Suman Pradhan, I have fixed whitelisted all the domains in the read-only mode next to what step I need to follow.? read-only & restrict mode what are the differences? could you please advise with a simple example Commented Jul 6, 2020 at 9:11
  • @Suman Pradhan if we put restrict mode is there any major issues that will happen? why should we use restrict mode? could you please advise Commented Jul 6, 2020 at 11:19
  • @Suman Pradhan, Which value I have to set in "<report_uri>" tag for storefront and admin in the config.xml file? Commented Oct 20, 2020 at 9:05
  • @CJNotts - did you get any fix on the same. ? Commented Mar 30, 2021 at 7:08
0

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

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.