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

【问题标题】：Vuejs browser extension without using 'unsafe-eval' in CSP在 CSP 中不使用“unsafe-eval”的 Vuejs 浏览器扩展
【发布时间】：2017-11-06 14:26:10
【问题描述】：

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

我在这里遗漏了一些简单的东西吗？

【问题讨论】：

【解决方案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),
});

【讨论】：

默认情况下 webpack 只选择运行时文件。其次，即使在定义了运行时的别名之后也会出现 eval 的问题，因为 webpack 本身在 try catch 块中使用了eval 方法。在 webpack 上也有一个未解决的问题 github.com/webpack/webpack/issues/5627