web-dev-qa-db-ja.com

コンテンツセキュリティポリシーを使用した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;

ただし、unsafe-inlineセクションのstyle-srcを削除したいと思います。 documentation には、次のように書かれています。

CSP3で文書化されているnonceベースのアプローチを使用することをお勧めします。ナンスは必ずreCAPTCHA api.jsスクリプトタグに含めてください。残りはGoogleが処理します。

しかし、私はそれを機能させることができません...これは私が試したものです：

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 -...'）は、インライン実行を有効にするために必要です。

何が欠けていますか？

recaptchacontent-security-policy
14
julienc

ReCAPTCHAがインラインスタイルを許可せずにCSPをサポートしているとは思いません。 この未解決の問題 をreCAPTCHA Githubリポジトリで見つけました。

このサンプルページは、CSP を使用したreCAPTCHAで、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で機能するようになるためです。

8
Anand Bhat

ReCAPTCHAサービスが更新されたため、style-src 'unsafe-inline'はもう必要ありません。以下のHTMLおよびHTTPヘッダーは this クローズされた問題ごとに機能するはずです。

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