TIL: Javascript에서 탭 차단 및 IP 가져오기

"오늘 나는 배웠다" 시리즈의 첫 번째 시리즈에 오신 것을 환영합니다! 이 게시물을 통해 저는 알고리즘 엔지니어로 일하면서 얻은 실용적인 통찰력을 공유하고 실제 문제를 해결하기 위해 구현한 기술을 탐구하겠습니다. 이 강의가 귀하의 프로젝트에도 가치가 있기를 바랍니다.

주요 시사점

• 여러 탭 인스턴스 제어: 사용자가 동일한 웹 애플리케이션의 여러 인스턴스를 열지 못하도록 방지합니다. 이로 인해 리소스가 소모되고 잠재적으로 서버가 충돌할 수 있습니다.
• 자바스크립트로 사용자 IP 주소 얻기: 보안 제약과 해결 방법 탐색으로 인해 자바스크립트로 사용자 IP 주소를 얻는 것이 어려운 이유를 이해합니다.

설명하기 위해 제가 작업한 얼굴 인식 기술 프로젝트, 특히 처리를 간소화하고 사용자 전반에 걸쳐 성능을 유지하는 데 필요한 단계를 살펴보겠습니다.

프로젝트 개요: 얼굴 인식 웹 애플리케이션 구축

이 예의 작업은 웹 브라우저를 통해 액세스할 수 있는 얼굴 인식 애플리케이션(체크인 체크아웃 시스템)을 만드는 것이었습니다. 애플리케이션에 필요한 사항은 다음과 같습니다.

1. 페이지가 로드되면 자동으로 시작됩니다.
2. 사용자의 얼굴을 캡처하고 '생생함'을 확인한 후(실제 인물인지 확인) 인식을 위해 이미지를 서버로 전송합니다.
3. 인식 결과를 브라우저에 표시합니다.

애플리케이션은 두 가지 주요 구성 요소로 설계되었습니다.

• 클라이언트측 처리: 얼굴 감지 및 생체 감지가 포함되며 브라우저에서 처리됩니다.
• 서버측 처리: 얼굴 인식을 담당하며 신원 확인을 위해 서버 리소스를 활용합니다.

간단하게 클라이언트가 서버에 얼굴을 보내기 전에 얼굴을 감지하고 확인하면 서버가 결과를 반환하고 브라우저가 이를 표시한다고 가정해 보세요.

문제: 다중 탭 방지

최근 새로운 얼굴 인식 웹 앱을 사용하여 출근 및 퇴근을 시작한 일반 사용자 Alex를 상상해 보세요. 어느 날 아침, Alex는 한 번에 여러 탭에서 테스트하면 체크인 속도를 높일 수 있을 것이라고 생각하여 몇 개의 브라우저 탭에서 앱을 열기로 결정했습니다.

거의 즉시 상황이 악화되었습니다. 각 탭이 로드될 때마다 앱의 얼굴 감지 및 확인 프로세스가 독립적으로 초기화되었습니다. Alex는 컴퓨터 속도가 급격하게 느려지는 것을 발견했고 결국 브라우저가 지연되기 시작했습니다. 뒤에서는 이러한 여러 탭이 각각 리소스를 사용하여 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은 사용자의 로컬 및 공용 IP 주소를 반환하는 STUN 서버 요청을 허용하는 WebRTC를 구현했습니다.

하지만 내 앱에 더 많은 패키지를 추가하고 싶지 않습니다. 잠재적인 브라우저 간 불일치와 결합된 이러한 복잡성으로 인해 바람직하지 않습니다.

그러다가 이 글을 발견했습니다

브라우저에서 실행되는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!