如何修复“不安全评估"客户端版本的 Vue3 错误?

问题描述

我的应用使用 Express、cors 和头盔.Vue3 仅用于客户端，库文件自托管在公共文件夹中.我只是做

I'm using Express, cors, and helmet for my app. Vue3 is used on the client-side only and the library file is self-hosted in the public folder. I simply do

<script type="module" src="/public/lib/vue.esm-browser.js"></script>

将模块添加到客户端.问题是，当我使用它时，它不断给我一个 Uncaught EvalError: Refused to evaluate a string as JavaScript 因为在以下内容安全策略指令中，'unsafe-eval' 不是允许的脚本源:"script-src 'self''.昨天突然出现这个问题，当我开始使用头盔和cors模块时，即使我注释掉这些模块，它仍然显示错误.我应该修复什么?

to add the module to the client-side. The problem is that when I use it, it keeps giving me an Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self'". This problem started yesterday suddenly, when I started using the helmet and cors modules, and even if I comment out these modules, it still shows the error. What should I fix?

推荐答案

是的，vue.js 使用了这样一段代码:

Yes, vue.js uses a piece of code like that:

  // detect possible CSP restriction
  try {
    new Function('return 1');
  } catch (e) {
    if (e.toString().match(/unsafe-eval|CSP/)) {
      warn$$1(
        'It seems you are using the standalone build of Vue.js in an ' +
        'environment with Content Security Policy that prohibits unsafe-eval. ' +
        'The template compiler cannot work in this environment. Consider ' +
        'relaxing the policy to allow unsafe-eval or pre-compiling your ' +
        'templates into render functions.'
      );
    }
  }

这里有两个选项:

1. 预编译模板的使用，请参阅 github 上的讨论.

使用 vue.runtime.js 运行时版本而不是 vue.js 完整版本.

using a vue.runtime.js runtime version instead of vue.js full version.

VueJS 有 2 个不同的版本:完整版和运行时版.'unsafe-eval' 只需要完整版的 VueJS；运行时版本不需要它.在此处查看详情.

VueJS has 2 different versions: the full version and the runtime version. 'unsafe-eval' is only needed for the full version of VueJS; the runtime version doesn't need it. See details here.

仅运行时构建完全符合 CSP.当使用 Webpack + vue-loader 或 Browserify + vueify 的仅运行时构建时，您的模板将被预编译为在 CSP 环境中完美运行的渲染函数.在 Vue CSP 环境中查看详细信息.

The runtime-only build is fully CSP-compliant. When using the runtime-only build with Webpack + vue-loader or Browserify + vueify, your templates will be precompiled into render functions which work perfectly in CSP environments. See details in Vue CSP environments.

这篇关于如何修复“不安全评估"客户端版本的 Vue3 错误?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！