Chrome extension compiled by Webpack throws `unsafe-eval` error

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

6 Answers

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.

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.

Interesting read to overcome via Manifest

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.

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' } 

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

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.

Webpack V5

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

No eval code, no .map file.

npx webpack watch --no-devtool 

webpack cli

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.