ReCAPTCHA is generating Content Security Policy warnings

Question

I implemented reCAPTCHA v3 on my website, all is working fine, I'm getting a score back and everything on the server-side.

However, I'm getting tons of Content Security Policy warnings in the console (Firefox):

Content Security Policy: Ignoring “'unsafe-inline'” within script-src: ‘strict-dynamic’ specified
Content Security Policy: Ignoring “https:” within script-src: ‘strict-dynamic’ specified
Content Security Policy: Ignoring “http:” within script-src: ‘strict-dynamic’ specified
Content Security Policy: Ignoring “'unsafe-inline'” within script-src: ‘strict-dynamic’ specified
Content Security Policy: Ignoring “https:” within script-src: ‘strict-dynamic’ specified
Content Security Policy: Ignoring “http:” within script-src: ‘strict-dynamic’ specified

No idea why I'm getting these. I just implemented v3 as usual.

In the head tag:

<script src='https://www.google.com/recaptcha/api.js?render=SITEKEYHERE'></script>

In the body tag:

<form id="loginForm" action="test.php" method="post"> 

    ...

    <input type='hidden' name='recaptcha_response' id='recaptchaResponse'>

</form> 

...

<script src="https://www.google.com/recaptcha/api.js?render=SITEKEYHERE "></script>
<script>
    grecaptcha.ready(function () {
        grecaptcha.execute('SITEKEYHERE', { action: 'login' }).then(function (token) {
            var recaptchaResponse = document.getElementById('recaptchaResponse');
            recaptchaResponse.value = token;
        });
    });
</script>

I'm expecting there to be no warnings at all, yet I'm getting 6.

Answer 1

请参考此示例代码将其添加到您的 head 标签中

Content-Security-Policy: script-src 'self' https://apis.google.com 您将从本页获取更多信息 https://developers.google.com/web/fundamentals/security/csp/

还修复了混合内容错误