Content Security Policy issue in google recaptcha v2

Question

I have searched many question on SO related to this. But nothing solves my issue. I am using google recaptcha v2 in an asp.net mvc5 app. It works fine in google chrome. But it is showing some error in firefox and edge browsers. I suspect this as something related to content security policy headers.

Error in Firefox

Content Security Policy: Ignoring “'unsafe-inline'” within script-src: ‘strict-dynamic’ specified

Content Security Policy: Ignoring “https:” within script-src: ‘strict-dynamic’ specified

Content Security Policy: Ignoring “http:” within script-src: ‘strict-dynamic’ specified

Error in Edge

Security of a sandboxed iframe is potentially compromised by allowing script and same origin access.

Due to this error recaptcha is not working since it get timed out everytime

I've tried to add csp headers like this in web.config

<system.webServer>
<httpProtocol>
    <customHeaders>
        <add name="Content-Security-Policy" value="script-src 'self' 'unsafe-inline' https://www.google.com https://www.google.com/recaptcha/api.js https://www.gstatic.com" />
    </customHeaders>
</httpProtocol>
</system.webServer> 

But this doesn't work as well as my page got broken since all other files got blocked by the browser

Answer 1

It doesn’t appear that the script’s failure is CSP related. Those aren’t really errors you’re getting; merely notices.

In CSP some policies override other policies, so you get a notice that policy A is ignored because you’re using policy B. So why put policy A in at all, you ask? For compatibility with older browsers that don’t understand policy B.

For example: I use CSP nonces, but also put in “unsafe-inline”. IE doesn’t understand nonces so it uses the “unsafe-inline” rule. Modern browsers ignore the “unsafe-inline” and use the nonces. In Firefox console I get a notice similar to what you’re getting