Sunny Adhatrao
Sunny Adhatrao

Reputation: 153

Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script Content Security Policy directive:default-src self

In my application, I want Content Security Policy: all directives should be set to self, but when I am trying to do that it is showing the following error

Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "default-src 'self';".

at Function (<anonymous>)
at Function._init (yui_combo.php?rollup/3.17.2/yui-moodlesimple-min.js:8:3195)
at yui_combo.php?rollup/3.17.2/yui-moodlesimple-min.js:9:4331
at yui_combo.php?rollup/3.17.2/yui-moodlesimple-min.js:9:4558

Refused to execute inline script because it violates the following Content Security Policy directive: "default-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-BfUVqxUMiFIZGvtAvlU3O1tTN9idUT5IuAIpMSM2F5g='), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'script-src' was not explicitly set, so 'default-src' is used as a fallback.

Refused to load the stylesheet 'https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&display=swap' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'style-src-elem' was not explicitly set, so 'default-src' is used as a fallback.

Upvotes: 15

Views: 83930

Answers (4)

Developer Sabbir
Developer Sabbir

Reputation: 383

These are some reasons this error can occur.

  • The error message indicates that the CSP does not allow the use of 'unsafe-eval' as a source of the script.
  • However, this means that you cannot use the eval() method/function in your extension code.

To fix this, we can modify the CSP of your extension to allow 'unsafe-eval'. To do this, we need to add the following line to our manifest.json file

In the below section. If you are using manifest V2 then use this line.

"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"

Or, if you are using manifest V3, then you have to use this line

"content_security_policy": {
    "extension_pages": "script-src 'self' 'unsafe-eval'; object-src 'self'"
  }

Upvotes: -2

sEver
sEver

Reputation: 2295

unsafe-eval basically nullifies the protections you would gain from Content-Security-Policy.

The whole point of Content-Security-Policy is to protect your app from possible Javascript Injections and Cross-Site-Scripting (XSS) attacks.

You set

Content-Security-Policy: script-src 'self';

to only execute safe scripts that are served as files from your own origin - the same source the app is hosted.

Now, if you allow unsafe-eval, then that eval becomes a point of entry for the attacker, and once they manage to inject their javascript into your app, they have total control and all other benefits you'd get from CSP are voided.

So if you want to have CSP enabled (in a way that makes sense), having eval in your code makes it lose that sense.

Therefore, if you're serious about using CSP to protect your app, you should focus on eliminating your need for eval instead on allowing unsafe-eval within the CSP.

See this Google research paper on CSP for details:

CSP Is Dead, Long Live CSP! On the Insecurity of Whitelists and the Future of Content Security Policy

Upvotes: 8

Niv Apo
Niv Apo

Reputation: 1083

If you are using helmet on your Node.JS server, you can configure the following:

server.use(helmet({
    contentSecurityPolicy: false
}));

Or you can configure the following to whitelist a specific domain:

server.use(
  helmet.contentSecurityPolicy({
    directives: {
      "script-src": ["'self'", "example.com"],
      "style-src": null,
    },
  })
);

Upvotes: 5

Tore Nestenius
Tore Nestenius

Reputation: 19921

The content security policy must have this directive:

default-src 'self';
script-src 'self' 'unsafe-eval'; 
style-src 'self' fonts.googleapis.com;

and more.

Upvotes: 5

Related Questions