Magento 2.3.5 Content Security Policy (CSP) data:image

Question

Has anyone found a way to integrate the data:image/png as csp_whitelist?

[Report Only] Refused to load the image 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGP6zwAAAgcBApocMXEAAAAASUVORK5CYII=' because it violates the following Content Security Policy directive: "img-src widgets.magentocommerce.com www.googleadservices.com www.google-analytics.com t.paypal.com www.paypal.com www.paypalobjects.com fpdbs.paypal.com fpdbs.sandbox.paypal.com *.vimeocdn.com s.ytimg.com *.cloudflare.com https://cdn.klarna.com *.paypal.com https://s.ytimg.com *.usercentrics.eu 'self' 'unsafe-inline'".

Answer 1

In your custom csp_whitelist.xml (eg. in a custom modules etc-directory) add this:

<policy id="img-src">
  <values>
    <value id="data" type="host">data:</value>
  </values>
</policy>

The colon as suffix is the important stuff here.

Answer 2

You can add a domain to the whitelist for a policy (like script-src, style-src, font-src and others) by adding a csp_whitelist.xml to your custom module’s etc folder.

<?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="script-src">
            <values>
                <value id="devdocs-base" type="host">https://devdocs.magento.com</value>
                <value id="magento" type="host">https://magento.com</value>
            </values>
        </policy>
        <policy id="connect-src">
            <values>
                <value id="devdocs" type="host">https://devdocs.magento.com</value>
            </values>
        </policy>
    </policies>
</csp_whitelist>

From: https://devdocs.magento.com/guides/v2.3/extension-dev-guide/security/content-security-policies.html

Related: Magento 2.3.5 Content Security Policy false positive cdn fonts