How to Fix Content Security Policy (CSP) Magento 2

How it affect?

When some resources from magento tries to include or execute an external site’s file/property then magento block it from loading immediately if it’s not whitelisted.

How to Solve this issue?

1) Register your module at Path : app/code/Shailesh/Policy/registration.php

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

2) Create module.xml file at Path:- app/code/Shailesh/Policy/etc/module.xml

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

3) Create csp_whitelist.xml to whitelist properties in site at path:- app/code/Shailesh/Policy/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>
                <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>