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;

但是，我想摆脱unsafe-inline部分中的style-src。在documentation上写着：

我们建议使用CSP3中记录的基于随机数的方法。确保将你的随机数包含在reCAPTCHA api.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上遇到的错误：

拒绝应用内联样式，因为它违反了以下内容安全策略指令：＆＃34; style-src＆＃39; self＆＃39; https：＆＃39; nonce- {NONCE}＆＃39;＆＃34;。 “不安全 - 内联”和“不安全”。关键字，哈希（＆＃39; sha256-MammJ3J + TGIHdHxYsGLjD6DzRU0ZmxXKZ2DvTePAF0o =＆＃39;）或nonce（＆＃39; nonce -...＆＃39;）是启用内联执行所必需的。

我缺少什么？

Answer 1

我不相信reCAPTCHA在不允许内联样式的情况下支持CSP。我在reCAPTCHA Github存储库中找到了this open issue。

This sample page with reCAPTCHA using CSP有效，因为它没有定义}或style-src。检查页面的DOM会显示插入的div：

default-src

<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&co=aHR0cHM6Ly9jc3AtZXhwZXJpbWVudHMuYXBwc3BvdC5jb206NDQz&hl=en&v=r20160926121436&size=normal&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中包含哈希不适用于Chrome per this open bug中的内嵌样式。看来这将由style-src支持，据我所知，还没有将其发布到Chrome版本。

为了它的价值，添加哈希值可以在Firefox中使用。

Answer 2

reCAPTCHA服务已更新，因此不再需要style-src 'unsafe-inline'。每个this已解决的问题下面的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';

Answer 3

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

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

带内容安全策略的reCAPTCHA

3 个答案: