问题描述
我正在尝试使reCAPTCHA与严格的内容安全政策一起使用。这是我拥有的基本版本,可以正常运行:
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标头
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;
但是,我想摆脱 insafe-inline
style-src
部分中的code>。在,其中写道:
However, I would like to get rid of the unsafe-inline
in the style-src
section. On the documentation, it is written that:
但是我可以使其工作...这就是我尝试过的:
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标头
Content-Security-Policy: default-src 'self'; script-src 'self' https: 'nonce-{NONCE}'; style-src 'self' 'nonce-{NONCE}'; child-src www.google.com;
这是我在Chrome 53上看到的错误:
And this is the error I get on Chrome 53:
我缺少什么?
推荐答案
我不相信reCAPTCHA支持CSP不允许使用内联样式。我在reCAPTCHA Github存储库中发现了。
I no not believe reCAPTCHA supports CSP without allowing inline styles. I found this open issue in the reCAPTCHA Github repository.
,因为没有定义 style-src
或 default-src
。对页面DOM的检查发现了插入的div:
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&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 =
由以下方式确定:
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
这与错误消息中指示的哈希值匹配。但是,在 style-src
中包含散列不适用于Chrome 。看来, unsafe-hashed-attributes
会支持该功能,据我所知,该功能尚未出现在Chrome版本中。
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.
对于它的价值,添加哈希使其可以在Firefox中使用。
For what it's worth, adding the hash makes it work in Firefox.
这篇关于具有内容安全策略的reCAPTCHA的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!