TIL: Tabs blockieren und IP in Javascript abrufen

Willkommen zum ersten Teil meiner „Today I Learned“-Reihe! In diesen Beiträgen teile ich praktische Erkenntnisse, die ich während meiner Arbeit als Algorithmus-Ingenieur gewonnen habe, und vertiefe mich in die Techniken, die ich implementiert habe, um reale Herausforderungen zu bewältigen. Ich hoffe, dass diese Lektionen auch für Ihre Projekte von Nutzen sind.

Wichtige Erkenntnisse

• Kontrolle mehrerer Tab-Instanzen: Verhindert, dass Benutzer mehrere Instanzen derselben Webanwendung öffnen, was Ressourcen belasten und möglicherweise Server zum Absturz bringen kann.
• Erhalten der IP-Adresse eines Benutzers mit JavaScript: Verstehen, warum das Erhalten der IP-Adresse eines Benutzers in JavaScript aufgrund von Sicherheitsbeschränkungen und der Suche nach Problemumgehungen eine Herausforderung darstellt.

Zur Veranschaulichung werde ich ein Projekt durchgehen, an dem ich mit Gesichtserkennungstechnologie gearbeitet habe – insbesondere die Schritte, die erforderlich sind, um die Verarbeitung zu optimieren und die Leistung aller Benutzer aufrechtzuerhalten.

Projektübersicht: Erstellen einer Webanwendung zur Gesichtserkennung

In diesem Beispiel bestand die Aufgabe darin, eine Gesichtserkennungsanwendung (Check-in-Check-out-System) zu erstellen, auf die über einen Webbrowser zugegriffen werden kann. Die Anwendung musste:

1. Automatisch starten, wenn die Seite geladen wird.
2. Erfassen Sie das Gesicht des Benutzers, überprüfen Sie es auf „Lebendigkeit“ (um zu bestätigen, dass es sich um eine echte Person handelt) und übertragen Sie das Bild dann zur Erkennung an einen Server.
3. Zeigen Sie das Erkennungsergebnis im Browser an.

Die Anwendung besteht aus zwei Hauptkomponenten:

• Clientseitige Verarbeitung: Beinhaltet Gesichtserkennung und Liveness-Erkennung, verarbeitet im Browser.
• Serverseitige Verarbeitung: Verantwortlich für die Gesichtserkennung, Nutzung von Serverressourcen für den Identitätsabgleich.

Stellen Sie sich der Einfachheit halber vor, dass der Client ein Gesicht erkennt und verifiziert, bevor er es an den Server sendet, wo der Server Ergebnisse zurückgibt und der Browser sie anzeigt.

Das Problem: Mehrere Tabs verhindern

Stellen Sie sich einen typischen Benutzer vor, Alex, der vor kurzem damit begonnen hat, eine neue Web-App mit Gesichtserkennung zum Ein- und Ausstempeln zu verwenden. Eines Morgens beschloss Alex, die App in einigen Browser-Tabs zu öffnen, weil er dachte, er könne das Einchecken beschleunigen, indem er sie in mehreren Tabs gleichzeitig teste.

Fast sofort ging es bergab. Beim Laden jeder Registerkarte wurden die Gesichtserkennungs- und Verifizierungsprozesse der App unabhängig initialisiert. Alex bemerkte, dass sein Computer drastisch langsamer wurde und der Browser schließlich langsamer wurde. Hinter den Kulissen verbrauchten diese verschiedenen Tabs jeweils Ressourcen, um Alex‘ Gesicht zu verarbeiten, was die Leistung seines Geräts stark beeinträchtigte.

Aber damit war das Problem noch nicht erledigt. Da jeder Tab separate Erkennungsanfragen an den Server sendete, stieg die Serverlast der App an, was zu Verzögerungen bei der gleichzeitigen Anmeldung anderer Benutzer führte. Der mit doppelten Anfragen überlastete Server konnte kaum mithalten, was zu Verzögerungen und verpassten Check-ins führte.

Um die Sache noch verwirrender zu machen, wurde auf jeder Registerkarte ein anderer, inkonsistenter Anmeldestatus angezeigt. Alex wurde schnell klar, dass das Öffnen der App in mehreren Tabs ihm unnötige Kopfschmerzen und potenzielle Probleme für das gesamte Unternehmen bereitet hatte.

Um eine reibungslose Funktionalität zu gewährleisten und eine unnötige Belastung der Client- und Serverressourcen zu vermeiden, mussten wir verhindern, dass Benutzer mehrere Registerkarten mit der Anwendung öffnen

Das Ziel bestand darin, Benutzer daran zu hindern, mehr als eine Instanz der App gleichzeitig in ihrem Browser zu öffnen, indem vor allem erkannt wurde, wann andere Tabs mit derselben App bereits geöffnet sind. So gehen Sie vor:

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);
        }
    })();
}

