81

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)?

Ben Botvinick
  • 2,837
  • 3
  • 16
  • 41
Alexander Mills
  • 90,741
  • 139
  • 482
  • 817

9 Answers9

151

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.

Randy
  • 1,523
  • 2
  • 9
  • 5
  • 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 :) – user1063287 Aug 29 '20 at 06:34
  • Surprisingly this did the trick, thanks! Now I will figure it out why. Thanks again. – Nestor Sep 28 '20 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? – user1063287 Nov 03 '21 at 03:35
  • it took me one minute with your help. thanks! – Tal May 09 '22 at 09: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 '22 at 14:41
  • This just changed the error to a runtime "DevTools failed to load source map". But it is still better to have no source map than to have no service worker... – César Rodriguez Aug 20 '22 at 14:48
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.

takrishna
  • 4,884
  • 3
  • 18
  • 35
  • 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 02 '20 at 05:03
  • 2
    'content_security_policy.extension_pages': Insecure CSP value "'unsafe-eval'" in directive 'script-src'. Could not load manifest. – Peter Palmer Jan 28 '22 at 16:47
  • 1
    Attention: unsafe evals only works on Chrome manifest v3 – TechWisdom Mar 11 '22 at 03:03
19

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'
  }
Jianwu Chen
  • 5,336
  • 3
  • 30
  • 35
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.

Simon Hyll
  • 3,265
  • 3
  • 24
  • 44
  • The page https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_security_policy 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 '18 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 09 '20 at 07: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](https://developer.chrome.com/extensions/contentSecurityPolicy#relaxing-eval) – stackprotector Sep 17 '20 at 06: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 01 '21 at 00:40
  • https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_security_policy 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. https://developer.chrome.com/docs/apps/contentSecurityPolicy/ – Simon Hyll Sep 01 '21 at 12:57
  • So while you guys are correct in that the documentation states that you can allow unsafe-eval for CSP rules, it also states both for Firefox and Chrome extensions if you dig a bit that unsafe-eval is in fact not allowed no matter what you do, because it's a security risk. CSP rules are used primarily for websites and REST api's, that's why the documentation states you can allow unsafe-eval, and why the texts for "doesn't work in extensions" is so small, because extensions are one of the smaller places where CSP rules are used. – Simon Hyll Sep 01 '21 at 13:00
1

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

weiya ou
  • 2,730
  • 1
  • 16
  • 24
1

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

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

Allen
  • 2,037
  • 3
  • 15
  • 21
1

For Manifest 3 you can use

"content_security_policy": {
    "extension_page":"script-src 'self' 'wasm-unsafe-eval'; object-src 'self'" 
}
Goutham J.M
  • 1,726
  • 12
  • 25
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.

Crypto-Frank
  • 142
  • 6
-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.

GabrielN
  • 9
  • 3