The Content Security Policy (CSP) in Adobe Commerce (Magento) restricts the types of content that can be loaded on a page to protect against malicious attacks, such as cross-site scripting (XSS). When an iframe is added, and a JavaScript library is loaded from an external source, these resources must be whitelisted explicitly using the csp_whitelist.xml file.
In this specific case:
The frame-src directive controls the sources from which iframes can be embedded. Since the developer is embedding an iframe from an external domain, they need to whitelist this domain for frame-src.
The script-src directive controls the sources from which JavaScript files can be loaded. The external JavaScript library must be whitelisted under script-src to allow it to execute.
Therefore, the correct policy IDs to whitelist are:
Here’s how to update the csp_whitelist.xml file with the correct directives:
< ?xml version="1.0"? >
< whitelist xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Csp:etc/csp_whitelist.xsd" >
< policy id="frame-src" >
< values >
< value id="your-external-domain.com"/ >
< /values >
< /policy >
< policy id="script-src" >
< values >
< value id="your-external-domain.com"/ >
< /values >
< /policy >
< /whitelist >
Replace your-external-domain.com with the actual domain of the external iframe and JavaScript source.
Additional Resources :
CSP Policies and Directives : Explanation of all supported CSP directives and how to configure them.