Das Problem: Benutzer-IP abrufen

In unserem Gesichtserkennungssystem hat sich die Anforderung entwickelt, nur autorisierten abteilungsspezifischen Zugriff zu ermöglichen. Wenn Person A beispielsweise zu Abteilung A gehört, sollte sie sich nur auf Geräten im Netzwerk von Abteilung A ein- oder auschecken können, nicht jedoch in Abteilung B oder einer anderen Abteilung. Da diese Computer über ein lokales Netzwerk (LAN) verbunden sind, benötigen wir eine Möglichkeit, den Zugriff anhand der IP-Adresse des Geräts zu identifizieren und einzuschränken

Als ich online gesucht habe, habe ich einige Informationen zum Abrufen der IP-Adresse erhalten. Aber sie haben ein paar Probleme

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();
}

Diese Funktion ruft erfolgreich die öffentliche IP-Adresse des Benutzers ab; Es stellt jedoch nicht die interne LAN-IP-Adresse bereit, die für die abteilungsspezifische Zugriffskontrolle erforderlich ist. Darüber hinaus ist es anfällig für die Maskierung durch VPNs oder Firewalls.

oder vielleicht dieses

Firefox und Chrome haben WebRTC implementiert, das es ermöglicht, Anfragen an STUN-Server zu stellen, die die lokalen und öffentlichen IP-Adressen für den Benutzer zurückgeben

Aber ich möchte meiner App keine weiteren Pakete hinzufügen. Diese Komplexität, kombiniert mit möglichen Inkonsistenzen zwischen verschiedenen Browsern, macht es weniger wünschenswert.

Dann habe ich diesen Beitrag gefunden

Das direkte Abrufen einer Client-IP-Adresse mit im Browser ausgeführtem JavaScript ist nicht einfach. Dies liegt daran, dass JavaScript keinen Zugriff auf die Netzwerkschicht hat, auf der IP-Adressen offengelegt werden. Darüber hinaus blockieren Browser aus Sicherheitsgründen die JavaScript-Umgebung und verhindern so den Zugriff auf bestimmte Informationen auf Systemebene, einschließlich der IP-Adresse des Clients.

Es stellt sich heraus, dass das Abrufen der IP-Adresse allein mit JavaScript nicht möglich ist. Es gibt jedoch eine einfache Lösung: Erstellen eines API-Endpunkts auf dem Server, um die IP-Adresse des Benutzers zu erhalten.

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);
        }
    })();
}

• Wenn ein Client eine Anfrage stellt, füllt Flask das Anfrageobjekt automatisch mit verschiedenen Headern und Verbindungsdetails.

• Zuerst überprüft der Code den X-Forwarded-For-Header mit client_ip = request.headers.get('X-Forwarded-For').

• Zweck: Dieser Header wird üblicherweise von Proxys oder Load Balancern festgelegt, um die ursprüngliche Client-IP-Adresse beizubehalten. Wenn die Anfrage über einen Proxy oder Load Balancer geleitet wurde, sollte die tatsächliche IP-Adresse des Clients in diesem Header erscheinen.

• Wenn der X-Forwarded-For-Header gefunden wird, wird client_ip auf seinen Wert gesetzt.

• Wenn der X-Forwarded-For-Header fehlt (z. B. wenn der Client eine direkte Verbindung ohne Proxy herstellt), verwendet der Code request.remote_addr, um die IP-Adresse direkt vom Client abzurufen.

Zusammenfassung

In diesem Beitrag teile ich meine Erfahrungen bei der Bewältigung realer Herausforderungen bei der Entwicklung einer webbasierten Gesichtserkennungs-App. Hier sind zwei Hauptprobleme, die wir gelöst haben:

• Verhindern mehrerer Tab-Instanzen: Um zu verhindern, dass Benutzer die App in mehreren Browser-Tabs öffnen, verwenden wir localStorage, um zu verfolgen, ob die App bereits geöffnet ist. Dies verhindert redundante Gesichtserkennungsprozesse, die sowohl Client- als auch Serverressourcen belasten.

• Benutzer-IP-Adresse abrufen: Da JavaScript aus Sicherheitsgründen nicht direkt auf die LAN-IP eines Geräts zugreifen kann, richten wir einen API-Endpunkt auf dem Server ein, um die IP aus Anforderungsheadern abzurufen. Dieser Ansatz gewährleistet eine abteilungsspezifische Zugriffskontrolle nur für autorisierte Geräte.

Das obige ist der detaillierte Inhalt vonTIL: Tabs blockieren und IP in Javascript abrufen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!