面试题：AI 前端中的模型 API Key 安全

题目

某开发者在 Vue 项目中这样调用大模型：

const response = await fetch('https://api.example-ai.com/v1/chat', {
  method: 'POST',
  headers: {
    Authorization: `Bearer ${import.meta.env.VITE_AI_API_KEY}`,
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    messages,
  }),
});

请回答：

1. 这段代码有什么安全问题？
2. 为什么把 Key 放入 .env 并加入 .gitignore 仍然不安全？
3. 请简述一个更合理的调用链路。
4. 除了隐藏 Key，服务端至少还应该做哪两项安全措施？

我的回答

1. API key直接暴露在网站中，易被他人获取；
2. 在代码远程托管中仍有可能被他人获取，不管是私人还是公开的
3. API key应该交由后端保存至库中维护管理
4. 校验用户身份和权限、处理超时/重试和限流

题解

整体方向正确，评分：7/10。

正确点

• 能识别 API Key 暴露问题。
• 知道模型调用应经过后端。
• 提到了身份校验、权限控制和限流，这是防止接口被滥用的关键措施。
• 超时和重试也是必要的稳定性措施。

需要修正

第 2 点的核心原因不是“代码托管可能泄露”。

.gitignore 只能阻止 .env 被提交，但 VITE_ 开头的变量会在构建时被替换进前端 JavaScript：

import.meta.env.VITE_AI_API_KEY
// 构建后可能变成：
'真实的 API Key'

用户下载前端产物后，可以通过 DevTools、源码或网络请求获得它。因此：

浏览器是用户可控环境，不能保存任何服务端密钥。

第 3 点中，Key 不一定要存在数据库。更常见的做法是保存在：

• 服务端环境变量
• Secret Manager
• 部署平台的加密密钥配置

合理链路是：

浏览器 → 携带用户凭证请求 BFF → BFF 校验身份和权限
→ BFF 从服务端读取 API Key → 调用模型 → 返回结果

第 4 点需要区分：

• 安全措施：身份认证、权限控制、限流、请求参数校验、内容审核和审计日志。
• 稳定性措施：超时、重试、熔断和降级。

更好的面试表达

.gitignore 只能避免密钥进入 Git，无法避免构建工具将 VITE_ 环境变量写入前端产物。浏览器属于用户可控环境，因此模型 API Key 必须保存在 BFF 的服务端环境变量或 Secret Manager 中。前端先调用 BFF，由 BFF 完成用户认证、权限校验、限流和参数校验，再携带 Key 调用模型。此外还要处理超时、重试、内容安全和调用审计。