Webpack编译的Chrome扩展抛出“不安全-评估”错误

Question

在编译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使用它来生成源代码映射)？

Answer 1

实际上，铬扩展名不允许使用unsafe-eval或eval。

政策

在进行Chrome扩展时，要理解内容安全策略对它的严重限制。确保您阅读并理解了WebExtensions内容安全策略。如果您想拥有一个内联脚本，如：

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

您必须将脚本标记内容计算到它的SHA256值中，并将其添加到清单中，以便允许执行它。

Answer 2

花了我几个小时，但你可能要做的是改变源代码映射webpack使用的风格。默认情况下，它使用eval。

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

我把这个添加到我的webpack.config.js：devtool: 'cheap-module-source-map'中

这方面的诀窍是找出为什么webpack --mode development有错误，而webpack --mode production没有。

此外，我使用的是反应，而不是聚合物，但我非常肯定，这仍然适用。

Answer 3

通过宣言来克服有趣的阅读

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

评价JavaScript 可以通过在您的策略中添加“不安全-eval”来放松针对eval()及其亲属(如setTimeout(String)、setInterval(String)和新函数(String))的策略：

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

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