Расширение браузера Vuejs без использования «unsafe-eval» в CSP

Я создал надстройку для браузера с помощью Vuejs и использовал Laravel Mix в качестве процесса сборки.

Все мои шаблоны vue находятся в отдельных файловых компонентах, и все работает абсолютно нормально... Пока я не удалю «unsafe-eval» из CSP в своем манифесте аддона. 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(), который, как я полагаю, вызывает проблему.

Я пропустил что-то простое здесь?


vuejs2 laravel-mix
person Joe    schedule 06.11.2017    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Мне не хватало чего-то простого.

По сути, мне нужно было настроить webpack для использования сборки vue во время выполнения следующим образом:

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

Затем создайте экземпляр vue, используя корневой компонент, а не элемент html:

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

Я получил ответ здесь: https://github.com/JeffreyWay/laravel-mix/issues/1052

person Joe    schedule 06.11.2017
comment
По умолчанию webpack выбирает только файл времени выполнения. Во-вторых, проблема с eval возникает даже после определения псевдонима для среды выполнения, потому что сам веб-пакет использует метод eval в блоке try catch. Для этого также есть открытая проблема в веб-пакете github.com/webpack/webpack/issues/5627< /а> - person Akansh; 09.02.2018