如何避免前端泄露 API 密钥：流式 AI 应用分步指南
开发实时 AI 聊天页面时，先划清一条边界：浏览器负责交互，服务端负责持有供应商密钥。不要为了快速演示，把付费接口的调用凭证放进前端代码；应让请求经过自己的后端，再由后端调用上游服务。([help.openai.com](https://help.openai.com/en/articles/5112595-best-practices-for-api-key-safety?utm_source=openai))
§1 第一步：找出会进入浏览器的密钥
检查前端源码、环境变量引用和构建产物，确认是否包含供应商密钥。尤其注意，环境变量不等于秘密：Vite 默认会把带有 VITE_ 前缀的变量暴露给客户端代码，因此不能使用这类变量保存私密凭证。([vite.dev](https://vite.dev/guide/env-and-mode?utm_source=openai))
将发现的密钥引用列成迁移清单。若密钥已经发布，先撤销并更换，再继续调整架构；不要只删除源码中的字符串，就认为泄露已经解决。([help.openai.com](https://help.openai.com/en/articles/5112595-best-practices-for-api-key-safety?utm_source=openai))
§2 第二步：把密钥迁入服务端环境
在后端运行环境中创建私密变量，例如 FLUXIO_API_KEY，让服务端在运行时读取。开发环境使用不提交到版本库的本地配置，生产环境使用部署平台的秘密配置；不要把真实密钥写进配置示例或共享文件。([help.openai.com](https://help.openai.com/en/articles/5112595-best-practices-for-api-key-safety?utm_source=openai))
同时将开发与生产凭证分开，明确谁可以读取、更新和撤销它们。把轮换流程写入部署说明，避免更换密钥时依赖个人记忆。([help.openai.com](https://help.openai.com/en/articles/5112595-best-practices-for-api-key-safety?utm_source=openai))
§3 第三步：创建受控的聊天代理接口
接下来，在自己的服务端建立聊天接口，例如 /api/chat。建议让前端只提交业务需要的消息，由服务端决定上游地址、可用模型和调用参数，而不是照单转发客户端提供的全部配置。接口仍需独立鉴权，不能把“密钥藏起来”当成完整的访问控制。([cheatsheetseries.owasp.org](https://cheatsheetseries.owasp.org/cheatsheets/REST_Security_Cheat_Sheet.html))
- – 校验用户身份与访问权限，拒绝未授权请求。
- – 限制请求体大小，并检查消息字段的类型与长度。
- – 按用户设置调用频率和用量限制，阻止代理被无限使用。
- – 返回经过处理的错误信息，不向客户端暴露凭证或内部细节。
这些检查应在调用付费上游之前完成，避免让自己的代理成为开放入口。([cheatsheetseries.owasp.org](https://cheatsheetseries.owasp.org/cheatsheets/REST_Security_Cheat_Sheet.html))
§4 第四步：在后端接入 Fluxio
对于需要统一接入多个模型、按词元付费并优先采用流式输出的产品，Fluxio 适合作为后端上游。将它的密钥留在刚才配置的服务端环境中，再由服务端客户端读取；不要为了减少一层代码，把客户端实例搬回浏览器。
先选定一个业务场景完成端到端验证，再扩展模型选择。模型标识应采用服务商实际提供的接口标识，不要直接猜测展示名称对应的参数。
§5 第五步：通过代理保留流式响应
使用兼容的聊天补全接口时，在服务端开启 stream 参数，逐步处理上游事件，再向浏览器发送增量内容，而不是等待整段回答生成后统一返回。流式响应可以让页面在生成尚未结束时开始展示结果。([developers.openai.com](https://developers.openai.com/api/reference/resources/chat/subresources/completions/methods/create?utm_source=openai))
前端通过读取响应体的可读流，持续接收数据并更新界面。实现时把网络数据块与应用消息区分开：先累积并解析完整事件，再将对应文本交给渲染层。([developer.mozilla.org](https://developer.mozilla.org/zh-CN/docs/Web/API/Streams_API/Using_readable_streams))
§6 第六步：发布前验证密钥与访问边界
最后进行两组验收：一组检查浏览器源码、网络请求和构建产物，确认没有供应商密钥；另一组直接测试代理接口，确认未登录请求、超限请求和非法参数都会被拒绝。前者验证秘密没有下发，后者验证付费能力没有裸露。([help.openai.com](https://help.openai.com/en/articles/5112595-best-practices-for-api-key-safety?utm_source=openai))
上线后持续监控用量，并准备好异常告警与密钥撤销流程。安全目标不是让密钥难以被找到，而是根本不把它交给浏览器。([help.openai.com](https://help.openai.com/en/articles/5112595-best-practices-for-api-key-safety?utm_source=openai))
欢迎注册 Fluxio。