javascript – Content Security Policy: The page's settings blocked the loading of a resource-ThrowExceptions

Exception or error:

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 
    ("script-src '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="" async defer></script>
How to solve:

You have said you can only load scripts from your own site (self). You have then tried to load a script from another site ( 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'">

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.


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'; img-src 'self'; style-src 'self' 'unsafe-inline'; font-src 'self'; frame-src; object-src 'none'";

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


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.


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)


You can disable them in your browser.

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

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

Leave a Reply

Your email address will not be published. Required fields are marked *