CODEWITHSUNDEEP
javascriptjquerycontent-security-policy
Shakti Sharma
Shakti Sharma

Reputation: 2309

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

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>

Upvotes: 192

Views: 541334

Answers (9)

AvahW
AvahW

Reputation: 2201

For people getting this error with web workers, make sure you have included a worker-src: 'self' blob: (or whichever domains you need) in the Content-Security-Policy header to allow loading the worker.

I only found this after loading my site in Chrome, which provided a much more useful error messages than this error in Firefox. Specifically:

Refused to create a worker from 'blob:<URL>' because it violates the following Content Security Policy directive: "script-src 'self' <URL> [domains]". Note that 'worker-src' was not explicitly set, so 'script-src' is used as a fallback.

and

Uncaught DOMException: Failed to construct 'Worker': Access to the script at 'blob:https://localhost:44353/86d5f05c-f27e-44b0-824f-4ddc9882d46f' is denied by the document's Content Security Policy.

Happy debugging!

Upvotes: 1

Izhar
Izhar

Reputation: 161

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

Upvotes: -1

Bambier
Bambier

Reputation: 854

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

Upvotes: 2

sendon1982
sendon1982

Reputation: 11284

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

Upvotes: -13

user3778512
user3778512

Reputation: 11

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>

Upvotes: -2

rubo77
rubo77

Reputation: 20875

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

Upvotes: 5

Daniel Congrove
Daniel Congrove

Reputation: 3679

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.

Upvotes: 22

aCustica
aCustica

Reputation: 169

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.

Upvotes: 16

Barry Pollard
Barry Pollard

Reputation: 46040

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.

Upvotes: 152

Related Questions