快速摘要
串接 OpenAI、Anthropic 或 Google 的 AI API 時，最常見的安全問題是 API Key 寫死在前端程式碼裡。這篇教你正確的 API Key 管理、速率限制、錯誤處理和成本控管。
API 串接的基本架構
串接 AI API 的基本架構應該是：
使用者 → 你的前端 → 你的後端（API proxy）→ AI API注意：使用者永遠不應該直接呼叫 AI API。中間一定要有你自己的後端作為 proxy。原因有三：
- 保護 API Key：Key 只存在後端，前端看不到
- 控制用量：你可以在後端加上速率限制和成本上限
- 輸入過濾：你可以在後端檢查使用者輸入，防止 Prompt Injection
API Key 安全管理
API Key 的管理是最重要的安全環節。以下是正確做法：
不要做的事
- 不要把 API Key 寫死在程式碼裡
- 不要把 .env 檔案 commit 到 Git
- 不要在前端 JavaScript 中使用 API Key
- 不要用同一個 Key 做開發和生產
- 不要把 Key 貼在 Slack、Email 或任何通訊軟體
正確做法
- 使用環境變數：把 Key 放在 .env 檔案或環境變數中
- 加入 .gitignore：確保 .env 不會被 commit
- 分離環境：開發用一個 Key，生產用另一個 Key
- 定期輪換：每 90 天更換一次 API Key
- 最小權限：如果平台支援，只給 Key 需要的最小權限
真實案例：2024 年有多起因為 API Key 被推上 GitHub 公開 repo 而產生鉅額帳單的事件。有人在幾小時內被盜刷了超過 $10,000 的 API 費用。
速率限制與成本控管
沒有速率限制的 AI API 應用就像沒有煞車的車——遲早出事。
實作速率限制
| 層級 | 建議限制 | 目的 |
|---|---|---|
| 每個使用者 | 10-30 次/分鐘 | 防止單一使用者濫用 |
| 全域 | 100-500 次/分鐘 | 保護你的帳單 |
| 每日上限 | 依預算設定 | 防止意外爆量 |
成本監控
- 在 OpenAI 和 Anthropic 的 dashboard 設定 budget alert
- 記錄每次 API 呼叫的 token 使用量
- 設定每月硬上限，超過就暫停服務
- 監控異常使用模式（例如深夜突然大量呼叫）
輸入驗證與 Prompt Injection 防護
使用者的輸入在送到 AI API 之前，必須經過驗證和清理：
- 長度限制：限制輸入的最大字數（例如 2000 字）
- 格式驗證：如果預期是特定格式，先驗證
- 內容過濾：檢查是否包含已知的 Prompt Injection 模式
- System Prompt 隔離：用 API 的 system message 參數，不要把 system prompt 和使用者輸入混在一起
Prompt Injection 風險：如果你的應用會把 AI 的回應直接顯示在網頁上，務必對輸出做 HTML escape，防止 XSS 攻擊。AI 可能被引導生成包含
<script> 標籤的回應。錯誤處理
AI API 可能因為各種原因失敗，你的應用必須優雅地處理這些情況：
| 錯誤碼 | 原因 | 處理方式 |
|---|---|---|
| 401 | API Key 無效 | 檢查 Key 設定，不要向使用者暴露錯誤細節 |
| 429 | 超過速率限制 | 實作 exponential backoff 重試 |
| 500 | API 服務異常 | 顯示友善錯誤訊息，記錄 log |
| timeout | 回應超時 | 設定合理的 timeout（30-60 秒） |
三大平台 API 比較
| 特性 | OpenAI | Anthropic | Google (Gemini) |
|---|---|---|---|
| 最新模型 | GPT-4o | Claude Opus/Sonnet | Gemini 2.0 |
| 串流支援 | 是 | 是 | 是 |
| Tool Use | Function Calling | Tool Use | Function Calling |
| 資料訓練 | 可選退出 | 預設不使用 | 可選退出 |
| 計費單位 | Token | Token | Token |
| 免費額度 | 有限 | 有限 | 較多 |
| SDK 語言 | Python, Node.js, 更多 | Python, TypeScript | Python, Node.js, 更多 |
最佳實踐清單
- API Key 絕對不進前端程式碼
- 所有 API 呼叫都透過你的後端 proxy
- 實作速率限制和成本上限
- 驗證和清理所有使用者輸入
- 對 AI 輸出做 HTML escape 後再顯示
- 使用 streaming 改善使用者體驗
- 記錄所有 API 呼叫的 log（但不要記錄敏感內容）
- 設定監控和告警
- 定期輪換 API Key
- 測試錯誤處理路徑
常見問題
API Key 可以放在前端嗎？
絕對不行。API Key 放在前端 JavaScript 中，任何人打開開發者工具就能看到。必須透過後端 proxy 呼叫 API。
串接 AI API 一個月大概花多少錢？
依用量而定。個人專案約 $5-20/月，中小企業應用 $50-500/月。設定好 budget alert 和 rate limiting 可以有效控制成本。
OpenAI 和 Anthropic 的 API 哪個比較好？
各有優勢。OpenAI 生態系最大、文件最完整；Anthropic 的 Claude 在長文和程式碼方面表現更好，且有更嚴格的安全設計。建議兩個都試。
API 回應太慢怎麼辦？
使用 streaming（串流）模式可以讓使用者更早看到回應。另外也可以用快取機制避免重複呼叫相同的 prompt。