reCAPTCHA mit Content Security Policy

Question

Ich versuche, reCAPTCHA mit einer strengen Content Security Policy arbeiten zu lassen. Dies ist die Basisversion Ich habe, die richtig funktioniert:

HTML

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

HTTP-Header

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; 

Allerdings würde ich die unsafe-inline im style-src Abschnitt bekommen zu befreien. Auf der documentation steht geschrieben, dass:

Wir empfehlen die Verwendung der nonce-basierten Ansatz dokumentiert mit CSP3. Stellen Sie sicher, dass Sie Ihre Nonce in das Script-Tag reCAPTCHA api.js aufnehmen, und wir kümmern uns um den Rest.

Aber ich kann es nicht machen ... Das ist, was ich versucht:

HTML

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

HTTP-Header

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

Und das ist der Fehler, den ich gehen Sie auf Chrome 53:

Die Anwendung des Inline-Styles wurde abgelehnt, weil sie gegen die folgende Richtlinie zur Inhaltssicherheitsrichtlinie verstößt: "style-src 'self' https: 'nonce- {NONCE}'". Entweder ist das Schlüsselwort 'unsafe-inline', ein Hash ('sha256-MammJ3J + TGIHdHxYsGLjD6DzRU0ZmxXKZ2DvTeAPF0o =') oder ein Nonce ('nonce -...') erforderlich, um die Inline-Ausführung zu ermöglichen.

Was ich vermisse?

Answer 1

Ich glaube nicht, dass reCAPTCHA CSP unterstützt, ohne Inline-Stile zuzulassen. Ich habe this open issue im reCAPTCHA Github Repository gefunden.

This sample page with reCAPTCHA using CSP funktioniert, weil es style-src oder default-src nicht definiert. Eine Inspektion der DOM Seite zeigt dieses eingefügt 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> 

Der Inline-Stil für textarea-MammJ3J+TGIHdHxYsGLjD6DzRU0ZmxXKZ2DvTePAF0o= bestimmt auswertet von:

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

Dies entspricht den Hash in der Fehlermeldung angezeigt. Das Einschließen des Hashs in style-src funktioniert jedoch nicht für Inline-Stile in Chrome per this open bug. Es scheint, dass dies mit unsafe-hashed-attributes unterstützt wird, die, soweit ich sagen kann, es nicht zu einer Chrome-Version geschafft hat.

Für was es wert ist, fügt das Hinzufügen des Hashes es in Firefox arbeiten.

Answer 2

Verwenden Sie den folgenden Code in der Datei web.config für ASp.Net-Anwendungen.

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