Fixed: Content Security Policy(CSP) Magento2

Magento 2 has introduced a new robust tool called “Content Security Policy” (CSP) which is used to defense and prevent different type of attacks like related data injection, click jacking, card skimmers, session hijacking and many more on your Magento 2 store.

Disable Magento 2 Content Security Policy

You can disable the Content Security Policy completely but by disabling the CSP will compromise your store security with more possible attacks. Third party extension(s) in your store also includes third party APIs like fontawesome.com, trustedshops.com, gstatic.com, cloudflare.com, twitter.com etc.
By disabling the csp, all third party extension APIs will directly execute without even checking the security and possible attacks. Hence as a solution, instead of disabling the csp, you can whitelist the external apis.

CSP works in 2 modes

• • reports-only: By default, the csp is set to the default mode. In this mode, magento store simply reports the violations of csp policy without any interfere. These violations are reported to the browser console. CSP has both options for enable/disable the feature for fronend and backend respectively.
  • restrict-mode: In this mode, magento 2 store violates the csp policy. When your store tries to execute the files or urls which is not whitelisted then magento will block those urls from loading which in result does not permit to fully execute or load the page.

Solution: steps to solve and whitelist the csp issue

1) Create or Register your module: app/code/Magemart/Cspfix/registration.php

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

2) Now Create module.xml file at Path:- app/code/Magemart/Cspfix/etc/module.xml

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

3)Now the last step: Create a csp_whitelist.xml to whitelist the external site path:

The naming convention for the csp_whitelist.xml file name is fixed. Here you will simply need to add the external site name to whitelist them. There can be multiple policy under the policies tag.

• policy id=”script-src”
• policy id=”img-src”
• policy id=”font-src”
• policy id=”frame-src”
• policy id=”connect-src”
• policy id=”media-src”
• policy id=”form-action”

<?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="frame-src">
            <values>
                
                <value id="sandbox.paypal.com" type="host">http://www.sandbox.paypal.com</value>
                <value id="youtube.com" type="host">https://www.youtube.com</value>
                <value id="twitter.com" type="host">*.twitter.com</value>
                <value id="paypal.com" type="host">www.paypal.com</value>
            </values>
        </policy>
        
        <policy id="form-action">
            <values>
                <value id="twitter.com" type="host">*.twitter.com</value>
            </values>
        </policy>
        
        <policy id="media-src">
            <values>
                <value id="zopimio" type="host">*.zopim.io</value>
                <value id="zopim" type="host">*.zopim.com</value>
            </values>
        </policy>
        
        <policy id="style-src">
            <values>
                <value id="bing" type="host">*.bing.com</value>
                <value id="googleapis" type="host">*.googleapis.com</value>
                <value id="cloudflare" type="host">*.cloudflare.com</value>
                <value id="typekit" type="host">*.typekit.net</value>
                <value id="twimg" type="host">*.twimg.com</value>
                <value id="twitter.com" type="host">*.twitter.com</value>
                <value id="gstatic" type="host">*.gstatic.com</value>
                <value id="fontawesome" type="host">*.fontawesome.com</value>
                <value id="trustedshops" type="host">*.trustedshops.com</value>
            </values>
        </policy>
        
        <policy id="script-src">
            <values>
            	<value id="google" type="host">*.google.com</value>
                <value id="cloudflare" type="host">*.cloudflare.com</value>
                <value id="fontawesome" type="host">*.fontawesome.com</value>
                <value id="twitter.com" type="host">*.twitter.com</value>
                <value id="zopim" type="host">*.zopim.com</value>
                <value id="usercentrics" type="host">*.usercentrics.eu</value>
                <value id="google-analytics" type="host">*.google-analytics.com</value> 
                <value id="bing" type="host">*.bing.com</value>
                <value id="zdassets" type="host">*.zdassets.com</value>
                
            </values>
        </policy>
        
        <policy id="img-src">
            <values>
                <value id="twimg" type="host">*.twimg.com</value>
                <value id="cloudflare" type="host">*.cloudflare.com</value>
                <value id="fontawesome" type="host">*.bing.com</value>
                <value id="googleadservices" type="host">*.googleadservices.com</value>
                <value id="klarna-base" type="host">*.klarna.com</value>
                <value id="google-analytics" type="host">*.google-analytics.com</value>
                <value id="twitter.com" type="host">*.twitter.com</value>
                <value id="paypal" type="host">*.paypal.com</value>
                <value id="data" type="host">'self' data:</value>
                <value id="google" type="host">*.google.com</value>
                <value id="googlein" type="host">*.google.co.in</value>
                <value id="zopim" type="host">*.zopim.com</value>
                <value id="zopimio" type="host">*.zopim.io</value>
                <value id="mastercard" type="host">*.mastercard.com</value>
            </values>
        </policy>
        <policy id="font-src">
            <values>
                <value id="googleapis" type="host">*.googleapis.com</value>
                <value id="twitter.com" type="host">*.twitter.com</value>
                <value id="cloudflare" type="host">*.cloudflare.com</value>
                <value id="typekit" type="host">*.typekit.net</value>
                <value id="gstatic" type="host">*.gstatic.com</value>
                <value id="trustedshops" type="host">*.trustedshops.com</value>
                <value id="twimg" type="host">*.twimg.com</value>
                <value id="zopim" type="host">*.zopim.com</value>
                <value id="zopimio" type="host">*.zopim.io</value>
            </values>
        </policy>
        
        <policy id="connect-src">
            <values>
                <value id="googleanalytics" type="host">*.google-analytics.com</value>
                <value id="google-analytics" type="host">www.google-analytics.com</value>
                <value id="twitter.com" type="host">*.twitter.com</value>
                <value id="cloudflare" type="host">*.cloudflare.com</value>
                <value id="twimg" type="host">*.twimg.com</value>
                <value id="paypal" type="host">*.paypal.com</value>
                <value id="zdassets" type="host">*.zdassets.com</value>
                <value id="mediator" type="host">wss://widget-mediator.zopim.com</value>
                <value id="zopim" type="host">*.zopim.com</value>
                <value id="zopimio" type="host">*.zopim.io</value>               
                <value id="doubleclick" type="host">https://stats.g.doubleclick.net</value>
            </values>
        </policy> 
    </policies>
</csp_whitelist>