Content Security Policy: The page's settings blocked the loading of a resource

Question

I am using captcha on page load but it is blocking because of some security reason

I am facing problem:

    Content Security Policy: The page's settings blocked the loading 
    of a resource at 
    http://www.google.com/recaptcha/api.js?onload=myCallBack&render=explicit 
    ("script-src http://test.com:8080 'unsafe-inline' 'unsafe-eval'").

I have used the following js and meta tag:

<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">
<script src="http://www.google.com/recaptcha/api.js?onload=myCallBack&render=explicit" async defer></script>

Answer 1

You have said you can only load scripts from your own site (self). You have then tried to load a script from another site (www.google.com) and, because you've restricted this, you can't. That's the whole point of Content Security Policy (CSP).

You can change your first line to:

<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval' http://www.google.com">

Or, alternatively, it may be worth removing that line completely until you find out more about CSP. Your current CSP is pretty lax anyway (allowing unsafe-inline, unsafe-eval and a default-src of *) so probably is not adding too much value to be honest.

Answer 2

Having a similar error type. First, I tried to add the meta tags in the code but it didn't work.

I found out that on nginx webserver you may have a security setting that may block external code to run:

#security directives
server_tokens off;
add_header X-Frame-Options SAMEORIGIN;
add_header X-Content-Type-Options nosniff;
add_header X-XSS-Protection "1; mode=block";
add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'  https://ajax.googleapis.com  https://ssl.google-analytics.com https://assets.zendesk.com https://connect.facebook.net; img-src 'self' https://ssl.google-analytics.com https://s-static.ak.facebook.com https://assets.zendesk.com; style-src 'self' 'unsafe-inline' https://assets.zendesk.com; font-src 'self' https://fonts.gstatic.com  https://themes.googleusercontent.com; frame-src https://player.vimeo.com https://assets.zendesk.com https://www.facebook.com https://s-static.ak.facebook.com https://tautt.zendesk.com; object-src 'none'";

Check the Content-Security-Policy, you may need to add the source reference.

Answer 3

Since this question is the first result on Google for this error message, I'll put this here.

With my ASP.NET Core Angular project running in Visual Studio 2019, sometimes I get this error message in the Firefox console:

Content Security Policy: The page’s settings blocked the loading of a resource at inline (“default-src”).

In Chrome, the error message is instead:

Failed to load resource: the server responded with a status of 404 ()

In my case it had nothing to do with my Content Security Policy, but instead was simply the result of a TypeScript error on my part.

Check your IDE output window for a TS error, like:

> ERROR in src/app/shared/models/person.model.ts(8,20): error TS2304: Cannot find name 'bool'.
>      
> i ｢wdm｣: Failed to compile.

Answer 4

You can disable them in your browser. FireFox

Type about:config in the FireFox address bar and find security.csp.enable and set it to false

Chrome You can install the extension called Disable Content-Security-Policy to disable CSP