在前端隐藏 API 密钥 — 无需后端

Source: Dev.to

如果你曾经构建过一个调用第三方 API 的前端，你一定遇到过这样的问题：API 需要密钥，但把密钥写在 JavaScript 中意味着任何人都可以看到它。

常见的解决办法是构建一个 后端代理——一个持有密钥并代表你转发请求的小型服务器。它能工作，但这意味着你需要编写、部署和维护一台服务器。对于许多项目——尤其是原型、业余项目和 JAMstack 站点来说，这相当于为一个本应简单的 API 调用增加了大量开销。

Mongrel.io 让你完全省去后端。它充当服务器端代理，在请求时注入你的凭证，从而确保 API 密钥永远不会出现在前端代码中。

详细问题

下面展示了不安全的模式。你想调用天气 API，于是写了类似下面的代码：

const response = await fetch(
  "https://api.weather.example/forecast?city=Sydney",
  {
    headers: {
      "X-API-Key": "sk_live_abc123def456",
    },
  }
);
const data = await response.json();

该 API 密钥现在对打开浏览器网络面板的任何人都可见。即使你把它移到环境变量（如 VITE_API_KEY 或 NEXT_PUBLIC_API_KEY），构建工具也会把这些值内联到你的 JavaScript 包中。密钥仍然会被发送到浏览器。

风险是真实存在的

• 密钥被盗 – 任何人都可以提取该密钥并在自己的代码中使用
• 计费滥用 – 被盗的密钥可能会在你的账户上产生费用
• 速率限制耗尽 – 自动化滥用可能会耗尽你的配额，导致合法用户的体验受损

Mongrel.io 如何解决此问题

1. 您的前端调用 Mongrel.io 端点——请求中不包含 API 密钥。
2. Mongrel.io 接收请求并解密您存储的凭证。
3. Mongrel.io 在服务器端注入您的凭证后调用真实的 API。
4. 响应返回给您的前端。

您的 API 密钥在静止时使用 AWS KMS 加密，仅在请求时于 Lambda 函数内部解密。您从未编写或部署任何后端代码。

步骤‑逐步演练

1. 创建 API

在 Mongrel.io 仪表板中，首先创建一个 API。这是路由的容器——可以把它当作一个项目。为它命名并可选填写描述。

2. 创建路由

在你的 API 内部，创建一个新路由。为它指定请求路径——这将成为前端调用的 URL。
例如，如果你把路径设为 /weather/forecast，你的端点将可通过以下地址访问：

https://your-subdomain.mongrel.io/weather/forecast

3. 添加 HTTP 源

为你的路由添加一个源，并选择 HTTP 作为类型。输入你想调用的外部 API 的 URL，例如：

https://api.weather.example/forecast

4. 配置身份验证

这一步就是关键所在。在你的 HTTP 源上，打开 Authentication（身份验证）部分，选择与外部 API 要求相匹配的类型。

选择合适的类型并填写凭证。若使用作为请求头的 API Key，只需输入头部名称和密钥值。

Mongrel.io 会立即对这些值进行加密。它们以加密形式存储，仅在请求时于 Lambda 函数内部解密。

5. 发布路由

路由配置完成后，点击 Publish（发布）。Mongrel.io 会验证你的配置并使端点上线。

6. 在前端调用它

现在，你的前端可以直接调用 Mongrel.io 端点，无需任何凭证：

const response = await fetch(
  "https://your-subdomain.mongrel.io/weather/forecast?city=Sydney"
);
const data = await response.json();

API Key 永远不会出现在你的代码、Git 仓库或浏览器的网络面板中。

支持的认证类型

Mongrel.io 支持五种认证方式，覆盖了第三方 API 最常见的使用模式：

---

**将密钥追加到 URL 查询字符串** (e.g. `?api_key=your-key`)

**Bearer Token**  
在 `Authorization: Bearer` 头中发送令牌。

**OAuth/OIDC**  
执行完整的客户端凭证流程——使用客户端 ID 和密钥交换获取访问令牌，然后将其注入为 Bearer 令牌。

对于 OAuth/OIDC，**Mongrel.io** 负责整个令牌生命周期：交换凭证、缓存令牌以及在令牌过期时刷新。您只需提供令牌 URL、客户端 ID、客户端密钥和作用域。

前后对比

以下是并排比较。

之前 — API 密钥在前端暴露

// Your API key is visible in the browser
const response = await fetch("https://api.weather.example/forecast", {
  headers: {
    "X-API-Key": "sk_live_abc123def456"
  }
});

之后 — 通过 Mongrel.io 调用

// No API key anywhere in your frontend code
const response = await fetch(
  "https://your-subdomain.mongrel.io/weather/forecast"
);

您的 API 密钥永不出现在前端代码、Git 仓库或浏览器网络标签中。

开始使用

Mongrel.io 免费入门。创建账户，设置你的第一个路由，停止在前端代码中泄露 API 密钥。

• 在 app.mongrel.io 注册
• 阅读文档
• 了解更多关于身份验证的信息