193. (TWOK/LOGIC) [Web] 자바스크립트 window.resize 와 UserAgent 사용해 개발자 도구 진입 화면 크기 변환 시 페이지 이동 처리 로직

---

[로직 정리]

​

정리 로직 : Web / Chrome / JavaScript

​

상태 : [Web] 자바스크립트 window.resize 와 UserAgent 사용해 개발자 도구 진입 화면 크기 변환 시 페이지 이동 처리 로직

​

 

---

[설 명]

​

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

1. 제 목 : [Web] 자바스크립트 window.resize 와 UserAgent 사용해 개발자 도구 진입 화면 크기 변환 시 페이지 이동 처리 로직


2. 테스트 환경 : Web / JavaScript / chrome


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.screen.availWidth 간략 설명 : 

  >> window.screen.availWidth 는 사용자의 화면 (Screen) 에서 실제로 웹 브라우저가 사용 가능한 가로 너비 (px) 를 의미하는 JavaScript 속성입니다.

    - window.screen : 사용자의 디스플레이(모니터) 정보를 담고 있는 객체
    - availWidth : OS UI 요소(작업 표시줄, Dock 등)를 제외한 실제 사용 가능한 가로 길이

  >> window.screen.availWidth 는 전체 화면 폭(screen.width)과는 다르게 다음 요소를 제외합니다.

    - Windows 작업 표시줄(Taskbar)
    - macOS Dock
    - 기타 OS 레벨 UI 영역
    - 즉, 사용자가 앱/브라우저를 표시할 수 있는 최대 가로 공간입니다.

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






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

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

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


2. 🟦 현재 마우스 우클릭 이벤트 , 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.resize 이벤트 등록 및 UserAgent 접속 타입 체크 로직
------------------------------------------------------

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

  >> const GLOBAL_OPERATE_FLAG = true;


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

  window.onload = async function() { 

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

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

    }

  };


3. 운영 모드 플래그인 경우 > 초기 화면 진입 된 window.screen 화면 사이즈 및 userAgent 값 저장 수행

  // --------------------------------------
  // 현재 브라우저 사이즈 확인 및 userAgent 값 확인 수행
  // --------------------------------------
  var width = window.screen.availWidth;    // 작업표시줄/독 등을 제외한 가용 너비
  const height = window.screen.availHeight;   // 가용 높이
  const userAgent = 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

  console.log('init : userAgent : ', userAgent);
  console.log('init : width : ', width);
  console.log('init : height : ', height);  


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


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

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


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



------------------------------------------------------
✅ window.resize 처리 관련 자바스크립트 소스 코드 첨부
------------------------------------------------------

var resizeTimer = null;

window.addEventListener('resize', () => {

  const reSizeWidth = window.screen.availWidth;  
  const reSizeHeight = window.screen.availHeight;
  const reSizeUserAgent = navigator.userAgent;

  // --------------------------------------
  // ✅ 초기 진입한 브라우저 사이즈와 변경 되고 userAgent 값이 모바일이 포함되는 경우 (개발자모드 진입한 경우)
  // --------------------------------------
  const sizeChange = width - reSizeWidth;

  // 👉 브라우저 초기 실행 로그 : [window onresize] : [running] :  1920  /  1032  /  0  /  Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/148.0.0.0 Safari/537.36
  // 👉 개발자 모드 진입 시 변경 로그 : [window onresize] : [running] :  941  /  922  /  979  /  Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/148.0.0.0 Mobile Safari/537.36
  console.log("[window onresize] : [running] : ", reSizeWidth, " / ", reSizeHeight, " / ", sizeChange, " / ", reSizeUserAgent);


  const android = reSizeUserAgent.toLowerCase().search("android");
  const iphone = reSizeUserAgent.toLowerCase().search("iphone");

  // 기존 타이머 제거
  if (resizeTimer) {
    clearTimeout(resizeTimer);
    resizeTimer = null;
  }

  // 특정 시간 동안 변화 없으면 실행
  resizeTimer = setTimeout(() => {
    console.log('resizeTimer : start');

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

        //window.location.href = "about:blank"; // 🟦 빈창 이동 수행

        window.location.replace('about:blank'); // 🟦 히스토리에 남기지 않고 교체                      

      } 
      else {
        console.warn("Event Alert : None"); 

        width = reSizeWidth; // 🟦 웹 브라우저 초기 인입 width 을 새로 비교 값 삽입 (개발자 툴에서 > PC 전환 경우)
      }

    }                    
  }, 50);

});

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






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

▶️ [간단 소스] 자바스크립트 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

---