<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:media="http://search.yahoo.com/mrss/">
  <channel>
    <title>Web Development｜林鼎淵 Dean Lin</title>
    <link>https://deanlin.net/tags/web-development/</link>
    <image><url>https://deanlin.net/images/author_hu_aa256fc934e9a932.jpg</url><title>Web Development｜林鼎淵 Dean Lin</title><link>https://deanlin.net/tags/web-development/</link><width>144</width><height>144</height></image>
    <description>林鼎淵（Dean Lin）的部落格：生成式 AI 企業內訓講師、外商資安公司軟體專家、7 本書作者。400 多篇文章用白話分享生成式 AI 實戰、Claude Code 與 Vibe Coding 教學、團隊合作與職場成長。</description>
    <generator>Hugo</generator>
    <language>zh-tw</language>
    <copyright>© 2020–2026 林鼎淵 Dean Lin</copyright>
    <lastBuildDate>Sun, 30 Nov 2025 20:22:15 +0800</lastBuildDate>
    <atom:link href="https://deanlin.net/tags/web-development/index.xml" rel="self" type="application/rss+xml" />
    <item>
      <title>Vibe Coding 實戰必看！10 個會讓你專案翻車的技術陷阱</title>
      <link>https://deanlin.net/blog/202511/vibe-coding-pitfalls/</link>
      <pubDate>Sun, 30 Nov 2025 20:22:15 +0800</pubDate>
      <guid>https://deanlin.net/blog/202511/vibe-coding-pitfalls/</guid>
      <dc:creator>林鼎淵</dc:creator>
      <category>AI 實戰</category>
      <description>看起來能動的系統，才是最危險的！</description>
      <media:content url="https://deanlin.net/blog/202511/vibe-coding-pitfalls/images/vibe-coding-pitfalls-og_hu_71063aae375f9f3f.jpg" medium="image" type="image/jpeg" width="1200" height="675" />
      <content:encoded><![CDATA[<p><img src="https://deanlin.net/blog/202511/vibe-coding-pitfalls/images/vibe-coding-pitfalls-01.webp" width="1400" height="788" alt="Vibe Coding 實戰必看！10 個會讓你專案翻車的技術陷阱（圖 1）" fetchpriority="high" decoding="async"></p>
<p>如果你正在 Vibe Coding，那這篇文章一定要看完！</p>
<p>它可以幫你有系統地建立安全意識。</p>
<p>我會從「前端、後端、資料庫、版本控制」四個面向，讓你了解風險與問題出在哪。</p>
<blockquote>
<p>完整的 Demo，可以觀看 YT 喔 👉</p>
<p>對 AI 應用感興趣的朋友，歡迎按下訂閱按鈕，未來我計畫分享一系列 AI 工具的應用教學。</p>
</blockquote>
<div class="yt" data-yt="sLGT6fA9kIA" data-title="【AI 陷阱 EP2】Vibe Coding 實戰必看！10 個會讓你專案翻車的技術陷阱">
  <a class="yt-link" href="https://www.youtube.com/watch?v=sLGT6fA9kIA" target="_blank" rel="noopener" aria-label="播放影片：【AI 陷阱 EP2】Vibe Coding 實戰必看！10 個會讓你專案翻車的技術陷阱">
    <img src="https://i.ytimg.com/vi/sLGT6fA9kIA/hqdefault.jpg" alt="" width="480" height="360" loading="lazy" decoding="async">
    <span class="yt-play" aria-hidden="true"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false"><path d="M8 5.2v13.6L19 12z"/></svg></span>
    <span class="yt-title">【AI 陷阱 EP2】Vibe Coding 實戰必看！10 個會讓你專案翻車的技術陷阱</span>
  </a>
</div>

<h2 class="h-nomark" id="-1-把敏感數據寫在前端">1. 把敏感數據寫在前端<a class="h-anchor" href="#-1-%e6%8a%8a%e6%95%8f%e6%84%9f%e6%95%b8%e6%93%9a%e5%af%ab%e5%9c%a8%e5%89%8d%e7%ab%af" aria-label="這個段落的連結"></a></h2>
<p>有時我們請 AI 設計一個登入頁面，結果他把帳號密碼的驗證邏輯寫在前端。</p>
<p>這樣只要按下 F12，搜尋「password」這類關鍵字，就可能找到登入的帳號密碼。</p>
<p><img src="https://deanlin.net/blog/202511/vibe-coding-pitfalls/images/vibe-coding-pitfalls-02.webp" width="1328" height="607" alt="1. 把敏感數據寫在前端（圖 2）" loading="lazy" decoding="async"></p>
<p>除了帳號密碼外，有些人會分享一些 AI 生成圖片、影片的服務，但這些服務通常要 API Key 才能使用。</p>
<p><img src="https://deanlin.net/blog/202511/vibe-coding-pitfalls/images/vibe-coding-pitfalls-03.webp" width="1295" height="593" alt="1. 把敏感數據寫在前端（圖 3）" loading="lazy" decoding="async"></p>
<p>而 API Key 往往要綁定信用卡，這代表洩漏 API Key，你的信用卡可能會被刷爆。</p>
<hr>
<h2 class="h-nomark" id="-2-將暫存資料當永久資料">2. 將暫存資料當永久資料<a class="h-anchor" href="#-2-%e5%b0%87%e6%9a%ab%e5%ad%98%e8%b3%87%e6%96%99%e7%95%b6%e6%b0%b8%e4%b9%85%e8%b3%87%e6%96%99" aria-label="這個段落的連結"></a></h2>
<p>有時 AI 做好的網站看起來有儲存功能。</p>
<p>但他未必是存到資料庫，有可能只是暫存到網頁的變數，或是存到瀏覽器的 localStorage 中。</p>
<p><img src="https://deanlin.net/blog/202511/vibe-coding-pitfalls/images/vibe-coding-pitfalls-04.webp" width="1292" height="584" alt="2. 將暫存資料當永久資料（圖 4）" loading="lazy" decoding="async"></p>
<p>這樣當你刷新頁面，或換一個瀏覽器時，就會發現資料不見了。</p>
<hr>
<h2 class="h-nomark" id="-3-頁面沒有做權限控管">3. 頁面沒有做權限控管<a class="h-anchor" href="#-3-%e9%a0%81%e9%9d%a2%e6%b2%92%e6%9c%89%e5%81%9a%e6%ac%8a%e9%99%90%e6%8e%a7%e7%ae%a1" aria-label="這個段落的連結"></a></h2>
<p>這樣只要使用者知道網頁路徑，就能跳轉到管理者介面。</p>
<p><img src="https://deanlin.net/blog/202511/vibe-coding-pitfalls/images/vibe-coding-pitfalls-05.webp" width="1234" height="593" alt="3. 頁面沒有做權限控管（圖 5）" loading="lazy" decoding="async"></p>
<p>而這個問題可能會導致客戶個資外洩、產品訂單被篡改，除了經濟損失外，還會連帶影響品牌信譽。</p>
<hr>
<h2 class="h-nomark" id="-4-api-沒有權限設計">4. API 沒有權限設計<a class="h-anchor" href="#-4-api-%e6%b2%92%e6%9c%89%e6%ac%8a%e9%99%90%e8%a8%ad%e8%a8%88" aria-label="這個段落的連結"></a></h2>
<p>接下來聊聊後端的部分。</p>
<p>有些人設計了登入機制，但卻沒有設計角色權限，這會導致非常嚴重的問題。</p>
<p>你可以想想看，如果一般消費者登入 PChome、Momo 這類購物平台後</p>
<p>可以自由修改商品價格，那會造成多嚴重的後果</p>
<hr>
<h2 class="h-nomark" id="-5-沒有設計審計日誌">5. 沒有設計審計日誌<a class="h-anchor" href="#-5-%e6%b2%92%e6%9c%89%e8%a8%ad%e8%a8%88%e5%af%a9%e8%a8%88%e6%97%a5%e8%aa%8c" aria-label="這個段落的連結"></a></h2>
<p>不管前期規劃多完善，系統上線後一定會出問題！</p>
<p>假使沒有設計審計日誌，你連錯誤在哪裡、什麼時候發生、使用者做了什麼操作都一無所知。</p>
<p>無法重現問題，怎麼可能解決問題？</p>
<hr>
<h2 class="h-nomark" id="-6-沒有限制-api-呼叫次數">6. 沒有限制 API 呼叫次數<a class="h-anchor" href="#-6-%e6%b2%92%e6%9c%89%e9%99%90%e5%88%b6-api-%e5%91%bc%e5%8f%ab%e6%ac%a1%e6%95%b8" aria-label="這個段落的連結"></a></h2>
<p>這邊以使用者登入來舉例，假使系統登入的 API 沒有次數限制。</p>
<p>那不就代表使用者可以嘗試不同密碼組合去暴力破解？</p>
<hr>
<h2 class="h-nomark" id="-7-使用者密碼用明文儲存">7. 使用者密碼用明文儲存<a class="h-anchor" href="#-7-%e4%bd%bf%e7%94%a8%e8%80%85%e5%af%86%e7%a2%bc%e7%94%a8%e6%98%8e%e6%96%87%e5%84%b2%e5%ad%98" aria-label="這個段落的連結"></a></h2>
<p>如果資料庫裡使用者的密碼，沒有經過雜湊處理，那一旦資料庫外洩，所有使用者密碼會直接暴露。</p>
<p><img src="https://deanlin.net/blog/202511/vibe-coding-pitfalls/images/vibe-coding-pitfalls-06.webp" width="984" height="222" alt="7. 使用者密碼用明文儲存（圖 6）" loading="lazy" decoding="async"></p>
<p>我知道很多人是一個密碼打天下，這代表其他帳號可能會被駭客盜用。</p>
<hr>
<h2 class="h-nomark" id="-8-選錯資料庫">8. 選錯資料庫<a class="h-anchor" href="#-8-%e9%81%b8%e9%8c%af%e8%b3%87%e6%96%99%e5%ba%ab" aria-label="這個段落的連結"></a></h2>
<p>有時 AI 會選擇 Redis 來當系統資料庫，但只要伺服器重啟，災難直接降臨。</p>
<p>因為 Redis 是記憶體資料庫，重啟後緩存的資料就不見了，即使有持久化設計，也不建議當主資料庫。</p>
<hr>
<h2 class="h-nomark" id="-9-把機密檔案上傳到-github">9. 把機密檔案上傳到 GitHub<a class="h-anchor" href="#-9-%e6%8a%8a%e6%a9%9f%e5%af%86%e6%aa%94%e6%a1%88%e4%b8%8a%e5%82%b3%e5%88%b0-github" aria-label="這個段落的連結"></a></h2>
<p>現在很多人用 GitHub 來做專案的版本控制。</p>
<p>但如果不小心將存放隱私資料的 .env 環境檔上傳，然後你的 Repository 還是公開的。</p>
<p>那系統的後台，可能就變成所有人可以隨意進出的遊樂場。</p>
<hr>
<h2 class="h-nomark" id="-10-沒有設計-gitignore">10. 沒有設計 .gitignore<a class="h-anchor" href="#-10-%e6%b2%92%e6%9c%89%e8%a8%ad%e8%a8%88-gitignore" aria-label="這個段落的連結"></a></h2>
<p>這會導致你把 node_modules、dist、log 這類體積大、數量多的檔案加入版本控制。</p>
<p>不僅會讓 repository 上傳下載時間變長，還會讓版本控制混亂，難以追蹤真正變更。</p>
<hr>
<p>好的，以上就是今天跟大家分享 Vibe Coding 的十大陷阱。</p>
<p>這篇文章涵蓋的資訊量比較大，如果有聽不懂的地方也別擔心。</p>
<p>我會在後續的文章中，透過實際案例跟大家分享這些問題如何解決。</p>
<p>如果這篇文章對你有幫助，可以順手按個讚，把文章分享給正在 Vibe Coding 的朋友們。</p>
<figure class="figure"><img src="https://deanlin.net/blog/202511/vibe-coding-pitfalls/images/vibe-coding-pitfalls-07.webp" width="1400" height="914" alt="林鼎淵著作《工程師下班有約：企業內訓講師帶你認清職涯真相！》" loading="lazy" decoding="async">
  <figcaption><a href="https://www.tenlong.com.tw/products/9786264142083">https://www.tenlong.com.tw/products/9786264142083</a></figcaption>
</figure>

]]></content:encoded>
    </item>
  </channel>
</rss>
