在 CSP 中不使用“unsafe-eval”的 Vuejs 浏览器扩展

我已经使用 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() 调用导致了问题。

我在这里错过了一些简单的东西吗?

stack overflow Vuejs browser extension without using 'unsafe-eval' in CSP
原文答案
author avatar

接受的答案

我缺少一些简单的东西。

基本上,我需要配置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'
  }
}

相关问题