Magento 2.3.5 Content Security Policies(CSP) | CSP Warnings | How to Fix

Introduction

Magento 2.3.5 added a new module Magento_Csp which supports CSP (Content Security Policies) headers and provides ways to configure them. These policies can be configured for adminhtml and frontend areas separately.

What is an CSP?

Content Security Policies (CSP) are a powerful tool to mitigate against Cross Site Scripting (XSS) and related attacks, including card skimmers, session hijacking, clickjacking, and more.

Web servers send CSPs in response HTTP headers (namely Content-Security-Policy and Content-Security-Policy-Report-Only) to browsers that whitelist the origins of scripts, styles, and other resources.

See Content Security Policy (CSP) and Content-Security-Policy to learn more about CSP and each individual policy.

Together, CSPs and built-in browser features help prevent:

• Loading a malicious script from an attacker’s website
• A malicious inline script from sending credit card info to an attacker’s website
• Loading a malicious style that will make users click on an element that wasn’t supposed to be on a page

CSP Modes

Content Security Policy works in two modes:
report – only – In this mode, Magento reports the policy violations but does not act upon it. It is mainly used for debugging. CSP works in this mode by default.

restrict mode – Magento acts in the case of policy violations.

How to Fix – You are working on a Magento 2.3.5 project and you have a console full of red lines?
How to add CSP whitelist using Magento 2 custom extension?

Step 1: You need to create required file for cutom module.(registration.php and etc/module.xml)

Step 2: You need to create new file etc/csp_whitelist.xml in your module.
I have whitelisted some third party domain. You need to whitelist domain as per your requirement.

<?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="google" type="host">*.google.com</value>
                <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>
            </values>
        </policy>
        <policy id="style-src">
            <values>
                <value id="google-apis" type="host">*.googleapis.com</value>
		<value id="cloudflare" type="host">*.cloudflare.com</value>
                <value id="twitter.com" type="host">*.twitter.com</value>
            </values>
        </policy>
        <policy id="img-src">
            <values>
		<!-- Data Scheme - Base64 Encoded Images -->
                <value id="data-image" type="host">'self' data:</value>			
		<value id="paypal" type="host">*.paypal.com</value>
                <value id="twitter.com" type="host">*.twitter.com</value>
            </values>
        </policy>
        <policy id="connect-src">
            <values>
                <value id="google-analytics" type="host">*.google-analytics.com</value>
		<value id="paypal" type="host">*.paypal.com</value>
            </values>
        </policy>
        <policy id="font-src">
            <values>
		<!-- Data Scheme - Base64 Encoded Fonts -->
		<value id="data-font" type="host">'self' data:</value>
				
		<value id="gstatic" type="host">*.gstatic.com</value>
		<value id="twitter.com" type="host">*.twitter.com</value>
            </values>
        </policy>
        <policy id="frame-src">
            <values>
                <value id="geostag" type="host">*.google.com</value>
                <value id="paypal" type="host">*.paypal.com</value>
            </values>
        </policy>
    </policies>
</csp_whitelist>

Step 3: To create a new file etc/config.xml in your module.

This step should only follow if you already whitelisted all the hosts as per your customizations. This is to change the CSP mode from report-only to restrict. After changing to restrict mode, non-whitelisted third-party content will not be loaded on your store.

<?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>
            <mode>
                <storefront>
                    <report_only>0</report_only>
                </storefront>
                <admin>
                    <report_only>0</report_only>
                </admin>
            </mode>
        </csp>
    </default>
</config>

we hope this technical blog is useful for you. please leave comment if you have any questions!

Thank you ):