Content Security Policy header directive for Google Re-captcha

Question

I have added following directive for google re-captcha but still I am getting error for recaptcha__en.js

"script-src 'self' https://www.google.com/recaptcha/ 
https://www.gstatic.com/recaptcha/
"style-src 'self' https://www.google.com/recaptcha/ 
https://www.gstatic.com/recaptcha/

tried with nonce

"script-src 'self' 'nonce-GoogleRecaptcha' "
"style-src 'self' 'nonce-GoogleRecaptcha' "

<script src='https://www.google.com/recaptcha/api.js' nonce="GoogleRecaptcha" async defer></script>

And also tried to add all the needed hashes

Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' https://www.google.com/recaptcha/ https://www.gstatic.com/recaptcha/ 'sha256-CwE3Bg0VYQOIdNAkbB/Btdkhul49qZuwgNCMPgNY5zw=' 'sha256-MZKTI0Eg1N13tshpFaVW65co/LeICXq4hyVx6GWVlK0=' 'sha256-LpfmXS+4ZtL2uPRZgkoR29Ghbxcfime/CsD/4w5VujE=' 'sha256-YJO/M9OgDKEBRKGqp4Zd07dzlagbB+qmKgThG52u/Mk=' 'sha256-Awu6hl63MCY3jiYHaDclrL7Lic9KcEalXm2o/i3e0v8=' 'sha256-WCg1a4AhMGgFRCQG5w+hgG+Q2j8Ygrbd+2dgjByIOIU=' 'sha256-ldCXMle1JJUAD9eAjLdSuPIgIBcTcBecWlaXs0A2y4M=' 'sha256-+zzuded9+DHoztKyASJeCkVU0gxvYNWMUIQM7x//CB4=' 'sha256-6iA6WDOL1mgUULZ6GSs2OOfP4eMuu6iI5agxCjK2m2A=' 'sha256-MammJ3J+TGIHdHxYsGLjD6DzRU0ZmxXKZ2DvTePAF0o='". Either the 'unsafe-inline' keyword, a hash ('sha256-Awu6hl63MCY3jiYHaDclrL7Lic9KcEalXm2o/i3e0v8='), or a nonce ('nonce-...') is required to enable inline execution.

As you can see in above hash it shows same hash to add as I have already added. still i am getting this error.

And I am adding all these header values using meta tag on a layout page.

axelrotter axelrotter · Accepted Answer · 2019-07-29T15:08:22

I got it to work

You´re just missing frame-src 'self' as descfribed here: I'm using Content-Security-Policy (CSP) on my website. How can I configure it to work with reCAPTCHA?

    "style-src 'self' https://fonts.googleapis.com https://www.google.com/recaptcha/ https://www.gstatic.com/recaptcha/; 
script-src 'self' https://apis.google.com https://www.google.com/recaptcha/ https://www.gstatic.com/recaptcha/; 
frame-src 'self' https://www.google.com/recaptcha/; 
font-src 'self' https://fonts.gstatic.com; 
default-src 'self'; 
object-src 'none'; 
frame-ancestors 'none'; 
sandbox allow-forms allow-same-origin allow-scripts; base-uri 'self';";

If you need my implementation details on my project I´ll gladly give them to you.

Content Security Policy header directive for Google Re-captcha

1 Answers