(Javascript)개발자 도구 콘솔창 차단 방법 - 사이트 이동 [경고] 개발자 도구가 감지되었습니다.

(Javascript)개발자 도구 콘솔창 차단 방법 - 사이트 이동 [경고] 개발자 도구가 감지되었습니다.

(Javascript)개발자 도구 콘솔창 차단 방법 - 사이트 이동 [경고] 개발자 도구가 감지되었습니다.

개발자 도구 차단의 한계와 실용적 접근

개발자 도구를 차단하려는 주된 목적은 보안 강화나 HTML 및 CSS의 숨김을 위함일 수 있습니다. 하지만 중요한 것은, 콘솔 창을 막는 것이 기술적으로 완벽한 방법은 아니라는 점입니다. 실제로, 어느 정도는 뚫릴 수 있으므로, 이 기능은 보조적인 수단으로만 활용하는 것이 좋습니다.

콘솔 창 차단 코드의 삽입 위치와 예제

Stack Overflow와 같은 사이트에는 많은 콘솔 창 차단 코드가 존재하지만, 브라우저의 업데이트로 인해 대부분의 코드가 무력화되어 있습니다. 이러한 상황에서 Ukjin Yang 개발자가 만든 코드가 유용할 수 있습니다. 이 코드를 활용하여 개발자 도구 콘솔 창이 열릴 때 특정 사이트로 이동하는 기능을 추가해볼 수 있습니다.

티스토리 사용자의 경우, 스킨 편집에 대한 기초 지식이 필요합니다. 이에 대한 정보는 seons-dev.tistory.com에서 확인할 수 있습니다. 콘솔 창 차단 코드를 HTML 문서의 </body> 태그 바로 위에 삽입하면 됩니다:

<html>
  <body>
    <!-- 여기에 코드 추가 -->
  </body>
</html>

콘솔 창 차단 스크립트 예제

다음은 콘솔 창 차단을 위한 JavaScript 스크립트의 기본 구조입니다:

<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) {
      // 여기에 개발자 도구 감지 시 실행할 코드 삽입
    }
  }
  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 경고 메시지:
개발자 도구가 감지될 때 경고 메시지를 표시하려면, 아래 코드를 주석 처리한 부분에 삽입합니다:
alert('개발자 도구가 감지되었습니다!');
특정 사이트로 이동:
특정 사이트로 리디렉션하려면, 다음과 같은 코드를 사용합니다:
document.location.href="https://www.tistory.com/";
여러 이벤트 추가:
경고 메시지와 사이트 리디렉션을 동시에 적용하려면, 다음과 같이 구성합니다:
alert('개발자 도구가 감지되었습니다!'); document.location.href="https://www.tistory.com/";

결과 확인

이제 웹사이트에서 콘솔 창을 열면, 디버깅이 일시 정지되고, 일시 정지를 해제하거나 콘솔 창을 닫는 순간 경고 메시지가 나타나거나 지정한 사이트로 이동하게 됩니다. 이러한 방법은 개발자 도구의 사용을 완전히 막을 수는 없지만, 사용자에게 경고를 주거나 리디렉션을 통해 일정 부분 보안을 강화할 수 있습니다. 그러나 최종적인 보안은 서버 측 조치와 함께 이루어져야 합니다.

'Lect & Tip > javascript, jQuery' 카테고리의 다른 글

자바스크립트로 근로기준법 연차일수 계산기 만들기 (0)	2024.06.16
JavaScript RGB 색상표 (0)	2024.05.19
1678. Goal Parser Interpretation leetcode javascript 해석 및 풀이 (0)	2023.11.20
에라토스테네스의 체 JS 소수 찾기 알고리즘 만들기 (0)	2023.11.10
자바스크립트 바인딩: 활용과 주의점 (0)	2023.11.07

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

(Javascript)개발자 도구 콘솔창 차단 방법 - 사이트 이동 [경고] 개발자 도구가 감지되었습니다.