176. (TWOK/LOGIC) [Web] 자바스크립트 크롬 브라우저 키이벤트 및 마우스 우클릭 이벤트 감지 후 기본 개발자 도구 진입 막기 로직 정리

---

[로직 정리]

​

정리 로직 : Web / JavaScript

​

상태 : [Web] 자바스크립트 크롬 브라우저 키이벤트 및 마우스 우클릭 이벤트 감지 후 기본 개발자 도구 진입 막기 로직 정리

​

 

---

[설 명]

​

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

1. 제 목 : [Web] 자바스크립트 크롬 브라우저 키이벤트 및 마우스 우클릭 이벤트 감지 후 기본 개발자 도구 진입 막기 로직 정리


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


3. 사전) 👉 자바스크립트 addEventListener 간략 설명 : 

  >> addEventListener() 는 브라우저 DOM 요소(또는 window, document 등) 에 이벤트 핸들러(콜백 함수)를 등록하는 표준 방법입니다.

  >> 기본 이벤트 리스너 등록 문법 : target.addEventListener(type, listener, options);

    - type : 이벤트 이름 (예: "click", "keydown", "resize" 등)

    - listener : 이벤트 발생 시 실행할 함수 (콜백)

    - options : 캡처링, 버블링, 한 번만 실행 등 세부 설정(선택)

      $ capture: true = 캡처링 단계에서 먼저 이벤트 실행
      $ once: true = 이벤트를 딱 한 번만 실행
      $ passive: true = 이벤트 핸들러에서 preventDefault() 호출 금지 / 스크롤 성능 최적화용
      $ 단순 불린 값 (옛 방식) = element.addEventListener("click", handler, true);  // capture 모드 || element.addEventListener("click", handler, false); // bubbling 모드(기본)

  >> 브라우저 이벤트 흐름 : 

    - 캡처 단계 (Capturing phase) : 이벤트가 window → document → body → 목표 요소로 내려옴

    - 타깃 단계 (Target phase) : 실제 이벤트 대상 요소에서 실행

    - 버블링 단계 (Bubbling phase) : 이벤트가 목표 요소 → body → document → window 로 올라감

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






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

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

1. 자바스크립트에서 웹 브라우저 로딩 감지 window.onload 함수 생성 및 관리자 인증 수행 플래그 값 변수 선언

  var ADMIN_AUTH_FLAG = false; 

  window.onload = async function() { 

    // ...... 코드 계속 ......

  };


2. window.onload 부분에서 브라우저 접속 userAgent 값 확인 수행

  var uagent = navigator.userAgent.toLowerCase();
  var android_agent = uagent.search("android");
  var iphone = uagent.search("iphone");
  var ipad = uagent.search("ipad");

  // [접속 디바이스 분기 처리 전송 실시]
  if (android_agent > -1 || iphone > -1) {
      console.log("[접속 환경] : Mobile");
  }
  else {
      console.log("[접속 환경] : PC");

      // ...... 코드 계속 ......
  }


