reCAPTCHA with Content Security Policy
<p>I'm trying to make reCAPTCHA work along with a strict Content Security Policy. This is the basic version I have, which works correctly:</p>

<p>HTML</p>

<pre><code>&lt;script src='//www.google.com/recaptcha/api.js' async defer&gt;&lt;/script&gt;
</code></pre>

<p>HTTP Headers</p>

<pre><code>Content-Security-Policy: default-src 'self'; script-src 'self' www.google.com www.gstatic.com; style-src 'self' https: 'unsafe-inline'; frame-src www.google.com;
</code></pre>

<p>However, I would like to get rid of the <code>unsafe-inline</code> in the <code>style-src</code> section. On the <a href="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" rel="noreferrer">documentation</a>, it is written that:</p>

<blockquote>
  <p>We recommend using the nonce-based approach documented with CSP3. Make sure to include your nonce in the reCAPTCHA api.js script tag, and we'll handle the rest.</p>
</blockquote>

<p>But I can't make it work... This is what I tried:</p>

<p>HTML</p>

<pre><code>&lt;script src='//www.google.com/recaptcha/api.js' nonce="{NONCE}" async defer&gt;&lt;/script&gt;
</code></pre>

<p>HTTP Headers</p>

<pre><code>Content-Security-Policy: default-src 'self'; script-src 'self' https: 'nonce-{NONCE}'; style-src 'self' 'nonce-{NONCE}'; child-src www.google.com;
</code></pre>

<p>And this is the error I get on Chrome 53:</p>

<blockquote>
  <p>Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' https: 'nonce-{NONCE}'". Either the 'unsafe-inline' keyword, a hash ('sha256-MammJ3J+TGIHdHxYsGLjD6DzRU0ZmxXKZ2DvTePAF0o='), or a nonce ('nonce-...') is required to enable inline execution.</p>
</blockquote>

<p>What I am missing?</p>