在 CSP 中不使用 'unsafe-eval' 的 Vuejs 浏览器扩展
Vuejs browser extension without using 'unsafe-eval' in CSP
我使用 Vuejs 构建了一个浏览器插件,并使用 Laravel Mix 作为我的构建过程。
我所有的 vue 模板都在单个文件组件中,并且一切正常......直到我从我的插件清单中的 CSP 中删除 'unsafe-eval'。 Firefox 显示错误:
Content Security Policy: The page's settings blocked the loading of a resource...Source: call to eval() or related function blocked by CSP.
Laravel Mix 使用 webpack 和 vue-loader,我的印象是它创建的包符合 CSP。
我查看了构建的 JS,似乎没有对 eval()
的调用,但是我认为有一个 new Function()
调用导致了问题。
我是不是漏掉了一些简单的东西?
我漏掉了一些简单的东西。
基本上我需要像这样配置 webpack 来使用 vue 的运行时构建:
mix.webpackConfig({
resolve: {
alias: {
'vue$': 'vue/dist/vue.runtime.js'
}
}
});
然后使用根组件而不是 html 元素实例化 vue:
const root = require('my-root-component.vue');
const app = new Vue({
el: '#app',
render: createElement => createElement(root),
});
我在这里得到了答案:https://github.com/JeffreyWay/laravel-mix/issues/1052
此外,我还需要在vue.config.json
中进行如下设置
module.exports = {
configureWebpack: {
node: { global: false },
devtool: 'source-map'
}
}
我使用 Vuejs 构建了一个浏览器插件,并使用 Laravel Mix 作为我的构建过程。
我所有的 vue 模板都在单个文件组件中,并且一切正常......直到我从我的插件清单中的 CSP 中删除 'unsafe-eval'。 Firefox 显示错误:
Content Security Policy: The page's settings blocked the loading of a resource...Source: call to eval() or related function blocked by CSP.
Laravel Mix 使用 webpack 和 vue-loader,我的印象是它创建的包符合 CSP。
我查看了构建的 JS,似乎没有对 eval()
的调用,但是我认为有一个 new Function()
调用导致了问题。
我是不是漏掉了一些简单的东西?
我漏掉了一些简单的东西。
基本上我需要像这样配置 webpack 来使用 vue 的运行时构建:
mix.webpackConfig({
resolve: {
alias: {
'vue$': 'vue/dist/vue.runtime.js'
}
}
});
然后使用根组件而不是 html 元素实例化 vue:
const root = require('my-root-component.vue');
const app = new Vue({
el: '#app',
render: createElement => createElement(root),
});
我在这里得到了答案:https://github.com/JeffreyWay/laravel-mix/issues/1052
此外,我还需要在vue.config.json
module.exports = {
configureWebpack: {
node: { global: false },
devtool: 'source-map'
}
}