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

---

[개발 환경 설정]

​

개발 툴 : Edit++

​

개발 언어 : JavaScript

​

 

---

[소스 코드]

​

-----------------------------------------------------------------------------------------
[사전 설명 및 설정 사항]
-----------------------------------------------------------------------------------------

- 개발 환경 : Web


- 개발 기술 : JavaScript (자바스크립트) / chrome / devOption


- 사전) 자바스크립트 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 로 올라감

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





-----------------------------------------------------------------------------------------
[소스 코드]
-----------------------------------------------------------------------------------------

// --------------------------------------
// ✅ 마우스 우클릭 페이지 소스 보기 막기 코드
// --------------------------------------
['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);

  }

});

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





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

[크롬 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


[onkeydown 사용해 모바일 웹뷰 가상 키보드 엔터 (enter) 키 입력 이벤트 감지]

https://kkh0977.tistory.com/2239

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

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

 

---

[참고 사이트]

​

https://kkh0977.tistory.com/1145

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

---