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

5 minutos de lectura

Avatar de usuario de Alexander Mills
alexander molinos

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

  • una forma en que puedo evitar este problema es usar ng build --prodpero la compilación del producto lleva mucho más tiempo

    – Alejandro Mills

    1 de enero de 2018 a las 4:34

  • agregando devtool: 'cheap-module-source-map' a su configuración de Webpack soluciona el problema al anular el mapeo de origen predeterminado.

    – Ben Botvinick

    16 de julio de 2020 a las 23:52

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.

  • Recibía este error cada vez que cambiaba mode a developmentno hubo ningún error al usar productionasí que agregué devtool: 'cheap-module-source-map' y ya no me sale el error. ¿Es necesario eliminar esta línea cuando se utiliza production ¿modo? o está bien dejarlo allí cuando en production ¿modo? Realmente no entiendo lo que hace, solo quiero que el error desaparezca 🙂

    – usuario1063287

    29 de agosto de 2020 a las 6:34

  • Sorprendentemente, esto funcionó, ¡gracias! Ahora voy a averiguar por qué. Gracias de nuevo.

    – Néstor

    28 de septiembre de 2020 a las 14:08

  • si agregas devtool: 'cheap-module-source-map' a webpack.config.js para solucionar este problema, ¿necesita retirar esta configuración cuando se ejecuta en production modo de nuevo, o sólo se aplica cuando se ejecuta en development ¿modo?

    – usuario1063287

    3 de noviembre de 2021 a las 3:35

  • me tomó un minuto con su ayuda. ¡Gracias!

    – Tal

    9 de mayo a las 9:51

  • Si encuentra algunas bibliotecas que no están definidas, recuerde configurar la versión es a la última para que el código de la biblioteca no se complete. "@babel/preset-env", { "modules": false, "targets": "last 2 Chrome versions" }

    – Weiya ou

    12 de mayo a las 14:41


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.

  • Agregando mi caso de uso para encontrar resultados de búsqueda: estaba tratando de usar “webpack-extension-reloader” para recargar automáticamente mi extensión creada por webpack en la compilación de webpack y seguía recibiendo el error de OP en el registro de errores de chrome://extensions para mi extensión desempaquetada. En última instancia, esto rompió la capacidad del recargador para hacer su trabajo. Sin embargo, agregar la solución de esta respuesta a mi manifest.json resolvió el problema.

    – t-mart

    2 de mayo de 2020 a las 5:03

  • ‘content_security_policy.extension_pages’: valor de CSP no seguro “‘unsafe-eval'” en la directiva ‘script-src’. No se pudo cargar el manifiesto.

    –Peter Palmer

    28 de enero a las 16:47

  • Atención: las evaluaciones inseguras solo funcionan en Chrome manifest v3

    – Sabiduría tecnológica

    11 de marzo a las 3:03

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

  • ¡Gracias a ti y a @Randy! ¡De mucha ayuda!

    – Marchev

    1 abr 2021 a las 20:13

  • No resolvió el problema.

    -Rohit Nair

    3 de octubre a las 5:36

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

Avatar de usuario de Allen
allen

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

Avatar de usuario de Goutham JM
Goutham JM

Para el Manifiesto 3 puedes usar

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

¿Ha sido útil esta solución?