Vite + Vue 3构建项目因Function构造触发CSP 'script-src "self"'错误

大部分情况下是可以消除的，核心思路是先定位Function构造函数的来源，再针对性处理：

1. 先定位来源 #

• 利用浏览器DevTools的错误栈追踪：控制台的错误信息会显示调用Function的代码位置，哪怕是压缩后的构建文件，也能通过source map还原到源码层面。
• 排查第三方依赖：不少旧版的UI组件、模板引擎或状态管理库，会用Function构造函数做动态代码生成（比如动态编译模板、创建动态函数），这是常见的来源。

2. 针对性消除方案 #

情况一：自研代码中使用了Function #

直接替换为常规函数写法即可。比如：
原来的代码：

const calcFunc = new Function('x', 'y', 'return x * y');

改成：

const calcFunc = (x, y) => x * y;

情况二：第三方依赖中使用了Function #

• 优先升级依赖：很多库的新版本已经移除了对eval/Function的依赖，改用更安全的静态实现（比如模板预编译）。
• 替换依赖：如果升级后仍无法解决，找功能类似且不依赖eval/Function的替代库。
• 配置构建工具调整：Webpack、Vite等工具的部分插件可以转换这类代码。比如Webpack的terser-webpack-plugin可配置禁用eval，Babel的相关插件能处理部分动态代码生成逻辑。

3. 特殊情况的折中处理 #

如果核心依赖必须用Function构造函数且无法替换/升级，可在CSP中针对性放宽限制，但尽量避免直接加'unsafe-eval'：

• 使用哈希值：生成Function对应代码的哈希，加到script-src中，比如script-src 'self' 'sha256-xxxxxx'。
• 使用随机nonce：每次请求生成唯一的nonce值，同时在CSP头和对应的脚本标签中同步，比如script-src 'self' 'nonce-随机字符串'。

内容的提问来源于stack exchange，提问作者Bekzod