Magento – Magento 2 Refused to frame ‘https://www.facebook.com/’ because an ancestor violates the following Content Security Policy directive:

I have this code and it works fine:

<?xml version="1.0" encoding="UTF-8"?>
<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="style-src">
            <values>
                <value id="bootstrapCdn" type="host">*.bootstrapcdn.com</value>
            </values>
        </policy>
    </policies>
</csp_whitelist>

Try to clear these folders manually also:

rm -rf var/cache/*
rm -rf var/page_cache/*
rm -rf pub/static/*

At the end of the console report, it says:

"...was delivered in report-only mode, but does not specify a 'report-uri'; the policy will have no effect. Please either add a 'report-uri' directive, or deliver the policy via the 'Content-Security-Policy' header."

This is not saying that the the domain values for each of the listed policies are not whitelisted, they are by default (this error made me believe they weren't until I really looked at it closer). It's saying that there is no report-uri directive.

From the devdocs, it says:

Regardless of restrict or report-only mode, CSP violations may be reported to an endpoint for collection. The URL to use for reporting by browsers can be configured in your custom module’s config.xml file:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Store:etc/config.xsd">
    <default>
        <csp>
            <mode>
                <storefront>
                    <report_uri>http://csp-reporting-service.com/my-project/endpoint</report_uri>
                </storefront>
                <admin>
                    <report_uri>http://csp-reporting-service.com/my-project/endpoint</report_uri>
                </admin>
            </mode>
        </csp>
    </default>
</config>

By default, CSP sends errors to the browser console, but can be configured to collect error logs by HTTP request. In addition, there are a number of third-party services that you can use to monitor, collect, and report CSP violations. So, either configure it to be reported to the error logs by https request, or create a custom module and configure the report_uri directive with the CSP reporting service of your liking. https://devdocs.magento.com/security/content-security-policy-overview.html