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:

frame-src: to allow the embedding of content from an external domain in an iframe.

script-src: to allow the loading and execution of JavaScript files from the external domain.

Here’s how to update the csp_whitelist.xml file with the correct directives:

Replace your-external-domain.com with the actual domain of the external iframe and JavaScript source.

Additional Resources:

Adobe Commerce Developer Guide: Content Security Policy (CSP)

CSP Policies and Directives: Explanation of all supported CSP directives and how to configure them.