After updating Magento to version 2.3.5, we noticed at our web agency that the browser console was displaying several errors. The errors concerned loading various file types from external sources ("Refused to load the..."). For example, JavaScript, CSS, images, and Google Fonts were affected.
It turned out that the Content Security Policy, or CSP for short, had changed.
The CSP is designed to make Cross-Site Scripting (XSS) attacks more difficult. In such attacks, malicious JavaScript code is injected into a website, for example, to intercept and steal credit card data from online stores.
To make such attacks more difficult, external sources must be classified as trusted. This is particularly important when using a Content Delivery Network, as the provider needs to be classified as a trusted source.
To do this, you can create a csp_whitelist.xml file in a custom module.
How to create a module will not be covered explicitly in this article.
The csp_whitelist.xml file must be added to the etc directory of the module.
The XML file must have the following structure:
<?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="style-src">
<values>
<value id="cdn_jsdelivr_styles" type="host">https://cdn.jsdelivr.net><value>
</values>
</policy>
</policies>
</csp_whitelist>
When defining the structure, it is important to add the correct policy type using the id attribute of the <policy> element. The different types can be found in the Magento 2 developer documentation.
https://devdocs.magento.com/guides/v2.4/extension-dev-guide/security/content-security-policies.html
If you want to add multiple types, you need a separate <policy> element with the corresponding id for each type.
<?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="style-src">
<values>
<value id="cdn_jsdelivr_styles" type="host">https://cdn.jsdelivr.net</value>
</values>
</policy>
<policy id="script-src">
<values>
<value id="cdn_jsdelivr_scripts" type="host">https://cdn.jsdelivr.net</value>
<value id="gtm_scripts" type="host">https://www.googletagmanager.com</value>
<value id="hotjar_scripts" type="host">https://script.hotjar.com</value>
<value id="hotjar_statics" type="host">https://static.hotjar.com</value>
</values>
</policy>
</policies>
</csp_whitelist>
Once the changes have been made, you also need to clear the caches.
It is also important to understand that, at least in our case, Magento switched to report-only mode during the update. This means that external scripts are reported, but they are not actually blocked. To protect against XSS attacks, the mode must be switched to strict. However, once this is done, all external scripts that have not been classified as trusted will be blocked.
Encountered at our agency with Magento 2.3.5
