How to Fix Content Security Policy (CSP) Magento 2

Magento 2.3.5 introduced a new feature called “Content Security Policy (CSP)” to provide additional layers of defense for Magento installations by helping to detect and mitigate Cross-Site Scripting (XSS) and related data injection attacks. Contact Dolphin Web Solution for Magento 2 development.

Content Security Policy (CSP) can work in two modes:

• report-only – In this mode, Magento reports policy violations but does not interfere. This mode is useful for debugging. By default, CSP violations are written to the browser console, but they can be configured to be reported to an endpoint as an HTTP request to collect logs. There are a number of services that will collect, store, and sort your store’s CSP violations reports for you.
• restrict mode – In this mode, Magento acts on any policy violations.

By default, CSP is configured in report-only mode, which allows merchants and developers to configure policies to work according to their custom code. After the policies have been configured, switch the mode to restrict.

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?

Magento 2.3.5 added a new module module-csp ( Magento_Csp ) which supports Content Security Policies ( CSP ) headers and provides ways to configure them. The policies can be configured for backend and frontend areas both.

You need to create below file in any of the modules which is enable. Let me show you by creating new module.

Steps to whitelist your external resources in your Magento 2 Store:

1)  Register your module at Path :- app/code/Dolphin/Cspallow/registration.php

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

2) Create module.xml file at  Path:- app/code/Dolphin/Cspallow/etc/module.xml

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

You can add your third party urls / domains to csp_whitelist.xml.

For example if you are facing error like below :

Content Security Policy: The page’s settings blocked the loading of a resource at https://www.gstatic.com/recaptcha/releases/recaptcha__en.js (“script-src”).

The above error is related to “script” is blocking from google captcha provider. So You need to allow its whitelist code in csp_whitelist.xml file mentioned as above. Let me show you how to add code for it.

<policy id="script-src">
    <values>
         <value id="gstatic" type="host">*.gstatic.com</value>
    </values>
</policy>

Do share your thoughts on Magento CSP in the Comments section below.

Thank you.

Chirag Parmar

Author