Webpack 编译的 Chrome 扩展抛出 `unsafe-eval` 错误答案

【问题标题】：Chrome extension compiled by Webpack throws `unsafe-eval` errorWebpack 编译的 Chrome 扩展抛出 `unsafe-eval` 错误
【发布时间】：2018-06-11 08:14:33
【问题描述】：

使用 Webpack 编译后重新加载 Chrome 扩展时出现此错误：

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)

我的 CSP 授予 unsafe-eval 权限。

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

如何允许在我的代码中使用eval()（因为 Webpack 使用它来生成源映射）？

【问题讨论】：

我可以避免这个问题的一种方法是使用ng build --prod，但产品构建需要更长的时间
将 devtool: 'cheap-module-source-map' 添加到您的 Webpack 配置中，通过覆盖默认源映射来解决问题。

标签： javascript google-chrome webpack google-chrome-extension

【解决方案1】：

花了我几个小时，但您可能想要做的是更改 webpack 使用的源映射样式。默认情况下它使用 eval。

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

我将此添加到我的 webpack.config.js 中： devtool: 'cheap-module-source-map'

解决这个问题的诀窍是找出为什么webpack --mode development 有错误而webpack --mode production 没有。

我也在使用 React 而不是 Polymer，但我很确定这仍然适用。

【讨论】：

每当我将mode 更改为development 时，我都会收到此错误，使用production 时没有错误，所以我添加了devtool: 'cheap-module-source-map'，我不再收到错误。使用production 模式时是否需要删除此行？或者在production 模式下可以将其留在那里吗？我真的不明白它的作用，我只是想让错误消失:)
令人惊讶的是，这成功了，谢谢！现在我会弄清楚为什么。再次感谢。
谢谢！帮了大忙
如果将devtool: 'cheap-module-source-map'添加到webpack.config.js来解决这个问题，在production模式下再次运行时是否需要删除这个设置，还是这样？仅在development 模式下运行时应用？

【解决方案2】：

通过清单克服有趣的阅读

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

评估 JavaScript

针对 eval() 及其亲属的政策如 setTimeout(String)、setInterval(String) 和 new Function(String) 可以通过在您的策略中添加“unsafe-eval”来放松：

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

但是，我们强烈建议您不要这样做。这些函数是臭名昭著的 XSS 攻击向量。

【讨论】：

将我的用例添加到搜索结果中：我试图使用“webpack-extension-reloader”在 webpack 编译时自动重新加载我的 webpack 构建的扩展，并在 chrome 中不断收到 OP 的错误://extensions 我未打包扩展的错误日志。最终，这破坏了重装机的工作能力。将这个答案的解决方案添加到我的 manifest.json 解决了这个问题。

【解决方案3】：

感谢@Randy 的回答。但是，对于 Vue CLI 生成的 vue 项目，没有webpack.config.js，所以解决方案是在vue.config.js 中添加以下配置：

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

【讨论】：

感谢您和@Randy！真的很有帮助！

【解决方案4】：

Chrome 扩展实际上根本不允许使用unsafe-eval 或eval。

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

在制作 Chrome 扩展程序时，请了解它受到内容安全策略的严格限制。确保您阅读并理解 WebExtensions 内容安全政策。如果你想有一个像这样的内联脚本：

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

您必须将脚本标签内容计算为其 SHA256 值并将其添加到您的清单中才能允许执行。

【讨论】：

页面developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/… 明确声明您可以Allow the extension to use eval()（通过使用unsafe-eval）。但这对我不起作用...
@manuell 这是我使用的并且有效："content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self';"
"Chrome 扩展不允许使用 unsafe-eval，或者实际上是 eval。"我不认为这是正确的（不再）。 Source
@stackprotector 它仍然有效，刚刚使用带有 Manifest V2 的 Crypto Miner 对其进行了测试，虽然我不确定 V3 是否是这样的
developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/… 在底部您可以明确阅读“注意：有效示例显示 CSP 中键的正确使用。但是，带有 'unsafe-eval'、远程脚本、blob 或远程的扩展根据附加策略和重大安全问题，Firefox 扩展不允许其 CSP 中的源。”这同样适用于 Chrome 扩展程序。 developer.chrome.com/docs/apps/contentSecurityPolicy

【解决方案5】：

在我使用 MVC 5 应用程序的情况下，我所要做的就是在 Visual Studio 中安装 Nuget 包：'NWebsec.Mvc' 并且应用程序运行良好。

【讨论】：