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

Question

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?

Serena

Answer 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

Serena

By default webpack picks runtime file only. Second, the issue of eval comes even after defining alias to runtime because webpack itself uses eval method in try catch block. There is an open issue for that on webpack too github.com/webpack/webpack/issues/5627 – Stratigraphy

Answer 2

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

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

Nonexistence