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

user_268089 0
Viewed 4979

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?

laravel-mix vuejs2
2 Answers

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

user_2680890

In addition, i also needed the following setting in vue.config.json

module.exports = {
  configureWebpack: {
    node: { global: false },
    devtool: 'source-map'
  }
}
user_11662850
Related