reCAPTCHA with Content Security Policy

Question

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

HTML

<script src='//www.google.com/recaptcha/api.js' async defer></script>

HTTP Headers

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;

However, I would like to get rid of the unsafe-inline in the style-src section. On the documentation, it is written that:

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.

But I can't make it work... This is what I tried:

HTML

<script src='//www.google.com/recaptcha/api.js' nonce="{NONCE}" async defer></script>

HTTP Headers

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

And this is the error I get on Chrome 53:

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.

What I am missing?

Answer 1

I no not believe reCAPTCHA supports CSP without allowing inline styles. I found this open issue in the reCAPTCHA Github repository.

This sample page with reCAPTCHA using CSP works because it does not define style-src or default-src. An inspection of the page's DOM reveals this inserted div:

<div class="g-recaptcha" data-sitekey="6LdOLRgTAAAAAPYECt9KLIL_LLwOuuuHAUw7QUTm">
    <div style="width: 304px; height: 78px;">
        <div>
            <iframe src="https://www.google.com/recaptcha/api2/anchor?k=6LdOLRgTAAAAAPYECt9KLIL_LLwOuuuHAUw7QUTm&amp;co=aHR0cHM6Ly9jc3AtZXhwZXJpbWVudHMuYXBwc3BvdC5jb206NDQz&amp;hl=en&amp;v=r20160926121436&amp;size=normal&amp;cb=g72al0v10dxg" title="recaptcha widget" width="304" height="78" role="presentation" frameborder="0" scrolling="no" name="undefined"></iframe>
        </div>
        <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px; height: 40px; border: 1px solid #c1c1c1; margin: 10px 25px; padding: 0px; resize: none;  display: none; "></textarea>
    </div>
</div>

The inline style for textarea evaluates to MammJ3J+TGIHdHxYsGLjD6DzRU0ZmxXKZ2DvTePAF0o= as determined by:

echo -n "width: 250px; height: 40px; border: 1px solid #c1c1c1; margin: 10px 25px; padding: 0px; resize: none;  display: none; " | openssl dgst -sha256 -binary | base64

This matches the hash indicated in your error message. However, including the hash in style-src does not work for inline styles in Chrome per this open bug. It appears this will be supported with unsafe-hashed-attributes which as far as I can tell hasn't made it to a Chrome release.

For what it's worth, adding the hash makes it work in Firefox.