Vue 3 CSP - EvalError：拒绝将字符串评估为 JavaScript答案

【问题标题】：Vue 3 CSP - EvalError: Refused to evaluate a string as JavaScriptVue 3 CSP - EvalError：拒绝将字符串评估为 JavaScript
【发布时间】：2022-11-23 16:09:23
【问题描述】：

我正在使用 Vue 3 和 Node/Express 开发一个网络应用程序。提供构建的前端代码时，出现以下错误：

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'".

    at new Function (<anonymous>)
    ...etc

这个问题似乎只发生在页面重新加载时——当页面首次加载时，没有错误

在网上调查这个问题时，我只能找到 Vue 文档引用 Vue 2 的 CSP 问题，而不是 Vue 3。有人知道这个问题的解决方案吗？如有必要，可以选择将“不安全评估”添加到我的 CSP 标头，但我想知道是否有更安全的选择？

从 express 服务器中删除 helmet.js 使用当然也解决了问题，但这只是因为这删除了它添加的 CSP 标头。我想尝试找到一种避免允许不安全评估的解决方案

【问题讨论】：

假设你使用的是 Vite + Express，你可以尝试这里提供的 2 个第一个链接：search.brave.com/search?spellcheck=0&q=vite+vue+js+csp
主要是，Vue2 和 Vue3 之间应该没有太大的区别，webpack/Vite 语法有细微的变化，但我认为这个想法是一样的。
似乎没有任何内容涵盖 eval() 问题。据我所知，它被 Vue 内部使用，所以“不安全评估”似乎是唯一的选择

标签： node.js vue.js express vuejs3 content-security-policy

【解决方案1】：

可以重写有问题的代码（只要您可以轻松修改该代码）。请参阅https://learn.microsoft.com/en-us/microsoft-edge/extensions-chromium/store-policies/csp 的“Eval 和相关功能被禁用”部分。

【讨论】：