Vibe Coding 實戰必看!10 個會讓你專案翻車的技術陷阱

看起來能動的系統,才是最危險的!

本文目錄
  1. 1. 把敏感數據寫在前端
  2. 2. 將暫存資料當永久資料
  3. 3. 頁面沒有做權限控管
  4. 4. API 沒有權限設計
  5. 5. 沒有設計審計日誌
  6. 6. 沒有限制 API 呼叫次數
  7. 7. 使用者密碼用明文儲存
  8. 8. 選錯資料庫
  9. 9. 把機密檔案上傳到 GitHub
  10. 10. 沒有設計 .gitignore

Vibe Coding 實戰必看!10 個會讓你專案翻車的技術陷阱(圖 1)

如果你正在 Vibe Coding,那這篇文章一定要看完!

它可以幫你有系統地建立安全意識。

我會從「前端、後端、資料庫、版本控制」四個面向,讓你了解風險與問題出在哪。

完整的 Demo,可以觀看 YT 喔 👉

對 AI 應用感興趣的朋友,歡迎按下訂閱按鈕,未來我計畫分享一系列 AI 工具的應用教學。

1. 把敏感數據寫在前端

有時我們請 AI 設計一個登入頁面,結果他把帳號密碼的驗證邏輯寫在前端。

這樣只要按下 F12,搜尋「password」這類關鍵字,就可能找到登入的帳號密碼。

1. 把敏感數據寫在前端(圖 2)

除了帳號密碼外,有些人會分享一些 AI 生成圖片、影片的服務,但這些服務通常要 API Key 才能使用。

1. 把敏感數據寫在前端(圖 3)

而 API Key 往往要綁定信用卡,這代表洩漏 API Key,你的信用卡可能會被刷爆。


2. 將暫存資料當永久資料

有時 AI 做好的網站看起來有儲存功能。

但他未必是存到資料庫,有可能只是暫存到網頁的變數,或是存到瀏覽器的 localStorage 中。

2. 將暫存資料當永久資料(圖 4)

這樣當你刷新頁面,或換一個瀏覽器時,就會發現資料不見了。


3. 頁面沒有做權限控管

這樣只要使用者知道網頁路徑,就能跳轉到管理者介面。

3. 頁面沒有做權限控管(圖 5)

而這個問題可能會導致客戶個資外洩、產品訂單被篡改,除了經濟損失外,還會連帶影響品牌信譽。


4. API 沒有權限設計

接下來聊聊後端的部分。

有些人設計了登入機制,但卻沒有設計角色權限,這會導致非常嚴重的問題。

你可以想想看,如果一般消費者登入 PChome、Momo 這類購物平台後

可以自由修改商品價格,那會造成多嚴重的後果


5. 沒有設計審計日誌

不管前期規劃多完善,系統上線後一定會出問題!

假使沒有設計審計日誌,你連錯誤在哪裡、什麼時候發生、使用者做了什麼操作都一無所知。

無法重現問題,怎麼可能解決問題?


6. 沒有限制 API 呼叫次數

這邊以使用者登入來舉例,假使系統登入的 API 沒有次數限制。

那不就代表使用者可以嘗試不同密碼組合去暴力破解?


7. 使用者密碼用明文儲存

如果資料庫裡使用者的密碼,沒有經過雜湊處理,那一旦資料庫外洩,所有使用者密碼會直接暴露。

7. 使用者密碼用明文儲存(圖 6)

我知道很多人是一個密碼打天下,這代表其他帳號可能會被駭客盜用。


8. 選錯資料庫

有時 AI 會選擇 Redis 來當系統資料庫,但只要伺服器重啟,災難直接降臨。

因為 Redis 是記憶體資料庫,重啟後緩存的資料就不見了,即使有持久化設計,也不建議當主資料庫。


9. 把機密檔案上傳到 GitHub

現在很多人用 GitHub 來做專案的版本控制。

但如果不小心將存放隱私資料的 .env 環境檔上傳,然後你的 Repository 還是公開的。

那系統的後台,可能就變成所有人可以隨意進出的遊樂場。


10. 沒有設計 .gitignore

這會導致你把 node_modules、dist、log 這類體積大、數量多的檔案加入版本控制。

不僅會讓 repository 上傳下載時間變長,還會讓版本控制混亂,難以追蹤真正變更。


好的,以上就是今天跟大家分享 Vibe Coding 的十大陷阱。

這篇文章涵蓋的資訊量比較大,如果有聽不懂的地方也別擔心。

我會在後續的文章中,透過實際案例跟大家分享這些問題如何解決。

如果這篇文章對你有幫助,可以順手按個讚,把文章分享給正在 Vibe Coding 的朋友們。

林鼎淵著作《工程師下班有約:企業內訓講師帶你認清職涯真相!》
https://www.tenlong.com.tw/products/9786264142083
Talk

留言討論

留言載入中…