コンテンツセキュリティポリシーを使用したreCAPTCHA

Question

私はreCAPTCHAを厳格なコンテンツセキュリティポリシーと共に動作させようとしています。これが正しく動作し、私が持っている基本的なバージョン、次のとおりです。しかし、私はstyle-srcセクションでunsafe-inlineを取り除くしたい

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; 

。 documentationには、次のように書かれています。

CSP3で文書化されているノンスベースのアプローチを使用することをお勧めします。 nonceを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; 

そして、これはエラーIです：

しかし、私はそれを動作させることができない...これは私が試したものですChromeにアクセスする53：

"style-src 'self' https： 'nonce- {NONCE}'"というコンテンツセキュリティポリシーの指令に違反しているため、インラインスタイルの適用が拒否されました。インライン実行を有効にするには、 'unsafe-inline'キーワード、ハッシュ（ 'sha256-MammJ3J + TGIHdHxYsGLjD6DzRU0ZmxXKZ2DvTePAF0o ='）、またはnonce（ 'nonce -...'）が必要です。

何が欠けていますか？

Answer 1

reCAPTCHAはインラインスタイルを許可せずにCSPをサポートしているとは思いません。私はthis open issueをreCAPTCHA Githubリポジトリに見つけました。

This sample page with reCAPTCHA using 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のハッシュを含めると、per this open bugのインラインスタイルでは機能しません。これは、unsafe-hashed-attributesでサポートされているようですが、私が知る限り、Chromeのリリースには対応していません。

ハッシュを追加するとFirefoxでうまくいきます。

Answer 2

以下のコードをASp.Netアプリケーションのweb.configファイルに使用します。他の課題追跡の関連問題へ

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