Magento 2.3.5-p1 CDN Configuration Content Security Policy directive

Question

I just configured cloudfront to have a CDN for static files and media, but there's a big problem.

As soon as I entered the links to the CDN in the Magento 2 back office, no more CSS / JS / image files are displayed or executed.

I assume this is from the CSP module that was added. However my question is: How do we get the cloudfront not to be blocked like this?

Do we really have to create a module specifically for this? Didn't they think about those who use CDN as cloudfront?

Thank you in advance for your answer.

Answer 1

For me, the only solution was to add a module for CSP exceptions.

app/code/mycompany/Csp

in the /etc dir, add a file called csp_whitelist.xml

<?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="your-cdn" type="host">your-cdn-url</value>
               
            </values>
        </policy>
        <policy id="style-src">
            <values>
                <value id="your-cdn" type="host">your-cdn-url</value>
               
            </values>
        </policy>
        <policy id="img-src">
            <values>
                <value id="your-cdn" type="host">your-cdn-url</value>
                
            </values>
        </policy>
        <policy id="connect-src">
            <values>
                <value id="your-cdn" type="host">your-cdn-url</value>
              
            </values>
        </policy>
        <policy id="font-src">
            <values>
                <value id="your-cdn" type="host">your-cdn-url</value>
          
            </values>
        </policy>

        <policy id="frame-src">
            <values>
                <value id="your-cdn" type="host">your-cdn-url</value>
            
            </values>
        </policy>

        <policy id="media-src">
            <values>
         
            </values>
        </policy>

        <policy id="form-action">
            <values>
                <value id="your-cdn" type="host">your-cdn-url</value>
             
            </values>
        </policy>
    </policies>
</csp_whitelist>