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

问题在于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文件中包含的内容。函数构造函数和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);
      }

这是检查加载项中问题的

webext

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策略构建的平面。请帮助我，因为我不需要特别是构建中的这一行

这是因为Vue.js，而不是Webpack。 根据报告：

某些环境，如Google Chrome应用程序，强制执行内容安全策略（CSP），该策略禁止使用

new Function（）

计算表达式。完整构建依赖于此功能来编译模板，因此在这些环境中无法使用

另一方面，仅运行时构建完全符合CSP。当使用仅运行时版本的Webpack+vue loader或Browserify+vueify时，您的模板将预编译为

render

函数，这些函数在CSP环境中运行良好

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

对于如何构建这样的模型，有很好的答案：

---

原因是，Webpack检查全局变量，它需要在Webpack配置文件中使用，

node:false

，从而实际删除上述代码。原因是，上面的代码在web应用程序上不是问题，因为它不会运行代码，但在Chrome扩展或Firefox插件的情况下，无论执行情况如何，都会扫描代码，这会造成问题

这存在于网页包源代码中。提供了有关globals的更多信息

---

用

webpack:^3.11.0

版本试用，效果很好

事实并非如此，即使Web包上有一个不使用vue.js的bug。我已经用extension的运行时版本专门测试了这一点，并遵循Vue的每个步骤使其符合CSP。但问题在于网页包。我正在寻找一个配置，可以解决它或任何特定版本的网页，可以建立CSP兼容的代码。我已经通读了你提到的所有短文和段落短语，只是在我发布了这个问题之后。检查这个：我不同意。我没有使用Vue，但Webpack正在生成代码，其中包含对eval和函数构造函数的调用。