Magento 2.3.5 Content Security Policy false positive cdn fonts

https://magento.stackexchange.com/questions/332359

15-04-2021
|

Domanda

Since the update of 2.3.5 that came out today Magento built in "Content Security Policy" and that's great but now I'm wondering how to ignore/whitelist CDN font's that are now being reported as a false positive in the console log. Also it says Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

Does someone have more experience with "Content Security Policy" that can help me out?

[Report Only] Refused to load the script 'https://kit.fontawesome.com/a0b92fa8c0.js' because it violates the following Content Security Policy directive: 
"script-src assets.adobedtm.com geostag.cardinalcommerce.com 1eafstag.cardinalcommerce.com geoapi.cardinalcommerce.com 1eafapi.cardinalcommerce.com songbird.cardinalcommerce.com includestest.ccdc02.com www.googleadservices.com www.google-analytics.com secure.authorize.net test.authorize.net www.paypal.com www.sandbox.paypal.com www.paypalobjects.com t.paypal.com s.ytimg.com video.google.com vimeo.com www.vimeo.com js.authorize.net jstest.authorize.net js.braintreegateway.com cdn-scripts.signifyd.com www.youtube.com 'self' 'unsafe-inline' 'unsafe-eval'". 
Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

Soluzione

Hello I am also just about to read in. If you have an own module in the app/code then you must create the following file.

app/code/modul_modul/etc/csp_whitelist.xml

Example:

<?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="script-src">
            <values>
                <!--CDN-->
                <value id="cloudflare" type="host">*.cloudflare.com</value>

                <!--Google-->
                <value id="google-analytics" type="host">www.google-analytics.com</value>

                <!--Functions-->
                <value id="trustedshops" type="host">*.trustedshops.com</value>
                <value id="usercentrics" type="host">*.usercentrics.eu</value>
            </values>
        </policy>
        <policy id="style-src">
            <values>
                <!--CDN-->
                <value id="cloudflare" type="host">*.cloudflare.com</value>

                <!--Design-->
                <value id="typekit" type="host">*.typekit.net</value>

                <!--Functions-->
                <value id="trustedshops" type="host">*.trustedshops.com</value>
                <value id="usercentrics" type="host">*.usercentrics.eu</value>
            </values>
        </policy>
        <policy id="img-src">
            <values>
                <!--CDN-->
                <value id="cloudflare" type="host">*.cloudflare.com</value>
                <value id="klarna-base" type="host">https://cdn.klarna.com</value>

                <!--Payments-->
                <value id="paypal" type="host">*.paypal.com</value>

                <!--Video-->
                <value id="vimeocdn" type="host">*.vimeocdn.com</value>
                <value id="youtube-img" type="host">https://s.ytimg.com</value>

                <!--Functions-->
                <value id="usercentrics" type="host">*.usercentrics.eu</value>
            </values>
        </policy>
        <policy id="connect-src">
            <values>
                <!--CDN-->
                <value id="cloudflare" type="host">*.cloudflare.com</value>

                <!--Payments-->
                <value id="paypal" type="host">*.paypal.com</value>
            </values>
        </policy>
        <policy id="font-src">
            <values>
                <!--CDN-->
                <value id="cloudflare" type="host">*.cloudflare.com</value>

                <!--Design-->
                <value id="typekit" type="host">*.typekit.net</value>

                <!--Functions-->
                <value id="trustedshops" type="host">*.trustedshops.com</value>
            </values>
        </policy>
    </policies>
</csp_whitelist>

in your case

<?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="script-src">
            <values>
                <value id="fontawesome" type="host">*.fontawesome.com</value>
            </values>
        </policy>
    </policies>
</csp_whitelist>

Altri suggerimenti

You can just disable Magento_Csp entirely in Magento 2.3.5 since it offers little or no value.

More info https://maxchadwick.xyz/blog/magento-2-3-5-csp-fools-errand https://maxchadwick.xyz/blog/magento-disable-csp

Try below code :

<csp_whitelist xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Csp/etc/csp_whitelist.xsd">
<policy id="script-src">
        <values>
            <value id="fontawesome-com" type="host">fontawesome.com</value>
        </values>
    </policy>
</csp_whitelist>

etc/csp_whitelist.xml

Need to implement our own whitelist using above file

see https://devdocs.magento.com/guides/v2.4/extension-dev-guide/security/content-security-policies.html

pros:

format evaluation using schema

cons:

there is no way to declare schema type entry
however you can whitelist schemes declaring host with schema name, just need to add : after the schema name eg: <value id="data-schema" type="host">data:</value>

this is the recommended way by Magento

etc/config.xml

whitelist can be declared as config node with specific tags using above file

see vendor/magento/module-csp/etc/config.xml

pros:

can be inserted to the core_config_data table via environment configuration or data patch

cons:

if it is stored in DB data patch required to change/modify

Implement custom policy collector

see vendor/magento/module-csp/etc/di.xml and vendor/magento/module-csp/Model/Collector/CspWhitelistXmlCollector.php

inject your custom collector into collectors argument of Magento\Csp\Model\CompositePolicyCollector.
Custom collector have to implements Magento\Csp\Api\PolicyCollectorInterface
insert policies using Magento\Csp\Model\Policy\FetchPolicy

pros:

you can use nonce type whitelists
highly customizable
possible to create standard, composer ready solution with chance to adjust whitelist thru configuration (eg using https://devdocs.magento.com/guides/v2.4/ext-best-practices/tutorials/dynamic-row-system-config.html to store whitlelist element)

cons:

developer knowledge required

as said by Materix, put the xml in the etc folder. I put that file in the following path: /app/code/Magento/Csp/etc/csp_whitelist.xml

I wish it could help someone.

CSP Informations for Google Services: developers.google.com/tag-manager/web/csp

Autorizzato sotto: CC-BY-SA insieme a attribuzione

Non affiliato a magento.stackexchange