Get best of the week

Content Security Policy in Magento 2

Hello everyone!

Surely you installed Magento 2.3.5 and found in your browser consoles something like

[Report Only] Refused to load the script '***' because it violates the following Content Security Policy directive: "script-src *". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.



I’ll tell you what to do under the cut

Introduction


Starting with version 2.3.5, a module called Magento_CSP appeared in Magento. He is responsible for the Content Security Policy, and, in fact, adds the header Content-Security-Policy , or rather, while Content-Security-Policy-Report-Only . As always, on time and quite expected, when raising the "fix" version :) We already wrote about



what Content Security Policy is and what it is eaten on Habré .

The choice of the header Content-Security-Policy or Content-Security-Policy-Report-Only depends on the configuration file vendor / magento / module-csp / etc / config.xml separately for the front separately for the admin part.

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

In the same place in the “report_uri” directive one could set the URL for the report, but since it is not there, then chrome mercilessly reddenes the console with a message about its absence.



Sample error text
The Content Security Policy 'font-src 'self' 'unsafe-inline'; form-action secure.authorize.net test.authorize.net geostag.cardinalcommerce.com geo.cardinalcommerce.com 1eafstag.cardinalcommerce.com 1eaf.cardinalcommerce.com centinelapistag.cardinalcommerce.com centinelapi.cardinalcommerce.com 'self' 'unsafe-inline'; frame-ancestors 'self' 'unsafe-inline'; frame-src secure.authorize.net test.authorize.net geostag.cardinalcommerce.com geo.cardinalcommerce.com 1eafstag.cardinalcommerce.com 1eaf.cardinalcommerce.com centinelapistag.cardinalcommerce.com centinelapi.cardinalcommerce.com www.paypal.com www.sandbox.paypal.com 'self' 'unsafe-inline'; img-src widgets.magentocommerce.com www.googleadservices.com www.google-analytics.com t.paypal.com www.paypal.com www.paypalobjects.com fpdbs.paypal.com fpdbs.sandbox.paypal.com *.vimeocdn.com s.ytimg.com 'self' 'unsafe-inline'; script-src assets.adobedtm.com secure.authorize.net test.authorize.net geostag.cardinalcommerce.com 1eafstag.cardinalcommerce.com geoapi.cardinalcommerce.com 1eafapi.cardinalcommerce.com songbird.cardinalcommerce.com includestest.ccdc02.com js.authorize.net jstest.authorize.net www.googleadservices.com www.google-analytics.com www.paypal.com www.sandbox.paypal.com www.paypalobjects.com t.paypal.com js.braintreegateway.com s.ytimg.com video.google.com vimeo.com www.vimeo.com cdn-scripts.signifyd.com www.youtube.com 'self' 'unsafe-inline' 'unsafe-eval'; style-src getfirebug.com 'self' 'unsafe-inline'; object-src 'self' 'unsafe-inline'; media-src 'self' 'unsafe-inline'; manifest-src 'self' 'unsafe-inline'; connect-src geostag.cardinalcommerce.com geo.cardinalcommerce.com 1eafstag.cardinalcommerce.com 1eaf.cardinalcommerce.com centinelapistag.cardinalcommerce.com centinelapi.cardinalcommerce.com 'self' 'unsafe-inline'; child-src 'self' 'unsafe-inline'; default-src 'self' 'unsafe-inline' 'unsafe-eval'; base-uri 'self' 'unsafe-inline';' was delivered in report-only mode, but does not specify a 'report-uri'; the policy will have no effect. Please either add a 'report-uri' directive, or deliver the policy via the 'Content-Security-Policy' header.

How to add your url to the policy?


Create a file in the root of the / etc / module folder with the name csp_whitelist.xml and content

<?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="POLICY_ID">
            <values>
                <value id="VALUE_ID" type="TYPE" algorithm="ALGORITHM">SOME DOMAIN</value>
            </values>
        </policy>
    </policies>
</csp_whitelist>

where POLICY_ID is one of:

  • default-src
  • script-src
  • object-src
  • style-src
  • img-src
  • media-src
  • frame-src
  • font-src
  • connect-src

VALUE_ID - an arbitrary unique name
TYPE - type, can take the values domain or hash
ALGORITHM - hashing algorithm (with TYPE = hash), for example sha256

Let's see examples from the integration test of Magento itself :

<?xml version="1.0"?>
<!--
/**
 * Copyright  Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<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="object-src">
            <values>
                <value id="mage-base" type="host">https://magento.com</value>
                <value id="hash" type="hash" algorithm="sha256">B2yPHKaXnvFWtRChIbabYmUBFZdVfKKXHbWtWidDVF8=</value>
                <value id="hash2" type="hash" algorithm="sha256">B3yPHKaXnvFWtRChIbabYmUBFZdVfKKXHbWtWidDVF8=</value>
            </values>
        </policy>
        <policy id="media-src">
            <values>
                <value id="mage-base" type="host">https://magento.com</value>
                <value id="devdocs-base" type="host">https://devdocs.magento.com</value>
            </values>
        </policy>
    </policies>
</csp_whitelist>

More articles:


All Articles