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

122
votes

I am using CAPTCHA on page load, but it is blocking because of some security reason.

I am facing this 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 JavaScript 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>
7
javascriptjquerycontent-security-policy
If I was you, I would try doing it with server side code, and not javascript. JS is not pretty good with CORS and similar things. Google does have options for that.. – Gogol
I have added a javascript tag to this question, because the question has nothing to do with jQuery. It affects any JavaScript. In fact, the question would be more useful if you remove the jQuery tag altogether, but it’s not my place to do that. – Manngo
A now deleted answer is correct. One reason for "Content Security Policy: The page’s settings blocked the loading of a resource" is if JavaScript is not enabled or blocked (e.g. by NoScript) in the browser. In that case, part of the error output might be "Couldn’t process unknown directive ‘noscript-marker’". – Peter Mortensen
I'm unable to comment on the other suggestion to use about:config, so I guess I'll add it here. Someone recommending going in about:config and setting security.csp.enable to false. Everyone else said this is a horrible idea. I just want to say that this is the solution I decided to use as well. Very many sites have just stopped working for me altogether in Firefox, with tons of these errors everywhere. Chrome still loads them. Without knowing more about why that it is, setting security.csp.enable to false allowed those sites to load again using Firefox, and I prefer Firefox over Chrome. If the – EliT

7 Answers

96
votes

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 it is probably not adding too much value, to be honest.

16
votes

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 TypeScript error, like:

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

Note: Since this question is the first result on Google for this error message.

11
votes

I had 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 the nginx web server 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.

1
votes

I managed to allow all my requisite sites with this header:

header("Content-Security-Policy: default-src *; style-src 'self' 'unsafe-inline'; font-src 'self' data:; script-src 'self' 'unsafe-inline' 'unsafe-eval' stackexchange.com");
0
votes

You can fix via adding code in htaccess

<IfModule mod_headers.c>
    # Feature-Policy
    Header set Feature-Policy "microphone 'none'"
    # Referrer-Policy
    Header set Referrer-Policy "same-origin"
    # Content-Security-Policy   
    Header set Content-Security-Policy "script-src 'self' 'unsafe-inline' 'unsafe-eval' e.g. https://ajax.googleapis.com https://ssif1.globalsign.com https://malsup.github.io https://seal.globalsign.com https://www.googletagmanager.com https://www.google.com https://www.gstatic.com https://assets.zendesk.com https://chimpstatic.com https://cdn.ywxi.net https://static.hotjar.com https://maxcdn.bootstrapcdn.com https://www.google-analytics.com https://static.zdassets.com https://connect.facebook.net https://script.hotjar.com https://*.livechatinc.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com https://cdnjs.cloudflare.com https://ajax.googleapis.com;"
    # X-XSS-Protection
    Header set X-XSS-Protection "1; mode=block"
</IfModule>
-1
votes

I got around this by upgrading both the version of Angular that I was using (from v8 -> v9) and the version of TypeScript (from 3.5.3 -> latest).

-10
votes

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.