TIL：在 Javascript 中封鎖選項卡並取得 IP

歡迎來到我的「今天我學到了」系列的第一部分！透過這些帖子，我將分享我在作為演算法工程師的工作中獲得的實際見解，深入研究我為解決現實世界挑戰而實施的技術。我希望這些課程也能為您的專案帶來價值。

重點

• 控制多個標籤實例：防止使用者開啟相同 Web 應用程式的多個實例，這可能會耗盡資源並可能導致伺服器崩潰。
• 使用 JavaScript 取得使用者 IP 位址：了解為什麼由於安全限制和探索解決方法，在 JavaScript 中取得使用者的 IP 位址是一個挑戰。

為了說明這一點，我將介紹我所從事的一個涉及人臉辨識技術的項目，特別是簡化處理和維護跨使用者效能所需的步驟。

專案概述：建立人臉辨識 Web 應用程式

在此範例中，任務是建立一個可透過網頁瀏覽器存取的人臉辨識應用程式（簽入簽出系統）。該應用程式需要：

1. 頁面載入時自動啟動。
2. 捕捉使用者的臉部，檢查「活躍度」（確認其是真人），然後將影像傳輸到伺服器進行識別。
3. 在瀏覽器上顯示辨識結果。

該應用程式設計有兩個主要組件：

• 客戶端處理：包括人臉偵測和活體偵測，在瀏覽器中處理。
• 伺服器端處理：負責人臉識別，利用伺服器資源進行身分匹配。

為了簡單起見，假設客戶端在將其發送到伺服器之前檢測並驗證臉部，伺服器傳回結果，瀏覽器顯示它們。

問題：防止多個選項卡

想像一下典型的使用者 Alex，他最近開始使用新的臉部辨識網路應用程式來上班和下班。一天早上，亞歷克斯決定在幾個瀏覽器選項卡中打開該應用程序，認為他可以通過同時在多個選項卡中測試它來加快簽入速度。

幾乎立刻，事情就開始走下坡。載入每個選項卡時，它會獨立初始化應用程式的臉部偵測和驗證過程。亞歷克斯注意到他的計算機速度急劇下降，最終，瀏覽器開始落後。在幕後，這些多個選項卡均使用資源來處理 Alex 的臉部，這對他的設備性能造成了巨大損失。

但問題並沒有就此結束。由於每個選項卡向伺服器發送單獨的識別請求，應用程式的伺服器負載激增，導致其他使用者同時登入延遲。伺服器因重複請求而不堪重負，幾乎無法跟上，導致延遲和錯過簽到。

為了讓事情變得更加混亂，每個選項卡都顯示不同的、不一致的登入狀態。 Alex 很快就意識到，在多個分頁中開啟應用程式給他帶來了不必要的麻煩，並給整個公司帶來了潛在的問題。

為了確保無縫功能並避免對客戶端和伺服器資源造成不必要的壓力，我們需要防止使用者使用應用程式開啟多個標籤

目標是限制使用者在瀏覽器中一次開啟多個應用程式實例，主要是透過偵測相同應用程式的其他標籤何時已開啟。解決方法如下：

if (localStorage.getItem('isAppRunning') === 'true') {
    alert("The application is already open in another tab. Please close this tab.");
} else {
    // Set a flag in localStorage to indicate the app is running
    localStorage.setItem('isAppRunning', 'true');

    // Add an event listener to clear the flag when the tab is closed
    window.addEventListener('beforeunload', () => {
        localStorage.removeItem('isAppRunning');
    });

    // Main function to load models and start video if the app is not running in another tab
    (async function main() {
        try {
            const config = await loadConfig(); // Load models concurrently

            const [tinyFaceDetector, fasnet, phoneDetect] = await Promise.all([
                loadTinyFaceDetector(),
                loadFasnet(config),
                loadPhoneDetect(config),
            ]);
            Object.assign(window, { fasnet, phoneDetect, config });

            startVideo();
        } catch (err) {
            console.error('Initialization failed:', err);
        }
    })();
}

問題：取得用戶IP

