如何从Webpack构建中删除eval和Function构造函数以避免CSP问题 [英] How to remove eval and Function constructor from webpack build to avoid CSP issues

问题描述

Webpack出现问题，该Webpack在编译的代码中使用eval.因此，Chrome扩展程序和Firefox附加组件无法正常工作，因为它要求CSP属性中的"unsafe-eval"指令不被允许.我将Vue.js用于前端，将 webpack 和 vue-loader 用于构建过程

Problem is with Webpack which uses eval in compiled code. Due to this, Chrome extension and Firefox addons does not work as it requires 'unsafe-eval' directive in CSP property which is not allowed. I am using Vue.js for frontend and webpack and vue-loader for build process

Package.json文件

Package.json file

{
   "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用法.

This is what contained within build.js file from webpack. Both Function constructor and eval usages.

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 棉绒检查的结果，该棉绒会检查插件中的问题

This is the result of the web-ext lint which checks for issues in 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而使用build进行构建，因为从Vue的角度来看，它支持使用Vue的运行时代码，但是Webpack没有按照CSP策略进行构建的方法.请帮忙，因为我不需要在构建中特别使用此行

Is there any way I can just build without Webpack using build because from side of Vue there is a support to use runtime code of Vue but Webpack has no flat to build as per CSP policy. Please help as I don't need especially this line in build

推荐答案

原因是，Webpack检查全局变量，并且需要在Webpack配置文件中 node:false ，实际上删除了上面的内容提到的代码.原因是，上面的代码在Web应用程序上不是问题，因为它不会运行该代码，但是如果使用Chrome扩展程序或Firefox插件，则会扫描该代码，而与执行无关，这是造成问题的原因.

The reason is that, Webpack checks for global variables and it needed, node:false in Webpack config file which actually removes the above mentioned code. The reason, the above code is not an issue on web application because it won't run the code but in case of Chrome Extension or Firefox plugin, the code is scanned irrespective of execution and this was creating problem.

这出现在webpack源代码中这里.此处.

This is present in webpack source code here. More info about globals is present here.

在 webpack:^ 3.11.0 版本中进行了尝试，就像魅力一样.

Tried it with webpack: ^3.11.0 version, worked like charm.

这篇关于如何从Webpack构建中删除eval和Function构造函数以避免CSP问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！