“新功能”中的 VUE3 CSP 问题

Question

我正在将 vue 3.1.5 和 vue cli 4.5.0 用于 chrome 扩展等特殊应用程序并收到以下错误

“拒绝将字符串评估为 JavaScript，因为 'unsafe-eval' 不是以下内容安全策略指令中允许的脚本来源：“script-src chrome://resources 'self'”。

在 runtime-core.esm-bundler.js 中

function compileToFunction(source, options = {}) {
...
   // compile
        const { code } = baseCompile(source, options);
        // evaluate function
        const msg = new Function(return ${code})();
...
}

有没有办法构建兼容 CSP 的 vue3 应用程序？

我已经尝试过这些选项

• config.resolve.alias.set('vue$', 'vue/dist/vue.esm.js');
• configureWebpack: { devtool: inline-source-map }
• configureWebpack: { devtool: false }

还有其他选择吗？或者我错过了什么？

问候， 帕维尔

Answer 1

是的，Vue 使用new Function 进行模板的运行时编译。
如果您不希望在 CSP 中允许 'unsafe-eval'，则必须 pre-compile tempaltes into render functions。