Vuejs Browser-Erweiterung ohne Verwendung von 'unsafe-eval' in CSP

Question

Ich habe ein Browser-Addon mit Vuejs erstellt und Laravel Mix als Build-Prozess verwendet.

Alle meine Vue Templates sind in einzelnen Dateikomponenten und alles funktioniert absolut gut ... Bis ich "unsafe-eval" aus dem CSP in meinem Addon-Manifest entfernt habe. Firefox zeigt den Fehler:

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 verwendet webpack und vue-Lader, war ich unter dem Eindruck, dass das Bündel dies schafft ist CSP-konform.

Ich habe den eingebauten JS angeschaut und es scheint keinen Anruf zu eval() zu geben, aber es gibt einen new Function() Anruf, den ich vermute, das Problem verursachend.

Fehle ich hier etwas Einfaches?

Answer 1

Ich habe etwas Einfaches vermisst. Grundsätzlich

Ich brauchte webpack zu konfigurieren, dass die Laufzeit-Build von vue zu verwenden, etwa so:

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

Dann vue instanziiert eine Wurzelkomponente ist eher als ein html-Element:

const root = require('my-root-component.vue'); 
const app = new Vue({ 
    el: '#app', 
    render: createElement => createElement(root), 
}); 

ich bekam Hier antworten: https://github.com/JeffreyWay/laravel-mix/issues/1052