Come Risolvere il Content Security Policy (CSP) su Magento

Il Content Security Policy (CSP) è una funzionalità di sicurezza web che aiuta a rilevare e mitigare determinati tipi di attacchi, incluso il Cross Site Scripting (XSS) e l’iniezione di dati, che potrebbero essere utilizzati per tutto, dal furto di dati agli attacchi di malware. CSP è supportato in Magento 2.3.5 e versioni successive.

Configurazione CSP in Magento 2

Quando aggiorni a Magento 2.3.5, potresti riscontrare problemi di caricamento di risorse a causa del CSP. Per risolvere questo problema, devi configurare correttamente il CSP. Ecco i passaggi per farlo:

Step 1: Creare un Modulo Personalizzato

Prima di tutto, crea un modulo personalizzato per configurare il CSP. Supponiamo di creare un modulo chiamato Custom_Csp.

1 – Crea il file registration.php nel percorso app/code/Custom/Csp/

<?php
    \Magento\Framework\Component\ComponentRegistrar::register(
        \Magento\Framework\Component\ComponentRegistrar::MODULE,
        'Dolphin_Cspallow',
        __DIR__
    );

2 – Crea il file module.xml nel percorso app/code/Custom/Csp/etc/

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Dolphin_Cspallow" setup_version="1.0.0" />
</config>

3 – Crea il file csp_whitelist.xml nel percorso app/code/Custom/Csp/etc/

<?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>
                <value id="bing" type="host">*.bing.com</value>
                <value id="zopim" type="host">*.zopim.com</value>
                <value id="zdassets" type="host">*.zdassets.com</value>
                <value id="google" type="host">*.google.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="fontawesome" type="host">*.fontawesome.com</value>
                <value id="bing" type="host">*.bing.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="fontawesome" type="host">*.bing.com</value>
                <value id="zopim" type="host">*.zopim.com</value>
                <value id="zopimio" type="host">*.zopim.io</value>
                <value id="doubleclick" type="host">*.doubleclick.net</value>
                <value id="google" type="host">*.google.com</value>
                <value id="googlein" type="host">*.google.co.in</value>
                <value id="mastercard" type="host">*.mastercard.com</value>
            </values>
        </policy>
        <policy id="connect-src">
            <values>
                <value id="google-analytics" type="host">www.google-analytics.com</value>
                <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>
                <value id="zdassets" type="host">*.zdassets.com</value>
                <value id="zopim" type="host">*.zopim.com</value>
                <value id="zopimio" type="host">*.zopim.io</value>
                <value id="mediator" type="host">wss://widget-mediator.zopim.com</value>
                <value id="googleanalytics" type="host">*.google-analytics.com</value>
                <value id="doubleclick" type="host">https://stats.g.doubleclick.net</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>
                <value id="zopim" type="host">*.zopim.com</value>
                <value id="zopimio" type="host">*.zopim.io</value>
            </values>
        </policy>

        <policy id="frame-src">
            <values>
                <value id="youtube.com" type="host">https://www.youtube.com</value>
                <value id="sandbox.paypal.com" type="host">http://www.sandbox.paypal.com</value>
                <value id="paypal.com" type="host">www.paypal.com</value>
                <value id="twitter.com" type="host">*.twitter.com</value>
            </values>
        </policy>
        
        <policy id="media-src">
            <values>
                <value id="zopim" type="host">*.zopim.com</value>
                <value id="zopimio" type="host">*.zopim.io</value>
            </values>
        </policy>

        <policy id="form-action">
            <values>
                <value id="twitter.com" type="host">*.twitter.com</value>
            </values>
        </policy>
    </policies>
</csp_whitelist>

Step 2: Abilitare e Configurare il Modulo

1. Abilita il modulo eseguendo i seguenti comandi:shCopia codicebin/magento module:enable Custom_Csp bin/magento setup:upgrade bin/magento cache:clean bin/magento cache:flush
2. Controlla la Console del BrowserApri il tuo sito web e verifica che non ci siano errori CSP nella console del browser. Se ci sono, aggiorna csp_whitelist.xml per consentire le risorse bloccate.

Step 3: Aggiornamenti Futuri

Con CSP abilitato e configurato, assicurati di mantenere il file csp_whitelist.xml aggiornato man mano che aggiungi nuove risorse al tuo sito.