【Vibe Coding】如何保護你的 Vibe App？開發者最常犯的 5 大錯誤一次搞懂！
用 AI 工具做出漂亮的 Vibe App 很簡單，但你知道資安設定沒做好，可能讓任何人刪掉別人的帳號嗎？這篇一次帶你看懂最常見的五大錯誤，並教你如何正確防範。
在過去幾週，我和大家分享了許多好玩的 vibe coding 工具：
從 Qwen3、Canva AI、Lovable、Jules、Windsurf、Gemini 2.5 Pro 到用 Claude Code 快速串接 Supabase，一鍵生成登入頁面、實現全端網頁，開發效率真的飛快提升。
但今天，我想暫時按下這股「快速上線」的熱潮，
提醒你一件非常重要、卻經常被忽略的事：
資安問題。
為什麼要在意資安？這些是真實發生的事
來自 Reddit 上一位資深開發者的公開信〈Open Letter to All Vibe‑Coders〉，揭露了一連串 vibe-coded app 的資安漏洞，其中不少是因為使用 Supabase 時沒設好權限，就直接上線：
| ⚠️ 案例 | 發生了什麼事？ | 會造成什麼後果？ |
|---|---|---|
| 沒設資料存取權限（RLS） | 任何訪客都能看到用戶清單、手動升級成管理員 | 用戶個資外洩、被刪帳號 |
| JWT 永不過期 | 登出後仍能用舊憑證存取資料 | 使用者安全性形同虛設 |
| 密碼重設無限制 | 攻擊者可暴力發送重設信 | 信箱炸掉、誘導釣魚連結 |
| API Key 放在前端 | anon key 被硬寫在公開 JS 裡 | 任何人都能操作資料庫 |
| 用 AI 生出後端邏輯就上線 | 沒驗證輸入、沒設防火牆 | SQL injection / DoS 攻擊風險超高 |
如何保護你的 Vibe App？從 5 步驟開始
步驟一：開啟 Supabase 的 RLS 權限設定
簡單來說： 別讓你的資料庫變成「誰都能進來的後門」。
怎麼做：
- 進入 Supabase 專案後台
- 點選
Table Editor→ 選一個資料表（例如 users） - 啟用 RLS（Row-Level Security）
- 寫下這樣的 policy：
policy "使用者只能看到自己的資料" on users
for select
using (auth.uid() = id);
為什麼：
你的前端再安全，資料庫沒鎖起來，就像店門口擺了個保全、但倉庫後門開著。
步驟二：寫入資料請透過 Serverless Function 處理
簡單來說： 不要讓前端直接改資料庫，請多一道「後台邏輯」檢查身份。
怎麼做：
- 用 Supabase Edge Function 或 Vercel API Routes 包一層驗證邏輯
- 前端只傳送資料給 Function，由 Function 負責執行寫入
- 在 Function 裡檢查：使用者登入了嗎？有權限嗎？
為什麼：
Lovable 或 Bolt 這類工具常常讓所有邏輯都跑在前端，導致使用者只要改一點瀏覽器內容，就能升級帳號、刪掉別人資料。
步驟三：設定 JWT 登入憑證的有效期限
簡單來說： 不要讓登入狀態「永久有效」。
怎麼做：
- 在登入流程中，設定 JWT 的過期時間（如 1 小時）
- 建立自動登出邏輯，過期後重新導向登入頁
- 搭配 refresh token 或 session cookie 使用
為什麼：
如果有人偷到你的 token，而它永遠有效，他就永遠可以冒用你的身份。
步驟四：密碼重設功能要加上「驗證＋頻率限制」
簡單來說： 不要讓「忘記密碼」變成駭客的入侵工具。
怎麼做：
- 在「Authentication」Attack Protection 加入 CAPTCHA
- 限制每個 IP 每小時只能請求一次 (Rate Limits)
- 顯示訊息：「若非你本人操作請忽略此信」
為什麼：
攻擊者可以濫用這個功能炸你的信箱，甚至假冒信件內容做社交工程攻擊。
步驟五：絕對不要把 API Key 寫在前端
簡單來說： anon key ≠ 無害。
怎麼做：
- 把 key 存在
.env，不公開到瀏覽器中 - 若必須前端使用，只給最小權限（read-only）
- 建立 proxy server 處理敏感請求，例如儲值、扣款、刪除帳號
為什麼：
曾有平台被使用者「改瀏覽器變 premium 用戶」，結果燒爆 OpenAI 額度，損失上百美金。
💡加分 Tips
使用 AI 幫你檢查資安
你可以對 Claude、Gemini、ChatGPT 說：
幫我審查這個 Supabase 專案的資安設定，列出常見風險與修改建議。
推薦提示（Prompt 來源 u/goodtimesKC）：
https://www.reddit.com/r/lovable/comments/1lmkfhf/comment/n083sqr/
結語：不要讓「快速」變成「魯莽」
Vibe Coding 是一種強大又自由的開發方式，但也代表你要為「自己寫的程式」負責。
不懂沒關係，但不能不查。
寫 app 可以 vibe，保護資料不能 freestyle。
再次提醒大家：
個人資料永遠不要輕易外流，
哪怕只是你測試用的那一筆。
讓我們一起做個「負責任的 Vibe-Coder」。
