Vuejs browser extension without using 'unsafe-eval' in CSP

问题

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

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:

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 uses webpack and vue-loader, I was under the impression that the bundles this creates are CSP compliant.

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?

回答1:

I was missing something simple.

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'
        }
    }
});

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),
});

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

来源：https://stackoverflow.com/questions/47139132/vuejs-browser-extension-without-using-unsafe-eval-in-csp