Recaptcha: CSP Nonce not added to frame

Created on 6 Oct 2018 · 3Comments · Source: google/recaptcha

Issue description
I'm trying to configure my reCAPTCHA to use a CSP Nonce as per https://developers.google.com/recaptcha/docs/faq#im-using-content-security-policy-csp-on-my-website-how-can-i-configure-it-to-work-with-recaptcha, however, while the api.js script loads without error, Chrome reports the following Errors

www.gstatic.com/:1 [Report Only] Refused to frame 'https://www.google.com/' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'frame-src' was not explicitly set, so 'default-src' is used as a fallback.
www.gstatic.com/:1 [Report Only] Refused to frame 'https://www.google.com/' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'frame-src' was not explicitly set, so 'default-src' is used as a fallback.

With the following HTML

<script src="https://www.google.com/recaptcha/api.js" nonce="jm/3JE1r10bKECb8zhmfMKeQtiU=" async defer></script>
<div class="g-recaptcha" data-sitekey="mySiteKey"></div>

The nonce and CSP Header is generated on page load like this

<?php
  $CSPNonce=base64_encode(random_bytes(20));
  header('Content-Security-Policy-Report-Only: default-src \'self\' \'nonce-'.$CSPNonce.'\'; report-uri https://domain.tld/CSP');
  header('X-Content-Security-Policy-Report-Only: default-src \'self\' \'nonce-'.$CSPNonce.'\'; report-uri https://domain.tld/CSP');
  header('X-WebKit-CSP-Report-Only: default-src \'self\' \'nonce-'.$CSPNonce.'\'; report-uri https://domain.tld/CSP');
  session_start();
?>

Environment

OS name and version: Ubuntu 18.04.1
PHP version: 7.2.10
Web server name and version: Apache/2.4.29
google/recaptcha version: V2
Browser name and version: Chrome 69.0.3497.100

Reproducing the issue

<?php
  $CSPNonce=base64_encode(random_bytes(20));
  header('Content-Security-Policy-Report-Only: default-src \'self\' \'nonce-'.$CSPNonce.'\'; report-uri https://www.joepitt.co.uk/CSP');
  header('X-Content-Security-Policy-Report-Only: default-src \'self\' \'nonce-'.$CSPNonce.'\'; report-uri https://www.joepitt.co.uk/CSP');
  header('X-WebKit-CSP-Report-Only: default-src \'self\' \'nonce-'.$CSPNonce.'\'; report-uri https://www.joepitt.co.uk/CSP');
  session_start();
  echo '<html><head><title>RCTest</title></head><body><p><strong>Are you human?</strong></p>
            <p>
              Before you can submit a message, you need to prove you are a human. To prove you are human simply
              tick the box below and follow any additional steps that are requested
            </p>
            <script src="https://www.google.com/recaptcha/api.js" nonce="'.$CSPNonce.'" async defer></script>
            <div class="g-recaptcha" data-sitekey="6LePjAUTAAAAAC72HvUNDLqggzMqdxcCWvUfz7dw"></div>
            <input class="btn btn-primary" type="submit" value="Done, Show me the form" />
            <br /><br />
            <p><small>
              This form is protected by Google reCAPTCHA, your use of reCAPTCHA is subject to the Google
              <a href="https://www.google.com/intl/en/policies/privacy/" target="_blank">Privacy Policy</a> and
              <a href="https://www.google.com/intl/en/policies/terms/" target="_blank">Terms of Use</a>.
            </small></p></body';
?>

User steps

1. Visit page...
2. Open console
3. Review CSP Errors

Source

joepitt91

Most helpful comment

This is unresolved. The point of using the nonce according to the article referenced in the request was that Google will "handle the rest". Specifying a URL in the frame-src was only an alternative to not using a nonce and is not a solution since there are many domains that could be used. There is no documentation for all of them (eg recaptcha.cn, google.cn, etc). We can't wait for users in various locations to visit our site and appear on our CSP violation report before we update our policy.