用 Chrome 瀏覽網站時,突然出現要求「尋找區域網路上的任何裝置並連線」的權限,
查了一下,原來 Chrome 在版本 142 之後,如果外部網站嘗試存取內部網路,會出現區域網路存取權限提示(LNA、Local Network Access)。
如下圖:
外部網站嘗試存取本機網址 https://localhost:56312/
雖然我確定這是官方網站,但出現以前沒出現過的訊息,還是小心為上。
先查 localhost:56312 是什麼產生的,開啟 cmd,使用 netstat 指令,找出是哪個 PID 使用 56312 這個 PORT
>netstat -nao | find ":56312"
協定 本機位址 外部位址 狀態 PID
TCP 127.0.0.1:56312 0.0.0.0:0 LISTENING 12256
TCP [::1]:56312 [::]:0 LISTENING 12256
是 PID 12256 的程序產生的,可從工作管理員或使用 tasklist 指令,查是哪個軟體。
>tasklist | find "12256"
映像名稱 PID 工作階段名稱 工作階段 # RAM使用量
========================= ======== ================ =========== ============
KGIServiSign.exe 12256 Console 1 15,388 K
原來是之前安裝過的官網憑證元件(KGIServiSign.exe),應該沒問題,可放心允許權限。
[測試觸發要求「尋找區域網路上的任何裝置並連線」權限的詢問視窗]
- 內部網路網址用的 PORT 需可連接,若 Chrome 權限已封鎖或允許,先重設權限再測試。
預計用 80 PORT 測試,查看本機是否有服務開啟 80 PORT 監聽(我有裝 Nginx):>netstat -an | find ":80" | find "LISTENING"
TCP 0.0.0.0:80 0.0.0.0:0 LISTENING
確定 Chrome 對瀏覽網站的「區域網路存取權」是「詢問(預設)」
- 測試外部網站 iframe 載入內部網路網頁
程式碼:<form id="xyzframe-form">
<label>iframe URL:</label>
<input id="xyzframe-input-box" name="xyzframe-url" type="url" value="http://localhost/1.html" />
<button>測試</button>
</form>
<div id="xyzframe-results">
<iframe id="xyzframe-frame" src=""> </iframe>
</div>
<script>
const xyzframeForm = document.getElementById("xyzframe-form");
const xyzframeInputBox = document.getElementById("xyzframe-input-box");
const xyzframeIFrame = document.getElementById("xyzframe-frame");
xyzframeForm.addEventListener("submit", (e) => {
e.preventDefault();
if (!xyzframeInputBox.validity.valid) {
return;
}
xyzframeIFrame.src = xyzframeInputBox.value;
});
</script>
- 測試外部網站 JS fetch 內部網路網頁
程式碼:<form id="xyzfetch-form"><label>fetch URL<label>:</label>
<input id="xyzfetch-input-box" name="xyzfetch-url" type="url" value="http://localhost" />
<button>測試</button></label></form>
<script>
const xyzfetchInputBox = document.getElementById("xyzfetch-input-box");
const xyzfetchForm = document.getElementById("xyzfetch-form");
xyzfetchForm.addEventListener("submit", (e) => {
e.preventDefault();
if (!xyzfetchInputBox.validity.valid) {
return;
}
fetch(xyzfetchInputBox.value)
.then((response) => {
})
.catch((error) => {
});
});
</script>
- 測試結果
參考: