為什麼不能把 API Key 貼在前端？

情境：一個慘烈的早晨

阿明是某電商平台的行銷工程師。某天早上他打開電腦，收到 AWS 的帳單通知：單日費用 $52,000 美元。

原因？他三個月前趕專案，把 AWS API Key 直接寫進前端 JavaScript，然後把程式碼推上了 GitHub。有人掃到了這組 Key，自動化腳本在一夜之間開了幾千台雲端主機。

這不是罕見的故事。每週都有人在 GitHub 上意外曝光 API Key，然後付出慘烈的代價。

---

前端程式碼是公開的

「只要沒有文件，別人就不知道」——這個想法是錯的

當你在網頁上右鍵 → 「檢視原始碼」，你可以看到整個網頁的 HTML。打開瀏覽器的開發者工具（F12），你可以看到：

• 所有 JavaScript 程式碼
• 所有 API 呼叫的網址、Header、參數
• 夾帶在程式碼裡的任何字串——包括 API Key

前端 = 瀏覽器執行的程式碼 = 任何人都可以讀。

這跟你的程式碼有沒有文件、有沒有加密完全無關。程式碼送到瀏覽器，就是公開的。

前端 vs 後端的差別

位置	誰能看到？	適合放 API Key？
前端（HTML/JS/CSS）	任何人	❌ 絕對不行
後端（伺服器程式）	只有伺服器管理員	✅ 可以，但要加密保存
環境變數（.env）	只有有伺服器存取權限的人	✅ 標準做法

---

API Key 洩漏會發生什麼事

情境一：電商平台的 SMS 簡訊 API Key 外洩

假設你的電商平台用了一個簡訊 API，每封簡訊費用 $0.05。API Key 放在前端的 JavaScript。

有人找到這個 Key，寫了一個自動化腳本：每秒發 100 封簡訊。一天 8,640,000 封。費用：$432,000。

帳單是你的。

情境二：Google Maps API Key 外洩

這是真實事件的縮影。API Key 沒設流量限制，有人用你的 Key 跑自己的 App，你付帳單。

情境三：資料庫 API Key 外洩

如果是連接資料庫的 Key，那就不只是錢的問題——所有客戶資料都曝光了。訂單記錄、個人資料、付款資訊。

---

「它可以運作」的陷阱

很多人第一次接 API 的心態：先讓它動起來，安全之後再說。

問題是「之後」永遠沒有來。一旦上線，修起來就複雜了。而且你不知道 Key 已經被抓走多久了。

安全不是功能，是基礎。 就像蓋房子，你不會說「先把牆蓋好，地基之後再補」。

---

正確做法

---

練習題

---

AI 協作：學了這個，跟 AI 怎麼配合？

了解 API Key 安全風險，讓你在請 AI 幫忙寫程式時，能清楚說出安全需求。

你的人類優勢：

• 你知道這個 Key 的業務影響（洩漏了會影響哪些客戶、什麼業務）
• 你能判斷「這段程式碼最後會跑在前端還是後端」

可以這樣跟 AI 說：

幫我把這段前端 JavaScript 改寫成安全的版本：API Key 不能出現在瀏覽器端，改用後端 Proxy 的方式。我的後端是 Node.js Express，API Key 要從環境變數讀取。