【Vibe Coding】如何保護你的 Vibe App?開發者最常犯的 5 大錯誤一次搞懂!

用 AI 工具做出漂亮的 Vibe App 很簡單,但你知道資安設定沒做好,可能讓任何人刪掉別人的帳號嗎?這篇一次帶你看懂最常見的五大錯誤,並教你如何正確防範。

Share
【Vibe Coding】如何保護你的 Vibe App?開發者最常犯的 5 大錯誤一次搞懂!

在過去幾週,我和大家分享了許多好玩的 vibe coding 工具:

Qwen3Canva AILovableJulesWindsurfGemini 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 權限設定

簡單來說: 別讓你的資料庫變成「誰都能進來的後門」。

怎麼做:

  1. 進入 Supabase 專案後台
  2. 點選 Table Editor → 選一個資料表(例如 users)
  3. 啟用 RLS(Row-Level Security)
  4. 寫下這樣的 policy:
policy "使用者只能看到自己的資料" on users  
  for select  
  using (auth.uid() = id);

為什麼:
你的前端再安全,資料庫沒鎖起來,就像店門口擺了個保全、但倉庫後門開著。

步驟二:寫入資料請透過 Serverless Function 處理

簡單來說: 不要讓前端直接改資料庫,請多一道「後台邏輯」檢查身份。

怎麼做:

  1. Supabase Edge Function 或 Vercel API Routes 包一層驗證邏輯
  2. 前端只傳送資料給 Function,由 Function 負責執行寫入
  3. 在 Function 裡檢查:使用者登入了嗎?有權限嗎?

為什麼:
Lovable 或 Bolt 這類工具常常讓所有邏輯都跑在前端,導致使用者只要改一點瀏覽器內容,就能升級帳號、刪掉別人資料

project > Edge Functions > Deploy a new function > Via Editor

步驟三:設定 JWT 登入憑證的有效期限

簡單來說: 不要讓登入狀態「永久有效」。

怎麼做:

  1. 在登入流程中,設定 JWT 的過期時間(如 1 小時)
  2. 建立自動登出邏輯,過期後重新導向登入頁
  3. 搭配 refresh token 或 session cookie 使用

為什麼:
如果有人偷到你的 token,而它永遠有效,他就永遠可以冒用你的身份。

project > Settings > JWT Keys > Access token expiry time

步驟四:密碼重設功能要加上「驗證+頻率限制」

簡單來說: 不要讓「忘記密碼」變成駭客的入侵工具。

怎麼做:

  1. 在「Authentication」Attack Protection 加入 CAPTCHA
  2. 限制每個 IP 每小時只能請求一次 (Rate Limits)
  3. 顯示訊息:「若非你本人操作請忽略此信」

為什麼:
攻擊者可以濫用這個功能炸你的信箱,甚至假冒信件內容做社交工程攻擊。

CAPTCHA
Rate Limits

步驟五:絕對不要把 API Key 寫在前端

簡單來說: anon key ≠ 無害。

怎麼做:

  1. 把 key 存在 .env,不公開到瀏覽器中
  2. 若必須前端使用,只給最小權限(read-only)
  3. 建立 proxy server 處理敏感請求,例如儲值、扣款、刪除帳號

為什麼:
曾有平台被使用者「改瀏覽器變 premium 用戶」,結果燒爆 OpenAI 額度,損失上百美金。

proxy server

💡加分 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」。

延伸參考資源

Read more

pen.dev 官方發表視覺:專為構建大膽軟體而生的 Agentic Canvas

前 Adobe 總監打造!全新 pen.dev 震撼登場:網頁一鍵逆向成畫布、AI 雙向生成前端代碼全攻略

前 Adobe XD / Flash 核心主管 Tom Krcha 創立、a16z speedrun 押注的全新 pen.dev 震撼登場!主打「絕不從零開始」,支援任何網站與 localhost 一鍵逆向為可編輯向量圖層;首創 Code on Canvas 在畫布跑 JS 動態生成 UI 控制項;具備 Component Slots、Vibe Shaders 與 MCP 深度串聯 Claude Code / Cursor。本文深度全解析。

Neuralink VOICE 臨床試驗參與者 Terry 透過大腦意念發聲對話

大腦意念直接發聲!Neuralink「VOICE」試驗重磅突破:ALS 漸凍症患者 Terry「用意念對妻子說我愛你」,Grok 語音克隆復原原聲、事實查核與馬斯克十年技術內幕深度解析

失語漸凍症患者只要「想著」說話,就能用自己過去的聲音開口!Neuralink 正式公布 VOICE 言語重建臨床試驗重大進展,受試者 Terry 透過 N1 腦部植入物將大腦訊號即時解碼為語音,動情對妻子說出「我愛你」。本文深度解析兩階段神經訓練機制、xAI Grok 語音克隆黑科技、社群媒體誤傳「第三位植入者」的事實查核(Community Notes 澄清),以及總裁 DJ Seo 親揭馬斯克十年每週親抓核心架構的幕後內幕。