Today I had a Google reCAPTCHA V2 problem – it was only working in Internet Explorer (IE), but not Firefox or Chrome. Short Answer: Content Security Policy (CSP) was blocking the resources from loading or displaying.
I was a bit puzzled today, I deployed a new version of code for a website I run and found that while the “human check” reCaptcha worked in test, it wasn’t working in production.
This is a ReCaptcha. You’ve probably seen them all over the internet, annoying you every time you try to sign up to anything.
I loaded up the Chrome developer console, and saw a little red “blocked:csp” in the network tab. That reminded me I’d set up Content Security Policy recently, which had obviously stopped it loading.
According to Wikipedia “Content Security Policy (CSP) is a computer security standard introduced to prevent cross-site scripting (XSS), clickjacking and other code injection attacks resulting from execution of malicious content in the trusted web page context”. Basically it means it only lets code or resources run or show on your website if they’re stored on your domain, or any domains you whitelist.
The solution was quite simple: I added the two Google domains “www.google.com” and “www.gstatic” to the allowed list. I’ve added a few more domains just in case I need them in future.
add_header Content-Security-Policy "default-src 'self' www.google-analytics.com ajax.googleapis.com www.google.com google.com gstatic.com www.gstatic.com connect.facebook.net;";
Header set Content-Security-Policy "default-src 'self' www.google-analytics.com ajax.googleapis.com www.google.com google.com gstatic.com www.gstatic.com connect.facebook.net;"
That’s it! Hopefully this saves someone a little bit of time.