1

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?

Improve this question
1
  • Yes, its very helpful, thanks
    – dublin
    Commented Sep 25, 2020 at 19:51

2 Answers 2

Reset to default
2

In the rules like:

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

you have 2 troubles:

  1. 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.
  2. 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.

Improve this answer
1
  • Adding the missing / worked no need to add the additional host-sources, thanks
    – dublin
    Commented Sep 25, 2020 at 19:50
0

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

Improve this answer
1
  • I see, I was not very careful about the extra /, thanks
    – dublin
    Commented Sep 25, 2020 at 19:44

Not the answer you're looking for? Browse other questions tagged or ask your own question.