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

Question

问题在于 Webpack 在编译代码中使用 eval。因此，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 文件中包含的内容。函数构造函数和 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 的情况下使用构建进行构建，因为从 Vue 的角度来看，支持使用 Vue 的运行时代码，但 Webpack 没有根据 CSP 策略进行构建的平台。请帮助，因为我不需要特别是构建中的这一行

Answer 1

发生这种情况是因为 Vue.js，而不是 Webpack。\n根据vue 文档：

\n

\n

某些环境（例如 Google Chrome 应用）强制执行内容安全策略 (CSP)，该策略禁止使用new Function()来计算表达式。完整的构建依赖于此功能来编译模板，因此在这些环境中不可用。

\n

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

\n

\n

不幸的是，Vue 没有像ng-cspAngular 那样的东西。因此，运行扩展 \xe2\x80\x93 来使用运行时构建的唯一方法。

\n

如何进行此类构建有很好的答案：

\n

\n
• Chrome 扩展中的 Vue.js
\n
• 在 CSP 中不使用“unsafe-eval”的 Vuejs 浏览器扩展\n
\n

\n