最近有團隊成員在進行外部對接調試時，反應使用 ngrok 進行內網穿透時，遇到了連線被阻擋的問題。這其實不是 ngrok 的服務異常，而是 Vite 在升級到新版本後，為了防禦 DNS Rebinding（DNS 再綁定攻擊） 所加強的安全檢查機制。
🛠️ 解決方案
如果你的 ngrok 網址顯示攔截，請直接檢查你的 vite.config.ts。你必須顯式地將 ngrok 提供的 domain 加入「允許名單」中：
TypeScript
// vite.config.ts
export default defineConfig({
server: {
allowedHosts: [
'a134-211-72-118-118.ngrok-free.app' // 替換為你當前的 ngrok 網址
]
}
})
為什麼我們要關注這個設定？
從公司治理與資安維護的角度來看，這項調整背後有兩個關鍵思考：
-
防止 Host Header 攻擊：Vite 預設不再信任隨機的 Host 請求。這能有效避免惡意網站利用瀏覽器漏洞，在使用者不知情的狀況下，與本地開發環境通訊並竊取原始碼或環境變數。
-
開發環境的最小權限原則：雖然 ngrok 方便，但隨意開放外部存取內網環境是有風險的。透過
allowedHosts的明確宣告，我們能確保開發者清楚知道哪些外部網域正在與本地服務互動。
📢技術小提醒
在測試結束後，記得將該設定移除或將其移至 .env 進行管理，切勿將特定 ngrok 網址永久硬編碼在 code 中並推上主分支，保持乾淨且安全的 Repo 是每一位資深工程師的素養。
祝大家今天開發順利，Bug 自由！
#Vite #ngrok #FrontendDevelopment #資安意識 #DNSRebinding #軟體研發管理 #WebSecurity #TypeScript
