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.

Improve this question

4 Answers 4

Reset to default
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/*
Improve this answer
1
  • 1
    I figured this out and forgot to answer the question. But this solution is absolutely correct!
    – Hunter
    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

Improve this answer
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
    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
    – Nagaraju Kasa
    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
    – Nagaraju Kasa
    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?
    – Nilesh Patel
    Oct 20, 2020 at 9:05
  • @CJNotts - did you get any fix on the same. ?
    – Sairaj Gadekar
    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

Improve this answer
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

Improve this answer

Your Answer

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

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