提醒 VSCode Live Server 使用風險 - 當心專案內容裸奔

2023-06-06 11:00 PM

VSCode Live Server 是超棒的靜態網頁開發輔助套件，能即時檢視 HTML、CSS、JavaScript 修改結果，方便度破錶。

但應該有不少跟我一樣，以為 Live Server 只能由 127.0.0.1 本機存取(例如)，而設定檔有個 useLocalIp，設為 true 時瀏覽器會改用主機實體網卡 IP 連上 Live Server，方便用手機或遠端電腦測試。

Live Server 設定有兩個選項，一個是 Use Local IP as host，勾選後 Live Server 改用網卡的對外 IP，好處是可以便用手機或平板從 LAN 連上開發主機用行動裝置操作測試；另一個 Host 選項則可以設定 localhost、127.0.0.1 或任何 IP：

平時 Live Server 檢視會連上 http://127.0.0.1:5500，勾選 Use Local IP as host 則會改成 http://主機網卡IP:5500：

依據這個行為，我們通常會理解成「VSCode Live Server 基於安全預設只開放 127.0.0.1 存取，設定 useLocalIp = true 則可開放遠端瀏覽」，但事實不然。

預設模式連的雖然是 http://127.0.0.1:5500，但其繫結的 IP 為 0.0.0.0 (Any IP)，接聽對象包含本機所有 IP 的 5500 Port，包含實體網卡 IP。

若不信，可在預設 http://127.0.0.1:5500 啟用時試連實體 IP 的 5500 Port，驚不驚喜，意不意外？

這樣會造成風險嗎？視情況而定。如果你的電腦是 Windows 有啟動內建防火牆，則預設外部連 5500 Port 應是被封鎖的，就算聽了實體 IP 5500 Port 其他人也無法連上 Live Server 網站；就算沒啟用防火牆，一般電腦不會直接曝露在 Internet 上，故能摸到你網站的都是區域網路內的裝置，應不致有機器人 24 小時掃瞄等著找洞偷資料(除非你正在參加駭客年會)。不過若不幸真的被有心人發現，資料洩漏範圍可能比你想得大些。

若資料夾沒有 index.html 等預設文件，Live Server 會顯示資料夾清單：

另外，客戶端也可能存取到 .git 目錄的 Git 版控資料，有機會帶走整包程式碼(包含修改歷程)：

研究了一下，我認為這算是 Live Server 的設計缺陷，原始程式寫死永遠繫結 0.0.0.0：

return {
    port: port,
    host: '0.0.0.0',
    root: rootPath,
    file: file,
    open: false,
    https: https,
    ignore: ignoreFiles,
    disableGlobbing: true,
    proxy: proxy,
    cors: true,
    wait: Config.getWait || 100,
    fullReload: Config.getfullReload,
    useBrowserExtension: Config.getUseWebExt,
    onTagMissedCallback: onTagMissedCallback,
    mount: mount
};

依我的想法，繫結 IP 應改成依 useLocalIp 選項決定，未啟用時只聽 host 所指 IP (預設為 127.0.0.1)，要開放外部存取時再聽 0.0.0.0，如此可兼顧安全與彈性：

return {
    port: port,
    host: Config.getLocalIp ? '0.0.0.0' : Config.getHost,
    root: rootPath,
    file: file,
    open: false,
    https: https,
    ignore: ignoreFiles,
    disableGlobbing: true,
    proxy: proxy,
    cors: true,
    wait: Config.getWait || 100,
    fullReload: Config.getfullReload,
    useBrowserExtension: Config.getUseWebExt,
    onTagMissedCallback: onTagMissedCallback,
    mount: mount
};

如此，只要沒勾選 useLocalIp 時，Live Server 就只限 127.0.0.1 存取，應可大幅降低資訊外洩風險。我發了 PR，但觀察 Live Server 專案沈寂已久，有 48 個 PR 待合併、近 2000 則 Issue 未結案，我想短期內作者接受修改更新版本的機率不高。大家如想自己動手修補，方法如下：

找到 %userprofile%\.vscode\extensions\ritwickdey.liveserver-5.7.9\out\src\Helper.js
使用 Notepad 等文字編譯器開啟檔案找第 111 行：
將 host: '0.0.0.0', 修改為 host: Config_1.Config.getLocalIp ? '0.0.0.0' : Config_1.Config.getHost,
重啟 VSCode，檢查是否 Live Server 只聽 127.0.0.1 5500 且無法從實體網卡 IP 存取，即代表修改成功：