How To Use CSP in Custom Module Magento 2

What is CSP in Magento 2?

CSP in module 2, i.e., Content Security Policy is a robust tool introduced to prevent attacks on your Magento 2 store that aims to offer an additional layer of defence to detect and fight against Cross-Site Scripting (XSS) and related attacks, including card skimmers, session hijacking, clickjacking, and more.

Once configured, the application can enforce policies like these:

  • Any resource, such as .js, .css, .jpg, or .ttf files, can only be loaded from the store’s domain
  • Iframes can only include pages from the store itself
  • AJAX requests can only be sent to the store
  • Forms can only be sent to the store
  • Only whitelisted inline scripts and styles can be compiled by the browser

Some domains have already been whitelisted for modules that require it. For instance if the Magento_Paypal the module is installed, www.paypal.com is already whitelisted for the script-src policy.

You can add a domain to the whitelist for a policy (like script-srcstyle-srcfont-src and others) by adding a csp_whitelist.xml to your custom modules etc folder.

If you don’t know how to create a custom module so you can refer to this blog for a custom module-> How to Create Hello World Module in Magento 2

1. CSP in module 2 Create a csp_whitelist.xml file in VendorExtensionetc

<?xml version="1.0"?>
<!--
/**
 * Webkul_Tabs
 * @category  Webkul
 * @package   Webkul_Tabs
 * @author    Webkul
 * @copyright Copyright (c)  Webkul Software Private Limited (https://webkul.com)
 * @license   https://store.webkul.com/license.html
 */
-->
<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="stripe" type="host">js.stripe.com</value>
            </values>
        </policy>
        <policy id="frame-src">
            <values>
                <value id="stripe" type="host">js.stripe.com</value>
            </values>
        </policy>
        <policy id="connect-src">
            <values>
                <value id="purechat" type="host">api.purechat.com</value>
            </values>
        </policy>
    </policies>
</csp_whitelist>

Happy Coding!


Source link