防止 ChatGPT API Key 在前端代码中泄露的唯一可靠方法是不将 Key 放入前端工程，而是通过后端服务器中转请求。适用场景为所有基于浏览器的 Web 应用、小程序或移动端 App，风险边界在于一旦 Key 暴露，攻击者可直接消耗配额或产生高额账单。
先说结论：前端代码运行在用户浏览器中，任何放入前端的 Key 都属于公开信息，必须通过服务端中转调用 OpenAI 接口。
- 先判断：检查当前前端代码、打包产物及版本控制系统中是否硬编码了 Key。
- 优先做：立即在 OpenAI 后台撤销已泄露的 Key，并搭建后端中转服务。
- 再验证：通过浏览器开发者工具确认网络请求不再携带 Key，且代码仓库搜索无结果。
快速处理思路
如果怀疑 Key 已泄露，第一步是在 OpenAI 平台撤销该 Key 使旧密钥失效。第二步是构建一个简单的后端接口，由后端持有 Key 并转发前端请求。第三步是修改前端代码，将直接调用改为调用自建后端接口。
为什么会这样
前端代码对所有用户可见，无法保护敏感信息。浏览器开发者工具、网络抓包工具或单纯的查看源代码功能都能轻易提取前端 JavaScript 中的字符串。OpenAI 官方文档明确指出 API Key 具有完整账户权限，泄露等同于泄露密码。
分步处理
第一步，登录 OpenAI 平台 API Keys 页面，找到疑似泄露的 Key 并点击删除或撤销。
第二步，搭建后端中转服务。以 Node.js 为例，创建一个 Express 服务，将 API Key 存放在服务端环境变量中，接收前端请求后附加 Key 转发给 OpenAI。
第三步，修改前端请求地址。将前端代码中指向 api.openai.com 的请求改为指向你自己的后端域名，移除代码中所有的 Key 字符串。
第四步，配置跨域访问。在后端服务中设置 CORS 头，允许你的前端域名访问该中转接口，避免浏览器拦截请求。
怎么验证是否生效
打开浏览器开发者工具的 Network 面板，刷新页面并触发调用，检查请求详情中是否包含 sk- 开头的字符串。在全局代码仓库中搜索 sk- 关键字，确认没有硬编码记录。观察后端日志，确认请求由后端发出且携带了正确的授权信息。
常见坑
构建工具如 Vite 或 Webpack 会将 process.env 中的变量打包进前端代码，即使写在.env 文件中也可能泄露。不要在日志中打印完整的请求头或响应体，避免 Key 被记录到日志系统。确保后端服务的访问权限受控，避免中转接口被公开滥用导致盗刷。
常见问题
前端环境变量能保护 Key 吗？
不能。前端环境变量在构建时会被替换进静态文件，用户查看打包后的 JavaScript 文件即可看到。
必须自己搭建后端吗？
是。必须有一个不公开代码的服务器来持有 Key，可以是自建服务或可信的 Serverless 函数。
Key 泄露后只改代码行吗？
不行。必须先在后台撤销旧 Key，否则攻击者仍可在使用旧 Key 期间消耗配额。
参考来源
OpenAI Help Center, Best practices for API key safety, https://help.openai.com/en/articles/5112595-best-practices-for-api-key-safety