Refused to load the script because it violates Content Security Policy: Magento2

Question

I am using Meetanshi Googgle Invisible Captcha Extension, Integrated with the Keys and verified they are correct.

Now when i access my form Page where the captcha suppose to be visible, it is showing the error:

I have tried with both the Captcha Version v2 and V3 Key pairs but still it is showing the error.

Also deleted all the contents, re-deploy all contents , cache removed, but i am still facing the error.

Any help regarding this?

Answer 1

This error showing because of Magento Content Security Policies. You can check detailed info about Magento Content Security Policies at the Magento Official link. https://devdocs.magento.com/guides/v2.4/extension-dev-guide/security/content-security-policies.html

If you don't want to use this feature of Magento then you can simply disable this module by the below command.

bin/magento module:disable Magento_Csp

Answer 2

Ok, After reading the topic from Magento DOCS, best way is to create the custom module and whitelist the resources and domains that are not harmful for your system.

Create Your module as Namespace/Csp in app/code folder

register you module by creating app/code/Namespace/Csp/registration.php

<?php

\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'Namespace_Csp',
__DIR__
);

Create Config file in ../etc/config.xml with the following contents

<?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>https://domain.com/</report_uri>
            </storefront>
            <admin>
                <report_uri>https://domain.com/</report_uri>
            </admin>
        </mode>

    </csp>
</default>

Your module.xml file like this:

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Namespace_Csp" setup_version="1.0.0" />

And then finally your csp_whitelist.xml to add all the resource that are required to whitelist as follows:

<?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="cloudflare" type="host">*.cloudflare.com</value>
            <value id="twitter.com" type="host">*.twitter.com</value>
            <value id="google-analytics" type="host">*.google-analytics.com</value>
            <value id="google" type="host">*.google.com</value>
            <value id="twimg" type="host">*.twimg.com</value>
            <value id="gstatic" type="host">*.gstatic.com</value>
            <value id="trustedshops" type="host">*.trustedshops.com</value>
            <value id="usercentrics" type="host">*.usercentrics.eu</value>
            <value id="fontawesome" type="host">*.fontawesome.com</value>
        </values>
    </policy>
</policies>
</csp_whitelist>