La extensión de Chrome compilada por Webpack arroja el error `unsafe-eval`

Recibo este error cuando recargo mi extensión de Chrome después de compilar usando 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)

Mi CSP otorga la unsafe-eval permiso.

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

¿Cómo puedo permitir el uso de eval() en mi código (porque Webpack usa esto para generar mapas fuente)?

Me tomó algunas horas, pero lo que probablemente quieras hacer es cambiar el estilo de los usos del paquete web de mapeo de fuentes. Por defecto usa eval.

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

Agregué esto a mi webpack.config.js:

devtool: 'cheap-module-source-map'


El truco para esto fue averiguar por qué webpack --mode development tiene el error y webpack --mode production no.

También estoy usando React not Polymer, pero estoy bastante seguro de que esto todavía se aplica.

Lectura interesante para superar a través de Manifiesto

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

JavaScript evaluado

La política contra eval() y sus parientes como setTimeout(String), setInterval(String) y new Function(String) se puede relajar agregando ‘unsafe-eval’ a su política:

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

Sin embargo, le recomendamos encarecidamente que no haga esto. Estas funciones son vectores de ataque XSS notorios.

Gracias por la respuesta de @Randy. Sin embargo, para el proyecto vue generado por Vue CLI, no hay webpack.config.jspor lo que la solución será agregar la siguiente configuración en vue.config.js:

  configureWebpack: {
    devtool: 'cheap-module-source-map'
  }

No se permite el uso de una extensión de Chrome unsafe-evalo eval en absoluto de hecho.

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

Al crear una extensión de Chrome, comprenda que está severamente limitada por las políticas de seguridad de contenido. Asegúrese de leer y comprender la Política de seguridad de contenido de WebExtensions. Si desea tener un script en línea como:

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

Vas a tener que calcular el contenido de las etiquetas del script en su valor SHA256 y agregarlo a tu manifiesto para que se pueda ejecutar.

paquete web V5

Usar --no-devtool para salir de un apuro rápidamente.

Sin código de evaluación, no .map expediente.

npx webpack watch --no-devtool

CLI del paquete web
https://webpack.js.org/api/cli#negated-flags

FYI, me encuentro con este problema porque agrego istanbul complemento en babel.config.js.

Y el resultado de la compilación contiene new Function('return this')

Para el Manifiesto 3 puedes usar

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