Chrome extension compiled by Webpack throws `unsafe-eval` error
JavascriptGoogle ChromeWebpackGoogle Chrome-ExtensionJavascript Problem Overview
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)?
Javascript Solutions
Solution 1 - Javascript
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.
Solution 2 - Javascript
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.
Solution 3 - Javascript
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'
}
Solution 4 - Javascript
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.
Solution 5 - Javascript
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
Solution 6 - Javascript
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.