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;

然而，我想在 style-src 部分中去掉 unsafe-inline。在文档中，写道：

我们建议使用基于 nonce 的方法，该方法在 CSP3 中有记录。确保在 reCAPTCHA api.js 脚本标签中包含您的 nonce，我们会处理剩下的部分。

但是我无法使其工作... 这是我尝试过的：

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-…”）。

我缺少什么？

- julienc

Answer 1

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';

- Jeroen

---

在 script-src 中添加 www.google.com 也可以运行。 - miquelvir

当我在script-src中添加https://www.gstatic.com时，它对我起作用了。 - Hemant

@Hemant gstatic.com或www.google.com托管的库使您完全容易受到XSS攻击，请勿在script-src中使用它们。 - Pedro Queiroga

Answer 2

编辑：这个答案现在已经过时，不再相关。

---

我不相信reCAPTCHA支持在不允许内联样式的情况下使用CSP。我在reCAPTCHA的Github存储库中找到了这个已开放的问题。

这个使用CSP的示例页面能够工作，因为它没有定义style-src或default-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中的内联样式无效根据此开放性错误。看起来这将在unsafe-hashed-attributes中得到支持，据我所知，它尚未发布到Chrome版本中。

值得一提的是，添加哈希值可以使其在Firefox中正常工作。

- Anand Bhat

---

其他问题跟踪器中相关问题的非常有用的链接！ - dargmuesli

此外，沙盒值也会影响这个。 - Muhammad Umer

此答案已过时，reCaptcha现在支持CSP。 - Georg Schölly

Answer 3

在 ASP.NET 应用程序的 web.config 文件中使用以下代码。

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

- Manjunatha Govindappa