-1

webpack 4 似乎正在将这样的代码添加到包中

    try {
      n = n || new Function("return this")();
    } catch (e) {
      "object" == typeof window && (n = window);
    }

我们有严格的安全性，这意味着这将因为代码而使cspnew Function失败。

不幸的是，添加unsafe-eval到 csp 不是一种选择。

是否可以阻止 wepback 添加此代码？

我尝试将节点设置为以下内容：

    node: {
      module: 'empty',
      dgram: 'empty',
      dns: 'mock',
      fs: 'empty',
      http2: 'empty',
      net: 'empty',
      tls: 'empty',
      child_process: 'empty',
      setImmediate: false,
      setTimeout: false,
      setInterval: false,
      global: false
    },

我是这样设置devtool的：

devtool: 'cheap-module-source-map',

我已经设置globlObject为window

globalObject: 'window',

这减少了new Function调用次数，但并未删除它们。

理想情况下，我们应该使用这个 polyfill

4

1 回答 1

0

确保你的 webpack 目标设置为web. 没有必要fs手动禁用所有节点的东西（比如），如果你为 web 构建这些东西应该自动删除。这可能是 webpack 包含 evals 的原因，因为它可能不关心它是否认为它将在服务器端执行。

如果这不起作用，那么您可以尝试以下方法：

  • webpack devtool 默认为 eval 以获得更快的构建，我不确定是否cheap-module-source-map仍然包含 CSP 违规，因此您也可以尝试将其设置为source-mapor inline-source-map，以确保不是那样。 https://webpack.js.org/configuration/devtool/，你也可以完全禁用devtool，看看是不是这样，然后你至少可以确定它是否是devtool。
  • 您也可以尝试将其设置mode为生产，我相对确定它应该在生产中工作并且它特别是一个开发问题。虽然这不是一个真正的解决方案，但如果你只需要完成任务，你可以暂时这样做。或者，您也可以使用terser-webpack-plugin或babel绕过它。或者您可以尝试使用 SWC 和 编译它swc-loader，我不知道 swc 是否真的删除了 eval，但如果没有其他方法，您可以尝试这样做，并且 swc 编译会非常快，因此您可以在开发构建中使用它。
  • 我不确定你是否正在使用babel，但如果你也确保它设置为babel-preset-env而不是env.
  • 除了设置node.globals，您也可以只设置node: false，完全禁用它。根据How to remove eval and Function constructor from webpack build to Avoid CSP issues，即使它没有被执行，仅仅禁用全局变量实际上可能仍然包含代码，即使它由于 Chrome/Firefox 而从未执行，它仍然会引发 CSP 冲突扫描它。那是因为https://github.com/webpack/webpack/blob/fb8afe71385734cfd65f47949117306a91f20753/buildin/global.js#L10包含可能导致 CSP 问题的 eval 代码，这也是他们推荐使用的原因ProvidePlugin。但是，如果您正在为网络构建，则根本不应该使用这些全局内容，全局变量直接指的是https://nodejs.org/api/globals.html#globals_global，用于服务器端构建。如果您在浏览器中运行代码，那么您的目标没有理由应该是节点，您将遇到各种问题。

我的直觉告诉我，这可能很愚蠢，比如不正确的 webpack 目标https://webpack.js.org/configuration/target/。

于 2021-11-28T00:43:52.013 回答