CSP에서 'unsafe-eval'을 사용하지 않는 Vuejs 브라우저 확장

CSP에서 'unsafe-eval'을 사용하지 않는 Vuejs 브라우저 확장

Vuejs를 사용하여 브라우저 애드온을 구축하고 Laravel Mix를 빌드 프로세스로 사용했습니다.

모든 vue 템플릿은 단일 파일 컴포넌트에 포함되어 있으며 모든 것이 완벽하게 작동합니다.내 애드온 매니페스트에서 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는 Web 팩과 vue-loader를 사용하고 있으며, 이로 인해 생성되는 번들은 CSP에 준거하고 있다고 생각했습니다.

빌드된 JS를 확인했는데 콜이 없는 것 같습니다.eval()단, 이 있다new Function()문제의 원인이라고 생각되는 전화입니다.

제가 뭔가 간단한 걸 놓쳤나요?

간단한 걸 놓치고 있었어요

기본적으로 다음과 같이 vue의 런타임 빌드를 사용하도록 웹 팩을 구성해야 했습니다.

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

그런 다음 html 요소가 아닌 루트 구성 요소를 사용하여 vue를 인스턴스화합니다.

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

언급URL : https://stackoverflow.com/questions/47139132/vuejs-browser-extension-without-using-unsafe-eval-in-csp