Angular - Invalid Host Header 安全性處理

煩死人的詭異錯誤。

 

 

前言

近期調整 Angular 專案,

將原本 build 成靜態網頁的方式,

改由直接透過 ng serve 去 handler,

結果出一些奇怪問題。

 

 

 

馬的發顆

當執行完部屬後:

ng serve

 

從外網看畫面出現了類似如下圖(圖為網路來源)

  • Invalid Host Header

「Invalid Host Header」的圖片搜尋結果

 

但明明在本機 local 看很正常啊啊啊!!!

爬了文之後...

 

主要是因為 Angular CLI 依賴的 webpack-devserver 做了更新。

「webpack-dev-server」的圖片搜尋結果

 

在版本 1.16.4 和 2.4.3 中提到了disableHostCheck 這個功能:

  • The response will contain a note when using an incorrect Host header.
  • For usage behind a Proxy or similar setups we also added a disableHostCheck option to disable this check.

 

這個版本在安全性上,將會對 Host Header 做檢查,

避免用戶端透過一些惡意 Proxy 等方式,訪問到 webpack 主機。

 

由於 AngularCLI 在版本 1.0.1 之後受到這類問題影響,

已經於 1.0.0-beta.1 以及之後提供了解決方案:

ng serve --disable-host-check

 

摁..看了一下自己的版本:

ng -v

嘿嘿~ 終於處理好這個問題。

 

 

 

參考資料

這次主要解救來源是找到這篇:

而在 AngularCLI 的討論區可以找到:

 

 

有勘誤之處,不吝指教。ob'_'ov