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

Question

我使用 Vuejs 构建了一个浏览器插件，并使用 Laravel Mix 作为我的构建过程。

我的所有 vue 模板都在单个文件组件中，并且一切正常……直到我从插件 list 中的 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()我认为导致问题的电话。

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

Answer 1

我错过了一些简单的东西。

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