问题出在在编译代码中使用 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 文件中包含的内容。函数构造函数和 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 策略构建的平面。请帮忙,因为我不需要特别是构建中的这一行
最佳答案
原因是,Webpack 检查全局变量,它需要 Webpack 配置文件中的 node:false
,这实际上删除了上述代码。原因是,上述代码在 Web 应用程序上不是问题,因为它不会运行代码,但在 Chrome 扩展程序或 Firefox 插件的情况下,无论执行如何,都会扫描代码,这会产生问题。
这存在于 webpack 源代码中 here .提供有关全局变量的更多信息 here .
尝试使用 webpack: ^3.11.0
版本,效果很好。
关于google-chrome-extension - 如何从 webpack 构建中删除 eval 和 Function 构造函数以避免 CSP 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48695579/