A Developer working on a Magento 2 store needs to modify the Content Security Policy (CSP) to allow loading of images from a trusted external domain while maintaining strict policies for other resources. To accomplish this, the csp_whitelist.xml file must be updated. Which code snippet should the Developer use to update the CSP configuration?

The cspwhitelist.xml file is used to define Content Security Policies (CSPs) in Adobe Commerce. To specifically allow images from an external domain, the img-src directive must be used. This directive restricts the URLs from which images can be loaded on a page. Option B correctly uses the node to target only image resources. By adding the external domain website.com as a host type value within this policy, it precisely fulfills the requirement without unnecessarily loosening security for other resource types like scripts or styles, thus maintaining strict policies elsewhere.

A. The media-src directive is incorrect as it is used to specify valid sources for media elements like

1. Adobe Commerce Developer Documentation

"Content Security Policies": This document explicitly details the configuration of CSPs using cspwhitelist.xml. It provides examples showing the correct XML structure and lists img-src as the directive for defining valid sources for images.

Section: Whitelist a resource

Reference: "To whitelist a resource

you must create a cspwhitelist.xml file... The following example adds a policy for the script-src fetch directive..." (The structure shown is identical to the correct answer

just with a different directive).

2. Adobe Commerce Developer Documentation

"Content Security Policies": The same document provides a table of common CSP directives and their purposes.

Section: Common directives

Reference: The table defines img-src as for "images and favicons

" media-src for "

" and default-src as a "fallback for the other fetch directives

" confirming the specific and correct use of img-src for this scenario.