启用 CSP 时要避免哪些与 eval() 相关的函数？

Question

我将我的 React 应用程序与 Webpack 捆绑并添加 Content Security Policy (CSP) 标头（特别是，不允许在 script-src 中使用 unsafe-eval）。当然，我确保我的最终包和块不包含eval()。但是，最新的 Firefox-dev 63.0b10 仍然拒绝加载主块并出现以下错误：

内容安全政策：页面设置阻止加载 自身资源（“script-src”）。来源：调用 eval() 或相关 功能被 CSP 阻止。

好吧，但我的包中没有eval()。 那些“相关功能”可能是什么？

_{附注这是self-answered question，但请随意扩展}

Answer 1

Mozilla docs on CSP，将“eval() 和类似方法”列为可能的违规者：

[…]'unsafe-eval' 允许使用eval() 和类似的方法从字符串创建代码。 […]

CSP3 specification § 1.2.1，提及“eval() 和类似结构”：

通过为开发人员提供信息来降低内容注入攻击的风险 对 [...] 动态代码执行的相当精细的控制（通过 eval() 和类似的结构）[...]

但最终答案在 CSP3 规范中更进一步，在 § 6.1.10.4：

以下 JavaScript 执行接收器在 “unsafe-eval”源表达式：

• eval()
• Function()
• setTimeout() 带有一个不可调用的初始参数。
• setInterval() 带有不可调用的初始参数。

注意：如果用户代理实现了非标准接收器，例如 setImmediate() 或 execScript()，它们也应该被关闭 “unsafe-eval”。

因此，出于 CSP 目的，“动态代码执行构造”、eval() 的“类似方法”、“相关函数”、“类似构造”的完整列表是：

eval()
Function()     // typically new Function()
setTimeout()   // with non-callable argument
setInterval()  // with non-callable argument
setImmediate()
execScript()

就我而言，我在包中发现了一些 new Function(...) 片段，现在正在研究如何防止它们出现。

奖金

如果您使用grepl 或类似grep 的工具来查找字符串匹配项并逐个字符地打印周围的上下文（而不是像正常的grep 那样逐行打印），您可以使用以下命令在捆绑（缩小和代码拆分）应用程序的所有文件中查找“动态代码执行结构”：

find "<build_dir>" -type f -iname "*.js" -exec grepl -k 512 -H "(eval|Function)(\s|\t)*\(" '{}' \;

或者，您可以关闭 JS minifier（例如 UglifyJS）并使用普通的 grep 检查您的构建。