ReCAPTCHA与内容安全策略

Question

我试图使reCAPTCHA与严格的内容安全策略一起工作。这是我的基本版本，可以正常工作：

HTML

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

HTTP头处理模块

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;

但是，我想去掉样式src部分中的不安全内联。文件中写道：

我们建议使用CSP3中记录的基于nonce的方法。确保在reCAPTCHA api中包含nonce。js脚本标记，我们将处理其余部分。

但我不能让它工作。。。这就是我所尝试的：

HTML

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

HTTP头处理模块

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

这就是我在Chrome 53上遇到的错误：

拒绝应用内联样式，因为它违反了以下内容安全策略指令：“style src'self'https:'nonce-{nonce}”。启用内联执行需要'unsafe inline'关键字、哈希（'sha256-MammJ3J TGIHdHxYsGLjD6DzRU0ZmxXKZ2DvTePAF0o='）或nonce（'nonce-…'）。

我错过了什么？

Answer 1

在网上使用下面的代码。ASp.NET的配置文件。Net应用程序。

<child-src>
      <add source="www.google.com"/>

Answer 2

我不相信reCAPTCHA支持CSP而不允许内联样式。我在reCAPTCHA Github存储库中找到了这个公开的问题。

此使用CSP的reCAPTCHA示例页面之所以有效，是因为它没有定义样式src或默认src。检查页面的DOM会发现插入的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>

textarea的内联样式的计算结果为MammJ3J TGIHdHxYsGLjD6DzRU0ZmxXKZ2DvTePAF0o=，具体取决于：

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

这与错误消息中指示的哈希匹配。但是，在style src中包含散列对于Chrome中的内联样式不起作用。看来这将得到不安全散列属性的支持，据我所知，这些属性还没有发布到Chrome版本中。

不管怎样，添加哈希可以让它在火狐中工作。

Answer 3

reCAPTCHA服务已更新，因此不再需要style src“unsafe inline”。以下HTML和HTTP标题应适用于此已解决问题：

HTML:

<script src="https://www.google.com/recaptcha/api.js?render=site-key" nonce="{NONCE}"></script>

HTTP标头：

Content-Security-Policy: default-src 'self'; script-src 'nonce-{NONCE}'; img-src www.gstatic.com; frame-src www.google.com; object-src 'none'; base-uri 'none';