在 Vibe Coding 時，如何避免 AI API Key 在前端網頁洩漏？

如何避免 Vibe Coding 時 AI API Key 在前端網頁洩漏

Vibe Coding 時，最重要的一件事就是保護你的 AI API Key，避免因為洩漏而產生不必要的費用。AI API Key 就像你的信用卡號碼，擁有它的人可以使用你的帳號來運行 AI 服務，所有費用都會算在你頭上。

保護 AI API Key 的方法

1. 不要將 API Key 寫在前端：在 Vibe Coding 時，務必提醒 AI 不要將 API Key 洩漏在前端網頁中。前端網頁的程式碼容易被其他人瀏覽，因此將 API Key 放在前端是非常危險的。開發完成後，部署前也要檢查是否有洩漏 API Key。

2. 不要隨意輸入 AI API Key：對於社群上流傳的 AI 工具，如果要求你輸入自己的 API Key 才能使用，請務必三思。就像你不會隨便將信用卡號碼填寫在不知名的網站上一樣，你無法確定開發者是否會收集你的 API Key。

3. 設定用量上限和消費提醒：在 AI 平台的後台設定用量上限或消費提醒。即使 API Key 不小心洩漏，也能夠及時止血。

   • OpenAI API Key：前往 OpenAI Billing 關閉 API 自動加值功能，並在 Limits 設定用量上限。
   • Gemini API Key：前往 Google Cloud Billing 查看用量，並找到預算和快訊 (Budgets & alerts) 設定預算和用量提醒門檻。

工程師建議

• 將程式碼交給另一個 AI，請它幫你檢查是否有外洩 API Key。
• 如果有，再請 AI 幫你修改成安全做法。

掌握這些守則，就能在享受 Vibe Coding 的樂趣時，也能確保你的 AI API Key 不會外洩，避免不必要的損失。