201. (TWOK/LOGIC) [Web] [기능 보완] 자바스크립트 window.visualViewport 사용해 DevTools 개발자 도구 진입 페이지 이동 처리 로직

---

[로직 정리]

​

정리 로직 : Web / JavaScript

​

제 목 : [Web] [기능 보완] 자바스크립트 window.visualViewport 사용해 DevTools 개발자 도구 진입 페이지 이동 처리 로직

​

 

---

[설 명]

​

// --------------------------------------------------------------------------------------
[사전) 설정 및 정보 확인 사항]
// --------------------------------------------------------------------------------------

1. 제 목 : [Web] [기능 보완] 자바스크립트 window.visualViewport 사용해 DevTools 개발자 도구 진입 페이지 이동 처리 로직


2. 테스트 환경 : Web / JavaScript / window.visualViewport / DevTools


3. 사전) 👉 navigator.userAgent 간략 설명 :  

  >> navigator.userAgent 는 👉 브라우저와 OS 정보를 담은 문자열입니다.

  >> navigator.userAgent 는 브라우저가 서버나 JS에게 "나는 이런 환경이야" 라고 알려주는 값입니다.

  >> navigator.userAgent 호출 시 표시 되는 예시 값 

    - Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/148.0.0.0 Safari/537.36

  >> 주의점 : 

    - navigator.userAgent 는 사용자나 브라우저가 쉽게 변경 가능하며, 100% 신뢰는 불가능합니다.


4. 사전) 👉 window.visualViewport 간단 설명 : 

  >> Visual Viewport 는 사용자 눈에 실제 보이는 영역 을 감지하는 API 입니다.

  >> Visual Viewport 예시 : pinch zoom , 모바일 키보드 등장 , DevTools open , 화면 scale 변화

  >> Visual Viewport 브라우저 지원 범위 : VisualViewport API 는 현재 대부분의 최신 브라우저에서 지원됩니다

    - Chrome : 61+
    - Edge (Chromium) : 79+
    - Safari macOS : 13+
    - Safari iOS : 13+
    - Firefox : 91+
    - Opera : 48+
    - Samsung Internet : 8.2+
    - Android Chrome : 61+
    - Android WebView : 61+

// --------------------------------------------------------------------------------------






// --------------------------------------------------------------------------------------
[로직 설명]
// --------------------------------------------------------------------------------------

------------------------------------------------------
✅ 사전 정리) 로직 구현 관련 필요 내용 정리
------------------------------------------------------

1. 웹 관리자 페이지 및 대시보드에서 개발자 도구 진입 이벤트를 예방하기 위해 화면 사이즈 변경 및 모바일 , Tool 이벤트 활성 감지 시 페이지 이동 처리 구현


2. 🟦 맥북 OS 크롬 브라우저에서 개발자 모드 전환 시 화면 사이즈가 즉시 변경 표시 되지 않아 추가 로직 구현 수행


3. 🟦 현재 마우스 우클릭 이벤트 , F12 개발자 도구 진입은 막기가 되어 있는 상태

  >> 마우스 우클릭 페이지 소스 보기 막기 이벤트 정의 : 👉 'mousedown', 'mouseup', 'contextmenu'

  >> F12, Ctrl+U 키 이벤트 방지 코드 : 'keydown' : 
  
    👉 if (e.key === "F12" || e.keyCode === 123)
    👉 if (ctrl && key === "U")
    👉 if (ctrl && e.shiftKey && key === "I")
    👉 if (ctrl && e.shiftKey && key === "J")



------------------------------------------------------
✅ 로직 정리) window.onload 부분에서 운영 환경 버전 체크 후 window.visualViewport.resize 이벤트 등록 및 UserAgent 접속 타입 체크 로직
------------------------------------------------------

1. 웹 자바스크립트에서 글로벌 전역 변수로 운영 및 개발 타입 환경 지정 플래그값 선언

  >> const GLOBAL_OPERATE_FLAG = true;


2. 자바스크립트 웹 브라우저 로드 완료 window.onload = async function() { } 이벤트에서 해당 플래그값 확인 수행

  window.onload = async function() { 

    if (GLOBAL_OPERATE_FLAG == true) { // 운영 모드 인 경우

      // .... 하위 로직 계속 ....

    }

  };


3. 운영 모드 플래그인 경우 > 브라우저 window.visualViewport 지원 여부 확인 및 화면 진입 된 화면 사이즈 , userAgent 값 저장 수행

  if (window.visualViewport) {

    // -----------------------------------------------
    // ✅ window.visualViewport 화면 사이즈 및 비율 정보 확인
    // -----------------------------------------------
    const viewport = window.visualViewport;

    var visualViewport_width = viewport.width;
    const visualViewport_height = viewport.height;
    const visualViewport_top = viewport.offsetTop;
    const visualViewport_left = viewport.offsetLeft;
    const visualViewport_scale = viewport.scale;
    const visualViewport_userAgent = navigator.userAgent;

  }
  

