83

I get this error when reloading my Chrome Extension after compiling using Webpack:

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: "script-src 'self' blob: filesystem: chrome-extension-resource:".
    
    
at new Function (<anonymous>)
at evalExpression (compiler.js:33919)
at jitStatements (compiler.js:33937)
at JitCompiler.webpackJsonp.../../../compiler/esm5/compiler.js.JitCompiler._interpretOrJit (compiler.js:34520)
at JitCompiler.webpackJsonp.../../../compiler/esm5/compiler.js.JitCompiler._compileTemplate (compiler.js:34448)
at compiler.js:34347
at Set.forEach (<anonymous>)
at JitCompiler.webpackJsonp.../../../compiler/esm5/compiler.js.JitCompiler._compileComponents (compiler.js:34347)
at compiler.js:34217
at Object.then (compiler.js:474)

My CSP grants the unsafe-eval permission.

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

How can I permit the use of eval() in my code (because Webpack uses this to generate source maps)?

2
  • one way I can avoid this problem is to use ng build --prod, but the prod build takes a loooot longer Jan 1, 2018 at 4:34
  • 2
    Adding devtool: 'cheap-module-source-map' to your Webpack config fixes the issue by overriding the default source mapping. Jul 16, 2020 at 23:52

9 Answers 9

152

Took me a few hours but what you probably want to do is change the style of source mapping webpack uses. By default it uses eval.

https://webpack.js.org/configuration/devtool/

I added this to my webpack.config.js: devtool: 'cheap-module-source-map'

The trick to this was figuring out why webpack --mode development has the error and webpack --mode production didn't.

Also I'm using React not Polymer but I'm pretty sure this still applies.

6
  • 1
    i was getting this error whenever i changed mode to development, there was no error when using production, so i added devtool: 'cheap-module-source-map' and i no longer get the error. does this line need to be removed when you use production mode? or is it OK to leave it there when in production mode? i don't really understand what it does, i just want the error to go away :) Aug 29, 2020 at 6:34
  • Surprisingly this did the trick, thanks! Now I will figure it out why. Thanks again.
    – Nestor
    Sep 28, 2020 at 14:08
  • If you add devtool: 'cheap-module-source-map' to webpack.config.js to get around this issue, do you need to remove this setting when running in production mode again, or is it only applied when running in development mode? Nov 3, 2021 at 3:35
  • it took me one minute with your help. thanks!
    – Tal
    May 9, 2022 at 9:51
  • If you encounter some libraries that are not defined, remember to set the es version to the latest so that the library code is not populated. "@babel/preset-env", { "modules": false, "targets": "last 2 Chrome versions" }
    – weiya ou
    May 12, 2022 at 14:41
33

Interesting read to overcome via Manifest

https://developer.chrome.com/extensions/contentSecurityPolicy

Evaluated JavaScript

The policy against eval() and its relatives like setTimeout(String), setInterval(String), and new Function(String) can be relaxed by adding 'unsafe-eval' to your policy:

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

However, we strongly recommend against doing this. These functions are notorious XSS attack vectors.

3
  • 2
    Adding my use case to bump in search results: I was trying to use the "webpack-extension-reloader" to automatically reload my webpack-built extension on webpack compile and kept getting OP's error in the chrome://extensions error log for my unpacked extension. Ultimately, this broke the reloader's ability to do its job. Adding this answer's solution to my manifest.json resolved the issue though.
    – t-mart
    May 2, 2020 at 5:03
  • 2
    'content_security_policy.extension_pages': Insecure CSP value "'unsafe-eval'" in directive 'script-src'. Could not load manifest. Jan 28, 2022 at 16:47
  • 1
    Attention: unsafe evals only works on Chrome manifest v3
    – TechWisdom
    Mar 11, 2022 at 3:03
20

Thanks for the answer from @Randy. However, For Vue CLI generated vue project, there's no webpack.config.js, so the solution will be adding the following config into vue.config.js:

  configureWebpack: {
    devtool: 'cheap-module-source-map'
  }
2
  • Thanks to both you and @Randy! Really helpful!
    – Marchev
    Apr 1, 2021 at 20:13
  • 2
    Didn't solve the issue.
    – Rohit Nair
    Oct 3, 2022 at 5:36
12

A chrome extension is not allowed to use unsafe-eval, or eval at all in fact.

https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Content_Security_Policy

When making a Chrome extension understand that it's severely limited by Content Security Policies. Make sure you read and understand the WebExtensions Content Security Policy. If you want to have an inline script like:

<script>
    alert('hello')
</script>

You're gonna have to calculate the script tags contents into its SHA256 value and add that to your manifest in order for it to be allowed to be executed.

6
  • The page developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/… explicitly states that you CAN Allow the extension to use eval() (by using unsafe-eval). But that doesn't work for me...
    – manuell
    Aug 29, 2018 at 15:06
  • 5
    @manuell This is what I use and it works: "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self';"
    – Shl
    Aug 9, 2020 at 7:16
  • 1
    "A chrome extension is not allowed to use unsafe-eval, or eval at all in fact." I don't think this is correct (anymore). Source Sep 17, 2020 at 6:38
  • @stackprotector It still works, Just tested it with a Crypto Miner with Manifest V2, Although I'm not sure about V3 if that's even a thing
    – Eric
    Sep 1, 2021 at 0:40
  • developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/… at the bottom you can read explicitly that "Note: Valid examples display the correct use of keys in CSP. However, extensions with 'unsafe-eval', remote script, blob, or remote sources in their CSP are not allowed for Firefox extensions as per the add-on policies and due to major security issues." The same applies to Chrome extensions. developer.chrome.com/docs/apps/contentSecurityPolicy
    – Simon Hyll
    Sep 1, 2021 at 12:57
2

Webpack V5

Use --no-devtool to get out of trouble quickly.

No eval code, no .map file.

npx webpack watch --no-devtool

webpack cli https://webpack.js.org/api/cli#negated-flags

1

FYI, I meet this issue because I add istanbul plugin in babel.config.js.

And the build result contains new Function('return this')

1

For Manifest 3 you can use

"content_security_policy": {
    "extension_page":"script-src 'self' 'wasm-unsafe-eval'; object-src 'self'" 
}
1
  • 1
    For me is working with extension_pages instead of extension_page. Jan 24 at 9:32
0

Scripts from external domains are not allowed in mv3, all scripts must be included into extension package.

Please see the Migrating to Manifest V3.

-2

In my case working on an MVC 5 application, all I had to do was to install the Nuget package in Visual Studio: 'NWebsec.Mvc' and the application ran just fine.

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.