帶內容安全策略的reCAPTCHA

我試圖使reCAPTCHA與嚴格的內容安全策略一起工作。這是基本的版本我都有，其中正常工作：帶內容安全策略的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的。在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：

拒絕應用內聯樣式，因爲它違反了以下內容安全策略指令：「style-src'self'https：'nonce- {NONCE}'」。內聯執行需要'不安全內聯'關鍵字，一個散列（'sha256-MammJ3J + TGIHdHxYsGLjD6DzRU0ZmxXKZ2DvTePAF0o ='）或一個隨機數（'nonce -...'）。

我缺少什麼？

來源

2016-10-04 julienc

我不相信reCAPTCHA支持CSP而不允許內聯樣式。我在reCAPTCHA Github存儲庫中找到了this open issue。

This sample page with reCAPTCHA using CSP因爲它沒有定義style-src或default-src。頁面的DOM的檢查結果顯示該插入DIV：

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

這在錯誤消息中指出的哈希值匹配：

<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=。但是，在style-src中包含散列對於Chrome per this open bug中的內聯樣式不起作用。看來這將支持與unsafe-hashed-attributes，據我所知，並沒有使它成爲一個Chrome版本。

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

來源

2016-10-07 09:34:54

非常有用的鏈接到其他問題跟蹤相關問題！ – Dargmuesli

-1

對於ASp.Net應用程序，在web.config文件中使用以下代碼。

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

來源

2017-03-13 11:45:40

帶內容安全策略的reCAPTCHA

回答

相關問題