개발자 도구, 콘솔 막는 방법

콘솔로그,브라우저도구,크롬,디버깅

개발자도구 금지합니다!

개발을 하다 보면 한 번쯤 신경 쓰이는 것은 F12를 통해서 내가 만들고 있는 홈페이지가 위협을 받는듯한 느낌이 드는 경우가 있습니다. 이럴 때 어떻게 대처를 하면 좋을까라는 고민을 하다가 F12를 누르면 경고문과 함께 사이트가 멈추는 듯한 느낌이 보여줄 수 있으면 좋을까라는 고민을 하게 되었습니다. 아마 이 글을 보는 여러분도 한번쯤 고민을 해봤을 거라고 생각을 하며 적용방법에 대해서 간단하게 설명을 하려고 합니다. 물론 지금 이 방법이 완벽한 방법도 아니고 이렇게 한다고 해도 마음먹고 하는 분들을 막을 수 없지만 적어도 울타리 하나가 더 생겼다는 거에 위안을 삼는.....것도 좋지 않을까라는 생각 하시면 좋지... 않을까라는 생각입니다.

목차

개발자도구(콘솔) 멈춰!

/* 
* F12를 눌렀을 때, 아무런 반응이 없도록 막는 방법
*/
if(e.keycode == 123)
{
    e.preventDefault();
    return false;
}

/*
* Ctrl + Shift + I를 눌렀을 때, 아무런 반응이 없도록 막는 방법
*/
if(e.ctrlKey && e.shiftKey && e.keycode == 73)
{
    e.preventDefault();
    return false;
}

/*
* 위 방법의 문제점은 브라우저의 설정을 사용자가 직접 눌러 여는 경우는 막지 못함
*/

/*
* 개발자도구를 열게 되면 중지되고 사이트 이용에 제한을 두는 방법
* The script is not a script in OdinBOX.
*/
!function() {
  function detectDevTool(allow) {
    if(isNaN(+allow)) allow = 100;
    var start = +new Date(); 
    debugger;
    var end = +new Date(); 
    if(isNaN(start) || isNaN(end) || end - start > allow) {
      /* 개발자도구 감지시 실행 할 스크립트 */
    }
  }
  if(window.attachEvent) {
    if (document.readyState === "complete" || document.readyState === "interactive") {
        detectDevTool();
      window.attachEvent('onresize', detectDevTool);
      window.attachEvent('onmousemove', detectDevTool);
      window.attachEvent('onfocus', detectDevTool);
      window.attachEvent('onblur', detectDevTool);
    } else {
        setTimeout(argument.callee, 0);
    }
  } else {
    window.addEventListener('load', detectDevTool);
    window.addEventListener('resize', detectDevTool);
    window.addEventListener('mousemove', detectDevTool);
    window.addEventListener('focus', detectDevTool);
    window.addEventListener('blur', detectDevTool);
  }
}();

세 가지 방법을 생각을 했습니다. 우선 첫번째의 경우 F12를 눌렀을 때 아무런 반응이 없도록 하는 것입니다. 두번째 방법은 Ctrl + Shift + I를 눌렀을 때 아무런 방법이 없도록 하는 것을 선택을 했습니다. 세 번째 방법은 콘솔 창을 열게 되면 강제 디버깅 모드를 설정을 하여 열 수 없도록 막는 방법 입니다. 제일 좋은 방법은 이 세가지 모두를 적용을 하는 것이지만 하나를 선택을 해라고 하면 세번째 방법이 가장 적당한 방법이라고 생각을 합니다. 

 

그리고 또 하나 제일 신경을 쓰게 하는 문제가 있는데 바로 콘솔로그를 활용해 외부 사용자가 보안에 문제가 될 수 있다는 것입니다. 그래서 이 방법 또한 찾아봤는데 StackOverFlow[#] 글을 참고하자면 그 콘솔로그를 따로 막을 수 있는 방법이 있긴 합니다. 아래와 같은 방법을 사용을 하면 해당 방법을 막을 수 있습니다.

with ((console && console._commandLineAPI) || {}) {
    /* Code */
}

Object.defineProperty(console, '_commandLineAPI',
   { get : function() { throw '사용 할 수 없습니다!!' } }
)

// Stackoverflow - 활용

마무리

개발자 도구(콘솔) 등을 막는 방법을 알아봤습니다. 이밖에도 다양한 방법이 많이 존재하고 있지만 제가 볼 때 사용을 할 수 있는 방법은 위 방법이 그나마 접근하기 쉽고 제일 적용하기 쉬운 방법 중 하나인 것 같습니다. 혹시 다른 방법이 있거나 궁금한 사항이 있다면 댓글을 통해 남겨주시면 답변드리도록 하겠습니다.