Magento CSP - design inline scripts

Question

I have update my store to Magento version 2.4.6-p6
Aaaand there is an issue with newly added restricted CSP policy on checkout page.

I have a bunch inline scripts that are added via admin panel (Content->Design->Configuration->Theme->Html head). Most of them are being blocked by CSP

What is the safest way to fix this besides moving scripts to the .phtml and adding safe render?

Magento documentation is dead on this topic. Which makes me very frustrated. https://developer.adobe.com/commerce/php/development/security/content-security-policies

P.s. I don't want any strange workarounds that allows unsafe inline scripts globally or on whole checkout page. Because that smells like unsafe option.

EDIT Update For example this script was marked as blocked.

<script type="text/javascript">
  zE('webWidget', 'setLocale', 'NB');
</script>

Answer 1

In Magento 2.4.6-p6, Inline scripts on the checkout page are deprecated. You can resolve this by placing your script in a phtml file. This approach ensures that the script is whitelisted by the Content Security Policy (CSP), thereby fixing the error.

Here's an example script to include in your phtml file, which will be whitelisted by CSP. You can use a similar method for other inline scripts:

<?php
$scriptString = <<<script
require(['jquery'],function($){
    $(document).ready(function() {
        zE('webWidget', 'setLocale', 'NB');
    });
});
script;
?>
<?= /* @noEscape */ $secureRenderer->renderTag('script', [], $scriptString, false) ?>

Place this code in your phtml file, and it should resolve csp the error.

Answer 2

The description is not really dead about this topic at all.

All you have to do is to define your scripts in your custom csp_whitelist.xml

Then define anything you want and need in there

For exemple

<?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="google" type="host">*.google.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>
                <value id="cookiebotScript" type="host">*.cookiebot.com</value>
                <value id="bing" type="host">*.bing.com</value>
                <value id="pinimg" type="host">*.pinimg.com</value>
                <value id="dwin1" type="host">*.dwin1.com</value>
                <value id="criteo" type="host">*.criteo.com</value>
                <value id="clarityOne" type="host">https://www.clarity.ms/tag/uet/25149270</value>
                <value id="clarityTwo" type="host">https://www.clarity.ms/eus-f/s/0.6.37/clarity.js</value>
                <value id="adservicegoogle" type="host">*.googleadservices.com</value>
                <value id="googleadservicescript" type="host">https://www.googleadservices.com/pagead/conversion_async.js</value>
                <value id="googleadsDoubleclick" type="host">*.g.doubleclick.net</value>
                <value id="datatables" type="host">*.datatables.net</value>
                <value id="colissimows" type="host">https://ws.colissimo.fr</value>
            </values>
        </policy>

You can link domain names or you can link direct scripts links

There you have an exemple for scripts but you can do that with everything, fonts, images etc etc

Answer 3

If you don't want to update all your inline scripts to use the secure renderer, you can disable the new checkout CSP settings inside one of your module's config.xml files:

<?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>
            <policies>
                <storefront_checkout_index_index>
                    <scripts>
                        <inline>1</inline>
                        <event_handlers>0</event_handlers>
                    </scripts>
                </storefront_checkout_index_index>
            </policies>
        </csp>
    </default>
</config>

This will make your website slightly less secure, but it's a lot less work if you have a ton of scripts that need updating.