Search code examples
angular6recaptchacontent-security-policy

ReCAPTCHA2 script load error due to Security Policy directive

In my Angular application, I am getting the following error when I am trying to use reCAPTCHA2.

vendor.js:184374 Refused to load the script 'https://www.google.com/recaptcha/api.js?onload=ngx_captcha_onload_callback&render=explicit&hl=en' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-inline' 'unsafe-eval'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

I am using this Angular variant - https://enngage.github.io/ngx-captcha/

How can I solve the problem? My current security policy is contentSecurityPolicy = "default-src 'self' ; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline' ;img-src 'self' data: ; worker-src blob:"

I don't want to open the web application to all types of scripts.

Solution

  • Try modifying it like this:

    contentSecurityPolicy = "default-src 'self' https://www.gstatic.com/recaptcha/ https://www.gstatic.com/recaptcha/ ; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline' ;img-src 'self' data: ; worker-src blob:"

    I've just added:

     https://www.gstatic.com/recaptcha/ https://www.gstatic.com/recaptcha/