jsprecaptchamicrosoft-edgecontent-security-policygrecaptcha

Google reCAPTCHA v2 encountering CSP14312 error resource blocked in Microsoft Edge

I am using strict CSP in my website and I use Google reCAPTCHA v2 (checkbox), however, the checkbox renders in other browsers but not in Microsoft Edge, specifically Microsoft Edge 44.18362.449.0. But when using Microsoft Edge 85.0.564.51 the checkbox is loaded properly.

Below is how my CSP configuration looks like:

default-src 'self' https://*.olark.com; script-src 'self' 'unsafe-inline' 'unsafe-eval' 'nonce-$nonce_value' https://*.olark.com https://www.google.com/recaptcha/ https://www.gstatic.com/recaptcha 'strict-dynamic'; style-src 'self' 'unsafe-inline' 'nonce-$nonce_value' https://*.olark.com; img-src 'self' data: https://*.olark.com; font-src 'self'; child-src 'self' https://*.olark.com; object-src 'none'; frame-src 'self' https://www.google.com/recaptcha;

Below is the warning in console using Microsoft Edge 44.18362.449.0:

CSP14312: Resource violated directive 'script-src...' Resource will be blocked.

Below is the warning in console using Microsoft Edge 85.0.564.51:

Tracking Prevention blocked access to storage for <URL>.

How to fix the problem such that the checkbox will be rendered properly?

Solution

  • I think you miss a / after https://www.gstatic.com/recaptcha. Then Edge Legacy can't reach the resource under this path. It can work in Edge Chromium and Chrome may be due to they have different rules to deal with the url path than in Edge Legacy.

    I add the / and it can work well in Edge Legacy. I use the code like below:

    <!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Security-Policy" content="default-src 'self' https://mysite/; script-src 'self' 'unsafe-inline' 'unsafe-eval' 'nonce-$nonce_value' https://mysite/ https://www.google.com/recaptcha/ https://www.gstatic.com/recaptcha/ 'strict-dynamic'; style-src 'self' 'unsafe-inline' 'nonce-$nonce_value' https://mysite/; img-src 'self' data: https://mysite/; font-src 'self'; child-src 'self' https://mysite/; object-src 'none'; frame-src 'self' https://www.google.com/recaptcha/;" />
    <title>reCAPTCHA demo: Simple page</title>
    <script nonce="$nonce_value" src="https://www.google.com/recaptcha/api.js" async defer></script>
  </head>
  <body>
    <form action="" method="post">
        <label for="name">Name:</label>
        <input name="name" required><br />
        <label for="email">Email:</label>
        <input name="email" type="email" required><br />
        <div class="g-recaptcha" data-sitekey="mykey"></div>
        <input type="submit" value="Submit" />
    </form>
  </body>
</html>

    Result in Edge Legacy:

    enter image description here