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 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>

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, May 18 '16 at 19:32
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, Mar 21 '19 at 22:47
A now [deleted answer](https://stackoverflow.com/questions/37298608/content-security-policy-the-pages-settings-blocked-the-loading-of-a-resource/52011580#52011580) 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](https://en.wikipedia.org/wiki/NoScript)) in the browser. In that case, part of the error output might be *"Couldn’t process unknown directive ‘noscript-marker’"*. — Peter Mortensen, Jul 19 '20 at 17:07
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, Nov 22 '20 at 09:40

score 138 · Accepted Answer · edited Jul 19 '20 at 16:44

138

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.

edited Jul 19 '20 at 16:44

Peter Mortensen

30,738
21
105
131

answered May 18 '16 at 19:29

Barry Pollard

40,655
7
76
92

8

This is an unsafe workaround - [Google's CSP checker](https://csp-evaluator.withgoogle.com/) gives this line multiple Severe failures. (Unfortunately implementing a good CSP is not trivial and it needs to be customized per site.) – Freewalker Nov 21 '18 at 17:49
20

I take issue with this comment. The issues with the CSP are because of the original CSP. All this answer did was take that and add the www.google.com domain to this in answer to the question. Could I have suggested tightening up the CSP further while at the same time? Possibly, but I would say that is out of scope for the question. Especially as it was already apparent that the OP wasn't familiar with CSP. – Barry Pollard Nov 21 '18 at 19:35
7

Now is the CSP "unsafe"? That's arguable. Allowing unsafe-inline and unsafe-eval and a default source of * defeats much of the purpose of a CSP (hence why I also suggested removing it), but it should be remembered that CSP can *never* loosen browser controls so even this lose policy is adding some control over a page which has no CSP - as evidenced by the fact it is blocking a Google script! So "unsafe" is probably not a great term. "Too lax to be worthwhile" is maybe a better way of phrasing it. So yes this CSP leaves much to be desired but adding Google to it is not an "unsafe workaround". – Barry Pollard Nov 21 '18 at 19:39
4

Fair point that any CSP (other than "everything is fine) would generally be better than none. – Freewalker Nov 22 '18 at 17:22
There is a tiny bit of problem with that, I'm getting that error from `chrome://global/content/elements/panel.js` (Firefox) which disables debug on all the pages – AaA Nov 18 '20 at 12:10
I’m not sure what you mean. Sounds like a separate question. Could you raise one with more details and a screenshot? – Barry Pollard Nov 18 '20 at 13:32
I think Firefox with version 97 and onward go overboard and CSP doesn't allow loading scripts from same site either (at random). For example I couldn't add comment here because CSP was blocking all SO scripts, until I disabled CSP and then managed to leave comment. I thought it might be a random glitch so I enabled CSP again and restart firefox to exact same effect. – AaA Apr 26 '22 at 02:23
I'm not seeing that with Firefox version 99. Sure it's not some local extension or setting you've enabled? – Barry Pollard Apr 26 '22 at 08:49

score 22 · Answer 2 · edited Jul 19 '20 at 16:50

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.}

score 13 · Answer 3 · edited Jul 19 '20 at 16:46

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.

Note that this is unsafe - this Content-SecurityPolicy gets a High Severity failures from [Google's CSP Evaluator](https://csp-evaluator.withgoogle.com/). — Freewalker, Nov 21 '18 at 17:51

score 2 · Answer 4 · edited Jul 19 '20 at 16:53

2

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");

edited Jul 19 '20 at 16:53

Peter Mortensen

30,738
21
105
131

answered May 05 '20 at 00:02

rubo77

19,527
31
134
226

Is this at all advisable: `default-src *`? Maybe I am missing something. – MeSo2 Nov 19 '22 at 00:38
2

its a wildcard to allow everything, its like no umbrella in the rain to no to get wet. – Peter Koller Dec 03 '22 at 15:03

score -1 · Answer 5 · answered Jan 30 '23 at 22:34

add this to nginx directives

http {
    # ...
    add_header Content-Security-Policy "
default-src 'self' myDomain.com *.myDomain.com;
script-src 'self' myDomain.com *.myDomain.com 'unsafe-inline' tagmanager.google.com www.googletagmanager.com *.googletagmanager.com www.google-analytics.com ssl.google-analytics.com;
style-src 'self' myDomain.com *.myDomain.com 'unsafe-inline' tagmanager.google.com fonts.googleapis.com www.googletagmanager.com *.google-analytics.com *.googletagmanager.com;
img-src 'self' myDomain.com *.myDomain.com 'unsafe-inline' ssl.gstatic.com www.gstatic.com www.google-analytics.com;
font-src 'self' myDomain.com *.myDomain.com 'unsafe-inline' fonts.gstatic.com data;
connect-src 'self' myDomain.com *.myDomain.com 'unsafe-inline' *.google-analytics.com *.analytics.google.com *.googletagmanager.com ww.google-analytics.com;
";


    # ...


}

but its for development purposes for production make sure remove all 'unsafe-inline's

score -1 · Answer 6 · answered Apr 19 '23 at 10:49

-1

For me it was calling the wrong url.

In my case my express server has:

app.use('/graphql', expressGraphQL({
  schema: schema,
  graphiql: true
}))

calling http://localhost:5000/ was giving me this error should be http://localhost:5000/graphql

answered Apr 19 '23 at 10:49

Izhar

131
1
5

score -1 · Answer 7 · answered Aug 17 '23 at 08:54

-1

In my case just restarting the firefox fixed the issue.

answered Aug 17 '23 at 08:54

Hesam Moosapour

510
5
12

score -3 · Answer 8 · answered Apr 27 '21 at 04:08

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>

score -14 · Answer 9 · edited Jan 25 '23 at 13:18

-14

!!ONLY FOR DEBUGGING!!
Do this only temporarily if really necessary at all, as this makes your browser vulnerable on all sites!

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.

edited Jan 25 '23 at 13:18

Can Rau

3,130
1
23
33

answered Jun 18 '18 at 05:05

sendon1982

9,982
61
44

126

Don't EVER do this, aside from temporary debugging. This is a critical security feature of your browser. – hackel Jul 13 '18 at 20:43
5

This will only fix it locally, and besides, it leaves your browser a lot more vulnerable. – Neil Jul 31 '18 at 00:48
6

Is this "advice" for testing/debugging? If so, it should be mentioned in answer to avoid spreading dangerous vulnerabilities across unaware community of people. By the way, as @NeilChowdhury said, this will fix it on your system, what about the actual website visitors? – Fr0zenFyr Oct 03 '18 at 06:24
19

temporary solution but helpful for debugging (plus one) – NarendraR Oct 07 '18 at 07:17
12

@hackel I WILL do this. I WILL. – Incerteza Jan 31 '19 at 01:43
2

it's definitely good to know that such a config exists. this way we can debug better. BUT this is defo not a solution to the prob – Nasia Makrygianni Mar 18 '20 at 15:47
Maybe the author of this solution should consider adding a warning? – Luis A. Florit Oct 19 '20 at 18:50
There is a tiny bit of problem with "Don't Ever" bit, I'm getting that error from chrome://global/content/elements/panel.js (Firefox) which disables debug on all the pages – AaA Nov 18 '20 at 12:11
2

Thanks, this is exactly what I needed! Dumb answers above are not for my case! – mevsme Dec 18 '20 at 21:26
same comment, this is what i need, but yes u should give warning, – koponk Sep 27 '21 at 10:00
Dont do this a huge security loop hole – Nemuga Dev Dec 04 '21 at 06:38
Don´t post hacks as answer. – rubeonline Jan 19 '23 at 09:59
Added a note to the answer – Can Rau Jan 25 '23 at 13:19

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

9 Answers9

Firefox

Chrome

Linked