Question

问题在于Webpack在编译代码中使用eval。因此，Chrome扩展程序和Firefox插件无法正常工作，因为它需要“不安全 - 评估”。 CSP属性中的指令是不允许的。我使用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检查addon

中的问题的结果

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的运行时代码的支持，但是根据CSP策略，Webpack没有可以构建的平面。请帮忙，因为我不需要在构建

中特别需要这一行

Answer 1

原因是，Webpack检查全局变量，并且在Webpack配置文件中需要node:false，它实际上删除了上面提到的代码。原因是，上述代码在Web应用程序上不是问题，因为它不会运行代码，但在Chrome Extension或Firefox插件的情况下，代码会被扫描而不管执行情况，这就产生了问题。

这存在于webpack源代码here中。有关globals的更多信息，请访问here。

用webpack: ^3.11.0版试了一下，就像魅力一样。

Answer 2

这是因为Vue.js，而不是Webpack。根据{{3}}：

某些环境（例如Google Chrome Apps）会强制执行内容安全策略（CSP），该策略禁止使用new Function()来评估表达式。完整版本依赖于此功能来编译模板，因此在这些环境中无法使用。

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

不幸的是，Vue在Angular中没有ng-csp之类的东西。所以运行扩展的唯一方法 - 使用运行时构建。

如何进行这样的构建有很好的答案：

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

2 个答案: