This warning is displayed because somewhere in the code unsafe-inline is not wrapped in single-quotes. https://content-security-policy.com/unsafe-inline/. A quick search reveals that Magento is actually using the single quotes with the unsafe-inline directive:
But one module is causing the issue: Paypal_Braintree. Note the policy style-src in the etc/csp_whitelist.xml file.
<policy id="style-src">
<values>
<value id="unsafe_inline" type="host">unsafe-inline</value>
</values>
</policy>
Even the warning message makes more sense, when we see this code. What is expected as a value is a hostname, not a key word, such as unsafe-inline.
To fix this, we need to overwrite this value in the etc/csp_whitelist.xml of a custom module. At a minimum, the file would look like this:
<?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="unsafe_inline" type="host">assets.braintreegateway.com</value>
</values>
</policy>
</policies>
</csp_whitelist>
Make sure this file is loaded after the one from Paypal_Braintree by modifying the etc/module.xml file of the custom module. It should look something like this (this example uses Cyberic_Csp as a custom module):
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Cyberic_Csp">
<sequence>
<module name="Magento_Csp" />
<!-- Fix the unsafe_inline warning -->
<module name="Paypal_Braintree" />
</sequence>
</module>
</config>
Then run:
bin/magento setup:upgrade
In developer mode, that would be sufficient. In production mode, deploy the static content as well.
Now, if we look at the console again, we will notice that the warning message is gone.