The Content Security Policy (CSP) is a security standard that aids in the prevention of several forms of attacks, such as cross-site scripting (XSS) and data injection. It enables web developers to specify which resources (including JavaScript, CSS, fonts, and pictures) can be loaded and run on a web page.
Here’s a step-by-step guide for building a basic Magento module to whitelist specified resources with the csp_whitelist.xml file:
Step 1: Create the Module Directory Structure
In your Magento installation directory, go to app/code and create a new directory for your module. For example:
app/code/YourCompany/Whitelist
Step 2: Create Module Registration File:
Create a file called registration.php in your module directory (YourCompany/Whitelist) and paste the following code inside:
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'YourCompany_Whitelist',
__DIR__
);
Step 3: Create Module Configuration File:
Create a file called module.xml inside your module directory (YourCompany/Whitelist) with the following content:
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="YourCompany_Whitelist" setup_version="1.0.0"/>
</config>
Step 4: Create CSP Whitelist Configuration File:
Create a directory called etc within your module directory (YourCompany/Whitelist). Then, create a file called csp_whitelist.xml inside the etc directory with the following content:
<?xml version="1.0"?>
<config 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="example" type="host">https://example.com</value>
</values>
</policy>
<!-- Add more policies as needed -->
</policies>
</config>
Step 5: Enable the Module:
To enable the module, run the following commands from Magento’s root directory:
php bin/magento module:enable YourCompany_Whitelist
php bin/magento setup:upgrade
Step 6: Test
After you’ve enabled the module, review the source of your website’s HTML to ensure that the CSP whitelist is properly configured. The provided resources should now be whitelisted in the corresponding directives.
Before you deploy the following CSP policies to your Magento website, make sure to evaluate and customise them to meet your individual needs. Some policies may not be necessary for your website, thus only the most important sources should be whitelisted. After testing, carefully examine each policy and make adjustments as needed to maintain a balance of security and functionality.
<csp_whitelist xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Csp:etc/csp_whitelist.xsd">
<policies>
<!-- Default policy -->
<policy id="default-src">
<values>
<!-- Add default sources as needed -->
<value id="self" type="host">'self'</value>
</values>
</policy>
<!-- Base URI policy -->
<policy id="base-uri">
<values>
<!-- Add base URI sources as needed -->
<value id="example" type="host">example.com</value>
</values>
</policy>
<!-- Child Source policy -->
<policy id="child-src">
<values>
<!-- Add child source as needed -->
<value id="workers" type="host">workers.example.com</value>
</values>
</policy>
<!-- Connect Source policy -->
<policy id="connect-src">
<values>
<!-- Add connect sources as needed -->
<value id="google-analytics" type="host">www.google-analytics.com</value>
</values>
</policy>
<!-- Font Source policy -->
<policy id="font-src">
<values>
<!-- Add font sources as needed -->
<value id="google-fonts" type="host">fonts.googleapis.com</value>
</values>
</policy>
<!-- Form Action policy -->
<policy id="form-action">
<values>
<!-- Add form action endpoints as needed -->
<value id="submit" type="host">submit.example.com</value>
</values>
</policy>
<!-- Frame Ancestors policy -->
<policy id="frame-ancestors">
<values>
<!-- Add frame ancestor sources as needed -->
<value id="parent" type="host">parent.example.com</value>
</values>
</policy>
<!-- Frame Source policy -->
<policy id="frame-src">
<values>
<!-- Add frame sources as needed -->
<value id="example" type="host">example.com</value>
</values>
</policy>
<!-- Image Source policy -->
<policy id="img-src">
<values>
<!-- Whitelisting images -->
<value id="google-ads" type="host">www.google.co.uk</value>
</values>
</policy>
<!-- Manifest Source policy -->
<policy id="manifest-src">
<values>
<!-- Add manifest sources as needed -->
<value id="manifest" type="host">manifest.example.com</value>
</values>
</policy>
<!-- Media Source policy -->
<policy id="media-src">
<values>
<!-- Add media sources as needed -->
<value id="media" type="host">media.example.com</value>
</values>
</policy>
<!-- Object Source policy -->
<policy id="object-src">
<values>
<!-- Add object sources as needed -->
<value id="object" type="host">object.example.com</value>
</values>
</policy>
<!-- Script Source policy -->
<policy id="script-src">
<values>
<!-- Whitelisting scripts -->
<value id="hotjar" type="host">static.hotjar.com</value>
</values>
</policy>
<!-- Style Source policy -->
<policy id="style-src">
<values>
<!-- Add style sources as needed -->
<value id="style" type="host">style.example.com</value>
</values>
</policy>
</policies>
</csp_whitelist>