4. 실시간 웹 브라우저 화면 변경 이벤트 감지 리스너 등록 수행 window.visualViewport.addEventListener('resize', () => { });

  >> Visual Viewport 는 사용자 눈에 실제 보이는 영역 을 감지하는 API 입니다.

  >> Visual Viewport 예시 : pinch zoom , 모바일 키보드 등장 , DevTools open , 화면 scale 변화


5. 개발자 도구 강제 진입 후 > window.visualViewport.addEventListener('resize', () => { }); 이벤트가 동작 되는 것 확인 및 변경 된 화면 사이즈, userAgent 값 체크 실시
  

6. 새롭게 확인한 값과 기존 웹브라우저 초기 진입한 화면 사이즈가 다른 경우 확인 및 UserAgent 값이 Mobile Or DevTool 인지 확인 수행

  if (visualViewport_width != viewport.width){ // 👉 화면 width 사이즈가 변경 된 경우
    if (reCallTimer !== null && reCallTimer !== undefined){
      console.error('clearTimeout(reCallTimer)');
      clearTimeout(reCallTimer);
      reCallTimer = null;
    } 

    reCallTimer = setTimeout(() => { // ✅ 맥북 크롬 브라우저에서 즉시 userAgent 값 확인 시 일반 브라우저로 표시 되므로, 1초 뒤에 userAgent 재확인 수행

      if (reCallTimer !== null && reCallTimer !== undefined){
        console.log('timer call resize');

        window.visualViewport.dispatchEvent(new Event('resize')); // ✅ viewport.resize 이벤트 강제 호출
      }                      

    }, 1000); // 1초 뒤에 실행

  }

  const resize_userAgent = navigator.userAgent;
  console.log('resize_userAgent :', resize_userAgent);  


  // ✅ 하위 로직에서 userAgent 값 비교해 개발자 모드 활성 여부 확인 수행
  const android = resize_userAgent.toLowerCase().search("android");
  const iphone = resize_userAgent.toLowerCase().search("iphone");

  if ( (android >= 0 || iphone >= 0) && (visualViewport_width != viewport.width) ) { // 모바일 타입 접속이고, 사이즈가 변경된 경우
    console.warn("Event : Mobile Or DevTool");

    visualViewport_width = viewport.width; // 👉 변경 된 값 변수에 대입
  }


7. 🟥 [IF] 화면 사이즈가 변경 되었고, 변경 된 UserAgent 값이 Mobile Or DevTool 인 경우 window.location.replace('about:blank'); 코드 사용해 히스토리에 남기지 않고 웹 페이지 교체 수행



------------------------------------------------------
✅ 맥북 크롬에서 DevTools (개발자 모드) 를 열었을 때 window.resize 이벤트가 즉시 안 들어오는 현상 정리
------------------------------------------------------

  >> DevTools 도킹(dock) 위치 변경

  >> Responsive Mode 사용

  >> macOS Retina 스케일링

  >> Chrome 성능 최적화 때문에 resize 이벤트 batching

  >> iframe / SPA 환경

// --------------------------------------------------------------------------------------






// --------------------------------------------------------------------------------------
[참고 사이트]
// --------------------------------------------------------------------------------------

▶️ [간단 소스] 자바스크립트 window.visualViewport.resize 사용해 사용자 눈에 실제 보이는 영역 화면 변경 이벤트 감지 수행

https://kkh0977.tistory.com/8905

https://blog.naver.com/kkh0977/224312032577


▶️ [간단 소스] 자바스크립트 resize 이벤트 사용해 개발자 모드 진입 상태 확인 location.href blank 표시 소스 코드 숨김 설정

https://kkh0977.tistory.com/8865

https://blog.naver.com/kkh0977/224299381329


▶️ [간단 소스] 자바스크립트 Web 웹 크롬 브라우저 키이벤트 및 마우스 우클릭 이벤트 감지 개발자 도구 진입 막기 코드

https://kkh0977.tistory.com/8669

https://blog.naver.com/kkh0977/224202975940


▶️ [간단 소스] 자바스크립트 접속 한 브라우저 환경이 윈도우 환경 인지 확인 - is windows browser

https://kkh0977.tistory.com/8846

https://blog.naver.com/kkh0977/224294530021


▶️ [실시간 브라우저 크기 사이즈 변경 감지 - resize , screen 객체 availWidth , availHeight 사용]

https://kkh0977.tistory.com/971

https://blog.naver.com/kkh0977/222428346030?trackingCode=blog_bloghome_searchlist

// --------------------------------------------------------------------------------------

 

---

[참고 사이트]

​

https://kkh0977.tistory.com/8865

541. (javaScript) [간단 소스] 자바스크립트 resize 이벤트 사용해 개발자 모드 진입 상태 확인 location.h

---