3. 웹 브라우저를 접속한 환경이 PC 환경 인 경우 [마우스 우클릭] 이벤트 감지 리스너 및 F12, Ctrl+U 등 키 이벤트 감지 리스너 등록 수행

  // --------------------------------------
  // ✅ 마우스 우클릭 페이지 소스 보기 막기 코드
  // --------------------------------------
  ['mousedown', 'mouseup', 'contextmenu'].forEach(type => {
    window.addEventListener(type, (e) => {
      try {
        console.warn(`[mouse] : ${type} : `, {
          button: e.button,   // 0=좌, 1=중, 2=우 (없으면 undefined)
          buttons: e.buttons, // 비트마스크: 1=좌, 2=우, 4=중
          which: e.which,     // 과거 호환 (권장X)
          defaultPrevented: e.defaultPrevented,
          target: e.target && e.target.tagName
        }, e);

        if (type == 'contextmenu'){
          console.log('contextmenu : event : ', e);

          const pointerType = e.pointerType || null;
          console.log('contextmenu : pointerType : ', pointerType);

          if (pointerType == 'mouse'){ // ✅ 마우스 우클릭

            // ✅ 메뉴 자체 표시 막기
            if (ADMIN_AUTH_FLAG == false){ // ❌ 관리자 인증 플래그 값 변수 체크 : 관리자 인증이 안된 경우
              adminAuthPopup("※ 마우스 우클릭 : 관리자 인증 후 사용할 수 있는 기능입니다");
              
              e.preventDefault();
              e.stopPropagation();
            }

          }

        }
      }
      catch(exception){
        console.error('[mouse] : Logic : exception : ', exception);
      }

    }, { capture: true });

  });


  // --------------------------------------
  // ✅ F12, Ctrl+U 키 이벤트 방지 코드
  // --------------------------------------
  document.addEventListener('keydown', function (e) {
                  
    try {

      const key = e.key.toUpperCase();
      const ctrl = e.ctrlKey || e.metaKey;

      // ✅ F12
      if (e.key === "F12" || e.keyCode === 123) {
        console.warn("keydown : F12 감지됨");

        if (ADMIN_AUTH_FLAG == false){ // ❌ 관리자 인증 플래그 값 변수 체크 : 관리자 인증이 안된 경우
          adminAuthPopup("※ F12 : 관리자 인증 후 사용할 수 있는 기능입니다");
          
          e.preventDefault();
          e.stopPropagation();
        }

      }

      // ✅ Ctrl + U
      if (ctrl && key === "U") {
        console.warn("keydown : Ctrl + U 감지됨");

        if (ADMIN_AUTH_FLAG == false){ // ❌ 관리자 인증 플래그 값 변수 체크 : 관리자 인증이 안된 경우
          adminAuthPopup("※ Ctrl + U : 관리자 인증 후 사용할 수 있는 기능입니다");
          
          e.preventDefault();
          e.stopPropagation();
        }

      }

      // ✅ Ctrl + Shift + I (개발자 도구)
      if (ctrl && e.shiftKey && key === "I") {
        console.warn("keydown : Ctrl + Shift + I 감지됨");

        if (ADMIN_AUTH_FLAG == false){ // ❌ 관리자 인증 플래그 값 변수 체크 : 관리자 인증이 안된 경우
          adminAuthPopup("※ Ctrl + Shift + I : 관리자 인증 후 사용할 수 있는 기능입니다");
          
          e.preventDefault();
          e.stopPropagation();
        }

      }

      // ✅ Ctrl + Shift + J (콘솔 패널)
      if (ctrl && e.shiftKey && key === "J") {
        console.warn("keydown : Ctrl + Shift + J 감지됨");

        if (ADMIN_AUTH_FLAG == false){ // ❌ 관리자 인증 플래그 값 변수 체크 : 관리자 인증이 안된 경우
          adminAuthPopup("※ Ctrl + Shift + J : 관리자 인증 후 사용할 수 있는 기능입니다");
          
          e.preventDefault();
          e.stopPropagation();
        }
        
      }

    }
    catch(exception){
      console.error('keydown : Logic : exception : ', exception);

    }

  });


4. adminAuthPopup 관리자 인증 수행 팝업창에서는 window.prompt 를 사용해 관리자 인증 번호를 입력 받을 수 있는 팝업창 표시 및 관리자 인증 번호 확인 수행

  var value = window.prompt("\n" + type + "\n\n" + "※ 관리자 인증 번호를 입력해 주세요." + "\n\n" + "※ 관리자 인증이 정상적으로 되어야 전체 기능 사용이 가능합니다." +  "\n");

  if (value !== null && value !== undefined && value !== ""){

    // ...... 코드 계속 ..... 관리자 인증 번호 일치 체크 ........
  }


5. adminAuthPopup 관리자 인증 수행 팝업창에서 정상적으로 관리자 인증이 완료 된 경우 ADMIN_AUTH_FLAG 플래그 값 변경 및 관리자 인증 성공 팝업창 alert 알림 표시

  if (value == ADMIN_AUTH_PW){ // 관리자 인증 번호 정상 일치
    ADMIN_AUTH_FLAG = true;

    const timeAlert3 = setTimeout(() => { // 타이머
      
      alert("\n" + "✅ 관리자 인증이 완료 되었습니다 !!" + "\n");

    }, 200 );

  }

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






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

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

https://kkh0977.tistory.com/8669

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


[크롬 F12 개발자 도구 사용해 로컬 스토리지 , 세션 , 쿠키 저장된 정보 확인 방법]

https://kkh0977.tistory.com/1145

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


[크롬 F12 개발자 도구 사용해 네트워크 상태 및 리소드 로드 속도 확인]

https://kkh0977.tistory.com/947

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

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

 

---

[참고 사이트]

​

https://kkh0977.tistory.com/8669

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

---