web-dev-qa-db-fra.com

reCAPTCHA avec la politique de sécurité du contenu

J'essaie de faire fonctionner reCAPTCHA avec une politique de sécurité de contenu stricte. Ceci est la version de base que j'ai, qui fonctionne correctement:

HTML

<script src='//www.google.com/recaptcha/api.js' async defer></script>

En-têtes 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;

Cependant, je voudrais me débarrasser du unsafe-inline dans le style-src section. Sur le documentation , il est écrit que:

Nous vous recommandons d'utiliser l'approche non -ce documentée avec CSP3. Assurez-vous d'inclure votre nonce dans la balise de script reCAPTCHA api.js, et nous nous occuperons du reste.

Mais je ne peux pas le faire fonctionner ... C'est ce que j'ai essayé:

HTML

<script src='//www.google.com/recaptcha/api.js' nonce="{NONCE}" async defer></script>

En-têtes HTTP

Content-Security-Policy: default-src 'self'; script-src 'self' https: 'nonce-{NONCE}'; style-src 'self' 'nonce-{NONCE}'; child-src www.google.com;

Et c'est l'erreur que je reçois sur Chrome 53:

Refusé d'appliquer le style en ligne car il viole la directive de politique de sécurité du contenu suivante: "style-src 'self' https: 'nonce- {NONCE}'". Le mot clé 'unsafe-inline', un hachage ('sha256-MammJ3J + TGIHdHxYsGLjD6DzRU0ZmxXKZ2DvTePAF0o ='), ou un nonce ('nonce -...') est requis pour activer l'exécution en ligne.

Qu'est-ce qui me manque?

recaptchacontent-security-policy
14
julienc

Je ne crois pas que reCAPTCHA supporte CSP sans autoriser les styles en ligne. J'ai trouvé ce problème ouvert dans le référentiel reCAPTCHA Github.

Cet exemple de page avec reCAPTCHA utilisant CSP fonctionne car il ne définit pas style-src ou default-src. Une inspection du DOM de la page révèle cette div insérée:

<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>

Le style en ligne pour textarea est évalué à MammJ3J+TGIHdHxYsGLjD6DzRU0ZmxXKZ2DvTePAF0o= tel que déterminé par:

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

Cela correspond au hachage indiqué dans votre message d'erreur. Cependant, y compris le hachage dans style-src ne fonctionne pas pour les styles en ligne dans Chrome par ce bogue ouvert . Il semble que cela sera pris en charge avec unsafe-hashed-attributes qui, pour autant que je sache, n'est pas parvenu à une version Chrome.

Pour ce que ça vaut, l'ajout du hachage le fait fonctionner dans Firefox.

8
Anand Bhat

Le service reCAPTCHA a été mis à jour afin que style-src 'unsafe-inline' n'est plus requis. Les en-têtes HTML et HTTP ci-dessous devraient fonctionner par this problème fermé:

HTML:

<script src="https://www.google.com/recaptcha/api.js?render=site-key" nonce="{NONCE}"></script>

En-tête 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