(Javascript)개발자 도구 콘솔창 차단 방법 - 사이트 이동

서근

2022. 7. 3. 02:44

QUOTE THE DAY

개발자 도구 콘솔 창 차단

오늘은 브라우저의 개발자 도구 콘솔 창을 차단하는 방법에 대해 알아보고 티스토리에 적용하는 방법에 대해 다뤄볼까 합니다.

개발자 도구를 차단하는 이유는 보통 보안 또는 HTML 및 CSS를 숨기고자 하는 이유가 대부분이겠지만 사실은 콘솔 창을 막는 방법은 정상적인 방법이 아닙니다. 그래서 이 기능을 사용하더라도 어떻게는 뚫리기 마련이므로 간단히 사용하는 정도로만 알아두시면 좋을 것 같습니다.

콘솔 창 차단 코드 삽입 위치

Stack Overflow등에도 많은 콘솔 창 차단 코드가 존재하지만, 브라우저가 업데이트되면서 대부분의 코드가 막혀있는 상태입니다. 그렇게 구글링을 한 결과 감사하게도 Ukjin Yang이라는 개발자분께서 만드신 코드를 발견하게 되었습니다.

저는 이 코드 안에 개발자 도구 콘솔 창을 열면 특정 사이트로 이동하는 기능을 넣어보려고 합니다.

코드를 티스토리에 적용하기 전에 스킨 편집에 대한 기초적인 지식이 없으시다면 아래 링크를 통해 확인해주세요.

(티스토리) 스킨 편집 기초 상식

안녕하세요. 제 블로그에는 티스토리에서 스킨을 적용하기 위해 다양한 포스팅이 존재합니다. 이번에는 티스토리에서 어떻게 스킨을 어떻게 편집하는지 아주 간단하게 알아보려고 합니다. 스

seons-dev.tistory.com

콘솔 창 차단 코드를 삽입할 위치는 </body> 바로 위쪽에 넣어주시면 됩니다.

<html>
 <body>
 
 
 <!---이쪽에 추가-->
 
 </body>
</html>

콘솔 창 차단 코드

<!--콘솔창 차단 스크립트-->
<script>
!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) {
      // 개발자 도구가 open 된것을 감지했을때 실행할 코드 삽입
    }
  }
  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);
  }
}();
</script>
<!--콘솔창 차단 스크립트 끝-->

이제 주석 처리한 부분에 기능을 추가하기만 하면 됩니다.

특정 기능 추가

Alert와 같은 경고 메시지를 추가할 수도 있고 href와 같은 특정 사이트로 이동하는 기능을 추가할 수 도 있겠네요.

Alert 경고 메시지

만약 경고 메세지를 띄우고 싶으시다면 주석 처리한 부분에 다음 코드를 삽입해주시면 됩니다.

<!--콘솔창 차단 스크립트-->
<script>
!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) {
      // 개발자 도구가 open 된것을 감지했을때 실행할 코드 삽입
      alert('개발자 도구가 감지되었습니다!');
    }
  }
  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);
  }
}();
</script>
<!--콘솔창 차단 스크립트 끝-->

alert('개발자 도구가 감지되었습니다!'); 처럼 괄호 안에 원하시는 문구를 작성해주시면 되겠습니다.

특정 사이트로 이동

만약, 특정 사이트로 이동하시고 싶으시다면 다음과 같은 코드를 작성할 수 있습니다.

<!--콘솔창 차단 스크립트-->
<script>
!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) {
      // 개발자 도구가 open 된것을 감지했을때 실행할 코드 삽입
      document.location.href="https://www.tistory.com/"
    }
  }
  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);
  }
}();
</script>
<!--콘솔창 차단 스크립트 끝-->

document.location.href="https://www.tistory.com/"; 처럼 " " 안에 원하시는 사이트를 작성해주시면 되겠습니다.

여러 이벤트 추가

만약, 여러 이벤트를 넣고 싶으시다면 아래처럼 할 수 있습니다.

<!--콘솔창 차단 스크립트-->
<script>
!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) {
      // 개발자 도구가 open 된것을 감지했을때 실행할 코드 삽입
      alert('개발자 도구가 감지되었습니다!');
      document.location.href="https://www.tistory.com/";
    }
  }
  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);
  }
}();
</script>
<!--콘솔창 차단 스크립트 끝-->

결과 확인

이제 결과를 확인해 보시면, 사이트에서 콘솔 창을 열었을 때 디버깅이 일시 정지되며, 일시정지를 풀거나, 콘솔 창을 닫는 순간 특정 사이트 또는 경고 메시지가 나타나게 됩니다.

다시 한번 말씀드리지만 이 방법은 뚫고자 하는 의지가 있으면 뚫릴 수 있으니, 참고 정도만 하시기 바랍니다!

만약 데모 버전을 보고 싶으시다면 Ukjin Yang님의 사이트에서 확인하실 수 있습니다.

Devtools Detector - JSFiddle - Code Playground

jsfiddle.net

오늘은 이렇게 개발자 도구 콘솔 창을 차단하는 방법에 대해 알아보고 티스토리에 적용하는 방법에 대해 알아보았습니다.

읽어주셔서 감사합니다🤟

저작자표시 비영리 변경금지

'FRONT-END > JAVASCRIPT' 카테고리의 다른 글

(JAVASCRIPT) ESMAScript란? ES6 / ES7 (2)	2022.08.02
JAVASCRIPT 관련 모음 (0)	2022.08.02
(티스토리) 태그 쉼표 제거 하는 방법 - Javascript (1)	2022.07.02
(Javascript) HTML SVG파일에 원하는 색상 적용하는 방법 (0)	2022.06.30
(티스토리) 버튼 클릭 한 번으로 내가 원하는 위치 이동하는 방법 (플로팅버튼) (17)	2022.03.25