CODEWITHSUNDEEP
javascriptgoogle-chromewebpackgoogle-chrome-extension
Alexander Mills
Alexander Mills

Reputation: 100080

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

Upvotes: 89

Views: 102733

Answers (9)

Crypto-Frank
Crypto-Frank

Reputation: 360

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

Please see the Migrating to Manifest V3.

Upvotes: 1

Goutham J.M
Goutham J.M

Reputation: 2194

For Manifest 3 you can use

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

Upvotes: 2

Allen
Allen

Reputation: 2177

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

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

Upvotes: 1

weiya ou
weiya ou

Reputation: 4320

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

Upvotes: 2

Jianwu Chen
Jianwu Chen

Reputation: 6033

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

Upvotes: 21

GabrielN
GabrielN

Reputation: 9

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.

Upvotes: -2

takrishna
takrishna

Reputation: 5002

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.

Upvotes: 35

Randy
Randy

Reputation: 1633

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.

Upvotes: 162

Simon Hyll
Simon Hyll

Reputation: 3618

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.

Upvotes: 12

Related Questions