Google reCAPTCHA v2 encountering CSP14312 error resource blocked in Microsoft Edge

Question

Google reCAPTCHA v2 encountering CSP14312 error resource blocked in Microsoft Edge

1.9k Views Asked by dublin At 07 April 2025 at 01:18

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?

Original Q&A

There are 2 best solutions below

granty On 20 September 2020 at 03:20

In the rules like:

default-src https://www.gstatic.com/recaptcha 'strict-dynamic' 'nonce-value'

you have 2 troubles:

When you omit trailing slash, CSP considers /recaptcha as file name (not as directory), and allow to load this file only. In case https://www.gstatic.com/recaptcha/ CSP counts /recaptcha/ as directory and will allow to load any directiries/files nested into it.
Firefox has an old bug and therefore it does not support nor 'strict-dynamic' nor 'nonce-value' in the default-src directive. You need to use script-src for those tokens.

PS: Do not forget in the 'nonce-$nonce_value' token instead of $nonce_value variable to insert a new server-generated nonce each time.

PPS: You also need to add host-sources: https://script.tapfiliate.com https://fonts.googleapis.com to your CSP rules.

**Yu Zhou** · Accepted Answer

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:

Google reCAPTCHA v2 encountering CSP14312 error resource blocked in Microsoft Edge

There are 2 best solutions below

Related Questions in JSP

Related Questions in RECAPTCHA

Related Questions in MICROSOFT-EDGE

Related Questions in CONTENT-SECURITY-POLICY

Related Questions in GRECAPTCHA

Trending Questions

Popular # Hahtags

Popular Questions