在我們的人臉辨識系統中，要求已發展為僅允許授權的部門特定存取。例如，如果人員 A 屬於部門 A，則他們應該只能在部門 A 網路中的設備上簽入或簽出，而不能在部門 B 或任何其他部門的設備上簽入或簽出。由於這些電腦是透過區域網路 (LAN) 連接的，因此我們需要一種方法來根據裝置的 IP 位址來識別和限制存取

當我在網路上搜尋時，我得到了一些有關獲取IP位址的資訊。但他們有一些問題

function user_location() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      console.log( this.responseText);
    }
  };
  xhttp.open("GET", "//api.ipify.org?format=json", true);
  xhttp.send();
}

此函數成功取得使用者的公用IP位址；但是，它不提供部門特定存取控制所需的內部 LAN IP 位址。此外，它還容易受到 VPN 或防火牆的屏蔽。

或許是這個

Firefox 和 Chrome 已經實現了 WebRTC，允許向 STUN 伺服器發出請求，該伺服器將傳回使用者的本機和公用 IP 位址

但我不想在我的應用程式中添加更多套件。這種複雜性，再加上潛在的跨瀏覽器不一致，使其不太理想。

然後我發現了這篇文章

使用瀏覽器中執行的 JavaScript 直接檢索客戶端 IP 位址並不簡單。這是因為 JavaScript 無法存取暴露 IP 位址的網路層。此外，出於安全原因，瀏覽器會對 JavaScript 環境進行沙箱處理，阻止其存取某些系統級訊息，包括客戶端的 IP 位址。

事實證明，僅使用 JavaScript 檢索 IP 位址是不可行的。不過，有一個簡單的解決方案：在伺服器上建立 API 端點來取得使用者的 IP 位址。

if (localStorage.getItem('isAppRunning') === 'true') {
    alert("The application is already open in another tab. Please close this tab.");
} else {
    // Set a flag in localStorage to indicate the app is running
    localStorage.setItem('isAppRunning', 'true');

    // Add an event listener to clear the flag when the tab is closed
    window.addEventListener('beforeunload', () => {
        localStorage.removeItem('isAppRunning');
    });

    // Main function to load models and start video if the app is not running in another tab
    (async function main() {
        try {
            const config = await loadConfig(); // Load models concurrently

            const [tinyFaceDetector, fasnet, phoneDetect] = await Promise.all([
                loadTinyFaceDetector(),
                loadFasnet(config),
                loadPhoneDetect(config),
            ]);
            Object.assign(window, { fasnet, phoneDetect, config });

            startVideo();
        } catch (err) {
            console.error('Initialization failed:', err);
        }
    })();
}

• 當客戶端發出請求時，Flask 會自動使用各種標頭和連線詳細資料填入請求物件。

• 首先，程式碼使用 client_ip = request.headers.get('X-Forwarded-For') 檢查 X-Forwarded-For 標頭。

• 用途：此標頭通常由代理或負載平衡器設置，以保留原始客戶端 IP 位址。如果請求透過代理程式或負載平衡器傳遞，則用戶端的實際 IP 位址應出現在此標頭中。

• 如果找到 X-Forwarded-For 標頭，client_ip 將會設定為其值。

• 如果 X-Forwarded-For 標頭遺失（例如，如果客戶端在沒有代理程式的情況下直接連接），則程式碼使用 request.remote_addr 直接從客戶端取得 IP 位址。

概括

在這篇文章中，我分享了我在開發基於網路的人臉辨識應用程式時應對現實世界挑戰的經驗。以下是我們解決的兩個關鍵問題：

• 防止多個選項卡實例：為了阻止用戶在多個瀏覽器選項卡中打開應用程序，我們使用 localStorage 來追蹤應用程式是否已開啟。這可以防止冗餘的人臉偵測過程對客戶端和伺服器資源造成壓力。

• 擷取使用者 IP 位址：由於安全限制，JavaScript 無法直接存取裝置的 LAN IP，因此我們在伺服器上設定 API 端點以從請求標頭中取得 IP。這種方法確保僅對授權設備進行部門特定的存取控制。

以上是TIL：在 Javascript 中封鎖選項卡並取得 IP的詳細內容。更多資訊請關注PHP中文網其他相關文章！