218. (TWOK/WORK) [개선 요청] 웹 관리자 대시보드 페이지에서 개발자 모드 진입 시 화면 숨김 처리 및 소스 코드 숨김 처리 개발 요청 - window resize

---

[제 목]

​

주제 : 투케이2K 업무 정리

​

타이틀 : 투케이 / 2k / 업무 정리

​

제목 : [개선 요청] 웹 관리자 대시보드 페이지에서 개발자 모드 진입 시 화면 숨김 처리 및 소스 코드 숨김 처리 개발 요청 - window resize

​

 

---

[내 용]

 

------------------------------------------------------------------------------
[개발 및 테스트 환경]
------------------------------------------------------------------------------

- 제 목 : [개선 요청] 웹 관리자 대시보드 페이지에서 개발자 모드 진입 시 화면 숨김 처리 및 소스 코드 숨김 처리 개발 요청 - window resize


- 테스트 환경 : Chrome / JavaScript


- 사전) 👉 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% 신뢰는 불가능합니다.


- 사전) 👉 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. 🟥 웹 관리자 대시보드 페이지에서 F12 버튼 또는 마우스를 통한 개발자 모드 진입 시 화면 숨김 처리 및 소스 코드 숨김 처리 기능 구현 요청


2. 🟥 기능 구현 요청 내용 정리 : 

  >> 웹 관리자 페이지에서 F12 키보드 동작 또는 마우스를 통한 개발자 모드 진입 시 화면 숨김 처리 요청

  >> 개발자 모드 콘솔에서 소스 확인 시 소스 코드가 보이지 않게 처리 요청

  >> 👉 현재 자바스크립트에서 F12 등 키보드 단축키를 통한 개발자 모드 진입은 막아져 있는 상태

------------------------------------------------------------------------------





------------------------------------------------------------------------------
[원인 파악 및 증상 재현]
------------------------------------------------------------------------------

1. ✔️ 마우스 우클릭 또는 브라우저 설정에서 개발자 모드 진입 수행 (키보드 이벤트 없음)


2. 🟥 개발자 모드가 활성화 되고 > 콘솔 로그 및 브라우저 소스 코드 전체 확인 가능 상태

------------------------------------------------------------------------------






------------------------------------------------------------------------------
[조치 내용]
------------------------------------------------------------------------------

1. 🟦 운영 브라우저 환경 인 경우 자바스크립트 console.log 가 보이지 않게 히든 처리 수행

  // --------------------------------------
  // console 관련 로그 출력 막기
  // --------------------------------------
  // 'log', 'debug', 'info', 'warn', 'error' 관련 로그 출력 막기
  // --------------------------------------
  const noop = () => {};
  console = new Proxy(console, {
    get(target, prop) {
      if (['log', 'debug', 'info', 'warn', 'error'].includes(prop)) { // 로그 출력 제외 타입 지정
        return noop;
      }
      return target[prop];
    }
  });


2. 🟦 운영 브라우저 환경 인 경우 자바스크립트에서 window.resize 이벤트 대응 처리 및 UserAgent 대응 처리 수행

  >> 초기 웹 로드 시 측정한 브라우저 사이즈와 window.resize 이벤트 발생 시 변경 된 브라우저 사이즈가 다른 경우 체크

  >> 초기 웹 로드 시 측정한 UserAgent 값과 window.resize 이벤트 발생 시 변경 된 UserAgent 가 다른 경우 체크

  >> 모든 조건이 만족되는 경우 개발자 모드 진입으로 체크하고 >> 웹 페이지 화면 리다이렉션 수행 실시 (👉 화면 숨김 및 소스 코드 숨김)

  // --------------------------------------
  // ✅ 브라우저 사이즈 변경 감지를 위한 플래그값 선언
  // --------------------------------------
  const BROWSER_SIZE_CHANGE_FLAG = true; // true = 사이즈 변경 감지 / false = 사이즈 변경 감지 안함
  var resizeTimer = null;


  // --------------------------------------
  // ✅ 현재 브라우저 사이즈 확인 및 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);          


  // --------------------------------------
  // ✅ BROWSER_SIZE_CHANGE_FLAG 플래그 값에 따라서 브라우저 사이즈 변경 이벤트 감지 리스너 등록
  // --------------------------------------
  if (BROWSER_SIZE_CHANGE_FLAG == true) { // 운영 모드 인 경우

    try {
                  
      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; // 🟦 새로 비교 값 삽입 (개발자 툴에서 > PC 전환 경우)
            }

          }                    
        }, 50);

      });

    }
    catch(err){
      console.error("BROWSER_SIZE_CHANGE_FLAG : Exception : ", err);
    }
  }

------------------------------------------------------------------------------





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

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

503. (javaScript) [간단 소스] 자바스크립트 Web 웹 크롬 브라우저 키이벤트 및 마우스 우클릭 이벤트

---