Refused to load the script because it violates the following Content Security Policy directive

Question

When I tried to deploy my app onto devices with Android system above 5.0.0 (Lollipop), I kept getting these kind of error messages:

07-03 18:39:21.621: D/SystemWebChromeClient(9132): file:///android_asset/www/index.html: Line 0 : Refused to load the script 'http://xxxxx' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval' 'unsafe-inline'". 07-03 18:39:21.621: I/chromium(9132): [INFO:CONSOLE(0)] "Refused to load the script 'http://xxx' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval' 'unsafe-inline'".

However, if I deployed it to mobile device with Android system of 4.4.x (KitKat), the security policy works with the default ones:

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">

Then I thought, maybe, I should change to something like this:

<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-eval' 'unsafe-inline'; object-src 'self'; style-src 'self' 'unsafe-inline'; media-src *">

Basically, both options don't work for for me. How can I solve this issue?

Very similar to my issue. I am unable to retrieve a JSON file, "because it violates the following Content Security Policy directive: "connect-src 'self'"" — Michael R, Jan 18 '17 at 22:27
@MichaelR If You want to retrieve some JSON information from API through JS like tampermonkey addon or everything else You can use this plugin https://chrome.google.com/webstore/detail/disable-content-security/ieelmcmcagommplceebfedjlakkhpden/related and disable CSP check while You want obtain something. It is altough not safe but in some cases it might work. I am posting this answer here because I was looking for my error and this topic shows first in Google. — Eryk Wróbel, Nov 07 '18 at 07:26
Does this answer your question? [How does Content Security Policy (CSP) work?](https://stackoverflow.com/questions/30280370/how-does-content-security-policy-csp-work) — Liam, Oct 27 '22 at 11:48
@ErykWróbel The extension you suggested basically removes the CSP headers, In this case, CSP is implemented with Meta tags so any browser extension that removed CSP headers won't work. This requires an additional effort of parsing the page and removing the Meta tags. Any extension that injects a script and remove the Meta tags should be useful. — Sachin Jain, Nov 16 '22 at 07:56

score 65 · Answer 1 · edited Jul 19 '20 at 16:28

The self answer given by MagngooSasa did the trick, but for anyone else trying to understand the answer, here are a few bit more details:

When developing Cordova apps with Visual Studio, I tried to import a remote JavaScript file [located here http://Guess.What.com/MyScript.js], but I have the error mentioned in the title.

Here is the meta tag before, in the index.html file of the project:

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">

Here is the corrected meta tag, to allow importing a remote script:

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *;**script-src 'self' http://onlineerp.solution.quebec 'unsafe-inline' 'unsafe-eval';** ">

And no more error!

Echoing the comment of @IncredibleHat on one of the answers below, this makes your site vulnerable to cross-site scripting (XSS) attacks. I highly recommend you look at this answer below (https://stackoverflow.com/a/53690821/17323241) — ela16, Aug 05 '22 at 13:05

score 41 · Answer 2 · edited Jul 19 '20 at 16:35

41

Full permission string

The previous answers did not fix my issue, because they don't include blob: data: gap: keywords at the same time; so here is a string that does:

<meta http-equiv="Content-Security-Policy" content="default-src * self blob: data: gap:; style-src * self 'unsafe-inline' blob: data: gap:; script-src * 'self' 'unsafe-eval' 'unsafe-inline' blob: data: gap:; object-src * 'self' blob: data: gap:; img-src * self 'unsafe-inline' blob: data: gap:; connect-src self * 'unsafe-inline' blob: data: gap:; frame-src * self blob: data: gap:;">

Warning: This exposes the document to many exploits. Be sure to prevent users from executing code in the console or to be in a closed environment like a Cordova application.

edited Jul 19 '20 at 16:35

Peter Mortensen

30,738
21
105
131

answered Dec 30 '19 at 12:55

Alexandre Daubricourt

3,323
1
34
33

1

This is the correct answer if you are trying to load e.g. JQuery in the console like this: https://stackoverflow.com/a/31912495/137948 – Will Sheppard May 20 '20 at 09:34
i know this is unrelated, but it did not solve my paypal js sdk problem, it still returns: Refused to set the document's base URI to 'https://www.paypalobjects.com/web/res/c30/165e8147117bd1483979affdece85' because it violates the following Content Security Policy directive: "base-uri 'self' https://*.paypal.com". – Thiago Dias Apr 10 '21 at 03:24
@Thiago Try to append `;base-uri * self 'unsafe-inline' blob: data: gap:;` – Alexandre Daubricourt Apr 14 '21 at 09:38
Tho allowing all sources defeates the purpose of this security feature, it did help me set the correct ones for my need. – Stoney Eagle Sep 12 '21 at 17:04

score 26 · Answer 3 · edited Dec 27 '20 at 05:37

For anyone looking for a complete explanation, I recommend you to take a look at Content Security Policy: https://www.html5rocks.com/en/tutorials/security/content-security-policy/.

"Code from https://mybank.com should only have access to https://mybank.com’s data, and https://evil.example.com should certainly never be allowed access. Each origin is kept isolated from the rest of the web"

XSS attacks are based on the browser's inability to distinguish your app's code from code downloaded from another website. So you must whitelist the content origins that you consider safe to download content from, using the Content-Security-Policy HTTP header.

This policy is described using a series of policy directives, each of which describes the policy for a certain resource type or policy area. Your policy should include a default-src policy directive, which is a fallback for other resource types when they don't have policies of their own.

So, if you modify your tag to:

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *;**script-src 'self' http://onlineerp.solution.quebec 'unsafe-inline' 'unsafe-eval';** ">

You are saying that you are authorizing the execution of JavaScript code (script-src) from the origins 'self', http://onlineerp.solution.quebec, 'unsafe-inline', 'unsafe-eval'.

I guess that the first two are perfectly valid for your use case, I am a bit unsure about the other ones. 'unsafe-line' and 'unsafe-eval' pose a security problem, so you should not be using them unless you have a very specific need for them:

"If eval and its text-to-JavaScript brethren are completely essential to your application, you can enable them by adding 'unsafe-eval' as an allowed source in a script-src directive. But, again, please don’t. Banning the ability to execute strings makes it much more difficult for an attacker to execute unauthorized code on your site." (Mike West, Google)

It is not uncommon to reuse 3rd party scripts that are not hosted in your server but in which you "trust" — Rocío García Luque, Apr 01 '19 at 13:15

score 24 · Accepted Answer · edited Jul 19 '20 at 16:25

24

It was solved with:

script-src 'self' http://xxxx 'unsafe-inline' 'unsafe-eval';

edited Jul 19 '20 at 16:25

Peter Mortensen

30,738
21
105
131

answered Jul 04 '15 at 10:59

MangooSaSa

3,411
3
14
16

4

@dyoser Here is reference https://developer.chrome.com/extensions/contentSecurityPolicy#relaxing – igauravsehrawat Mar 07 '16 at 18:38
46

This effectively disables CSP for scripts by allowing any malicious plugins/xss to inject inline and eval scripts, which defeats the whole purpose of having CSP enabled at all. – IncredibleHat Jun 10 '20 at 13:13
on wich file i need to erite this statment? – itty May 18 '23 at 07:26
@IncredibleHat is that really true? Don't you still get the other benefits of having CSP enabled e.g., 'script-src', 'style-src', etc. still take effect? – TrojanName Aug 02 '23 at 15:33
@TrojanName When I meant it basically 'disables' CSP... I mean that definition above pretty much opens up `script-src` to the point where its no better than not defining a CSP for `script-src` to begin with. It doesnt have any effect on style, or other media types. The one above for script is just not very useful at all. Whitelisting is your friend! :D – IncredibleHat Aug 03 '23 at 16:48
@IncredibleHat oh yes, I understand your point now. I meant that having a CSP with unsafe-inline is better than having no CSP at all! But yes, in the specific case you are talking about it is effectively disabling CSP for scripts. – TrojanName Aug 03 '23 at 17:11

score 12 · Answer 5 · answered Nov 29 '16 at 13:40

12

We used this:

<meta http-equiv="Content-Security-Policy" content="default-src gap://ready file://* *; style-src 'self' http://* https://* 'unsafe-inline'; script-src 'self' http://* https://* 'unsafe-inline' 'unsafe-eval'">

answered Nov 29 '16 at 13:40

simprão

150
1
5

1

for js lover: `document.getElementsByTagName('head')[0].innerHTML += '';` ` – Gray Programmerz Jul 11 '21 at 17:41

score 11 · Answer 6 · answered Nov 09 '21 at 17:15

11

if you are using helmet package then just pass contentSecurityPolicy: false, into helment functions option like this

app.use(
  helmet({
    contentSecurityPolicy: false,
  })
);

answered Nov 09 '21 at 17:15

Mubasher Ali

502
6
14

1

You could also keep the defaults and add the whitelisted domains: `helmet({ contentSecurityPolicy: { useDefaults: true, directives: { 'script-src': ["'self'", "https://whitelisted-domain.com"] } } })` – Mauro Aguilar Dec 28 '21 at 21:22
@MauroAguilar thanks i will try it next time <3 – Mubasher Ali Dec 31 '21 at 19:16
1

Wouldn't setting contentSecurityPolicy to false expose your application to security problems? – koque Mar 13 '22 at 00:12
@koque i am not good at it. i just proposed the solution that i found. i am still newbie – Mubasher Ali Mar 13 '22 at 10:31
This was my issue, thanks a lot for this – saucecodee Jun 14 '22 at 23:32
This solved my issue, but will it compromise my site to malicious xss code? – Niv Apo Jan 10 '23 at 22:54
@NivApo If you want to set a CSP for your application, instead of disabling it by setting contentSecurityPolicy to false, you can provide a valid CSP string or object. Here's an example: less Copy code app.use(helmet({ contentSecurityPolicy: { directives: { defaultSrc: ["'self'"], scriptSrc: ["'self'", 'cdnjs.cloudflare.com'] } } })); In this example, we're setting a CSP that allows scripts to be loaded only from the same origin ('self') and from cdnjs.cloudflare.com. You can customize the directives according to your application's needs. – Mubasher Ali Feb 18 '23 at 08:52

score 5 · Answer 7 · edited Jul 19 '20 at 16:30

5

To elaborate some more on this, adding

script-src 'self' http://somedomain 'unsafe-inline' 'unsafe-eval';

to the meta tag like so,

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; script-src 'self' https://somedomain.com/ 'unsafe-inline' 'unsafe-eval';  media-src *">

fixes the error.

edited Jul 19 '20 at 16:30

Peter Mortensen

30,738
21
105
131

answered Feb 14 '16 at 20:06

James Nicholson

987
10
20

score 2 · Answer 8 · edited Jul 19 '20 at 16:33

Adding the meta tag to ignore this policy was not helping us, because our webserver was injecting the Content-Security-Policy header in the response.

In our case we are using Ngnix as the web server for a Tomcat 9 Java-based application. From the web server, it is directing the browser not to allow inline scripts, so for a temporary testing we have turned off Content-Security-Policy by commenting.

How to turn it off in ngnix

By default, ngnix ssl.conf file will have this adding a header to the response:

#> grep 'Content-Security' -ir /etc/nginx/global/ssl.conf add_header Content-Security-Policy "default-src 'none'; frame-ancestors 'none'; script-src 'self'; img-src 'self'; style-src 'self'; base-uri 'self'; form-action 'self';";
If you just comment this line and restart ngnix, it should not be adding the header to the response.

If you are concerned about security or in production please do not follow this, use these steps as only for testing purpose and moving on.

score 2 · Answer 9 · answered Aug 20 '21 at 13:11

For dummies like me with Apache/Debian server, who tried to add this into the index.html file(and lost couple of hours because of this), the answer would be sometnig like this:

Edit: /etc/apache2/sites-available/yourwebsiteconfig.com-ssl.conf

add or modify the followng line:

Header always set Content-Security-Policy: "script-src 'self' 'unsafe-inline' 'unsafe-eval' data: https://www.googletagmanager.com"

here:

<IfModule mod_headers.c>
        Header always append X-Frame-Options SAMEORIGIN
        Header always set Content-Security-Policy: "script-src 'self' 'unsafe-inline' 'unsafe-eval' data: https://www.googletagmanager.com"
</IfModule>

score 0 · Answer 10 · answered Jun 19 '23 at 10:04

The following helped me to get rid of CSP errors, when using Stripe in my NodeJS app:

app.use(helmet());
const helmet = require("helmet");

app.use(
  helmet.contentSecurityPolicy({
    directives: {
      defaultSrc: ["'self'"],
      fontSrc: ["'self'"],
      imgSrc: ["'self'"],
      scriptSrc: ["'self'"],
      styleSrc: ["'self'"],
      frameSrc: ["'self'"],
    },
    reportOnly: true, // Set to 'true' to enable report-only mode
  })
);

You may find very helpful tutorial here or read more about it here

score -5 · Answer 11 · edited Jul 19 '20 at 16:36

-5

The probable reason why you get this error is likely because you've added the /build folder to your .gitignore file or generally haven't checked it into Git.

So when you Git push Heroku master, the build folder you're referencing don't get pushed to Heroku. And that's why it shows this error.

That's the reason it works properly locally, but not when you deployed to Heroku.

edited Jul 19 '20 at 16:36

Peter Mortensen

30,738
21
105
131

answered Jun 12 '20 at 13:27

Sachin

1,206
12
13

Refused to load the script because it violates the following Content Security Policy directive

11 Answers11

Full permission string

Linked

Related