在 CSP 中不使用“unsafe-eval"的 Vuejs 浏览器扩展 [英] Vuejs browser extension without using 'unsafe-eval' in CSP

问题描述

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

I have built a browser addon using Vuejs and used Laravel Mix as my build process.

我所有的vue模板都在单个文件组件中，并且一切正常……直到我从插件清单中的CSP中删除"unsafe-eval".Firefox显示错误:

All of my vue templates are in single file components, and everything works absolutely fine...Until I remove 'unsafe-eval' from the CSP in my addon manifest. Firefox shows the error:

内容安全策略:该页面的设置阻止了资源的加载...来源:对eval()或CSP阻止的相关函数的调用.

Laravel Mix使用webpack和vue-loader，给我的印象是，它创建的捆绑包符合CSP.

Laravel Mix uses webpack and vue-loader, I was under the impression that the bundles this creates are CSP compliant.

我看过内置的JS，似乎没有调用 eval()，但是有一个 new Function()调用，我认为是问题.

I have looked at the built JS and there does not appear to be a call to eval() however there is a new Function() call which I assume causing the issue.

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

Am I missing something simple here?

推荐答案

我缺少一些简单的东西.

I was missing something simple.

基本上，我需要将webpack配置为使用vue的运行时构建，如下所示:

Basically I needed to configure webpack to use the runtime build of vue like so:

mix.webpackConfig({
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.runtime.js'
        }
    }
});

然后使用根组件而不是 html 元素实例化 vue:

Then instantiate vue using a root component rather than a html element:

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

I got the answer here: https://github.com/JeffreyWay/laravel-mix/issues/1052

这篇关于在 CSP 中不使用“unsafe-eval"的 Vuejs 浏览器扩展的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！