如何从 webpack 构建中删除 eval 和 Function 构造函数以避免 CSP 问题答案

【问题标题】：How to remove eval and Function constructor from webpack build to avoid CSP issues如何从 webpack 构建中删除 eval 和 Function 构造函数以避免 CSP 问题
【发布时间】：2018-07-19 14:51:01
【问题描述】：

问题在于在编译代码中使用 eval 的 Webpack。因此，Chrome 扩展程序和 Firefox 插件不起作用，因为它需要 CSP 属性中的“unsafe-eval”指令，这是不允许的。我将 Vue.js 用于前端，webpack 和 vue-loader 用于构建过程

Package.json 文件

{
   "webpack": "^3.10.0",
   "babel-core": "^6.18.2",
   "babel-loader": "^7.1.2",
   "babel-preset-es2015": "^6.18.0",
   "babel-preset-stage-2": "^6.24.1",
   "file-loader": "^0.9.0",
   "style-loader": "^0.18.2",
   "vue-loader": "^10.0.2"
}

这是 webpack 的 build.js 文件中包含的内容。 Function 构造函数和 eval 的用法。

try {
    // This works if eval is allowed (see CSP)
    g = g || Function("return this")() || (1,eval)("this");
} catch(e) {
    // This works if the window reference is available
    if(typeof window === "object")
        g = window;
}

// Another method of build 
function setImmediate(callback) {
      // Callback can either be a function or a string
      if (typeof callback !== "function") {
        callback = new Function("" + callback);
      }

这是web-ext lint 检查插件问题的结果

Code                    Message          File       Line    Column
DANGEROUS_EVAL          The Function     build.js   433     11
                        constructor is
                        eval.
DANGEROUS_EVAL          eval can be      build.js   433     43
                        harmful.
DANGEROUS_EVAL          The Function     build.js   8814    20
                        constructor is
                        eval.

有什么方法我可以在没有 Webpack 的情况下使用 build 进行构建，因为从 Vue 方面支持使用 Vue 的运行时代码，但 Webpack 没有按照 CSP 策略构建的平面。请帮忙，因为我不需要特别是构建中的这一行

【问题讨论】：

标签： google-chrome-extension webpack vue.js firefox-addon

【解决方案1】：

原因是，Webpack 检查全局变量，它需要在 Webpack 配置文件中的 node:false，它实际上删除了上述代码。原因是，上面的代码在 Web 应用程序上不是问题，因为它不会运行代码，但在 Chrome 扩展程序或 Firefox 插件的情况下，无论执行如何都会扫描代码，这会产生问题。

这存在于 webpack 源代码 here 中。有关全局变量的更多信息存在于here。

用webpack: ^3.11.0 版本试了一下，效果很好。

【讨论】：

【解决方案2】：

这是因为 Vue.js，而不是 Webpack。根据vue docs：

某些环境（例如 Google Chrome 应用程序）会强制执行内容安全政策 (CSP)，该政策禁止使用 new Function() 来评估表达式。完整的构建依赖于这个特性来编译模板，所以在这些环境中是不可用的。

另一方面，仅运行时构建完全符合 CSP。当使用带有 Webpack + vue-loader 或 Browserify + vueify 的运行时构建时，您的模板将被预编译为 render 函数，在 CSP 环境中完美运行。

不幸的是，Vue 在 Angular 中没有 ng-csp 这样的东西。因此，运行扩展的唯一方法是使用运行时构建。

有很好的答案如何构建：

【讨论】：

不是这样的，即使 webpack 上有一个不使用 vue.js 的 bug。我已经使用运行时版本的扩展对其进行了专门测试，并遵循 Vue 的每一步以使其符合 CSP。但问题在于 webpack。我正在寻找可以解决它的配置或任何可以构建符合 CSP 的代码的特定版本的 webpack。在我发布这个问题之后，我已经浏览了你已经提到的所有 lints 和 para 短语。检查这个：github.com/webpack/webpack/issues/5627
我不同意。我没有使用 Vue，但 Webpack 正在生成包含对 eval 和 Function 构造函数的调用的代码。