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

개발자 도구를 차단하는 주된 목적은 사이트의 보안을 강화하거나 HTML 및 CSS 코드를 숨기려는 의도일 수 있습니다. 그러나 실제로 콘솔 창을 완전히 차단하는 것은 기술적으로 복잡하며, 종종 정상적인 방법으로 여겨지지 않습니다. 이는 개발자 도구의 차단이 완전하지 않으며, 결국 어떤 방법으로든 우회될 수 있기 때문입니다. 따라서, 이러한 차단 기능은 기본적인 방어 수단으로만 간주하고, 추가적인 보안 조치와 함께 사용하는 것이 바람직합니다.

콘솔 창 차단 코드의 삽입 위치 및 참고 자료

콘솔 창 차단을 위한 스크립트는 HTML 문서 내에서 <body> 태그가 끝나기 직전에 삽입하는 것이 일반적입니다. 이 위치는 스크립트가 문서의 모든 요소가 로드된 후에 실행되도록 보장합니다. 스크립트 삽입 전에 티스토리의 스킨 편집에 대한 기초 지식이 필요하다면, 다음 링크를 통해 관련 정보를 확인할 수 있습니다: 티스토리 스킨 편집 기초 상식.

콘솔 창 차단 스크립트 구현

Ukjin Yang 개발자가 제공한 콘솔 창 차단 스크립트는 다음과 같습니다. 이 스크립트는 개발자 도구가 열렸을 때 특정 사이트로 이동하거나 경고 메시지를 표시하는 기능을 추가할 수 있습니다.

<!--콘솔창 차단 스크립트-->
<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) {
    // 코드...
  } else {
    window.addEventListener('load', detectDevTool);
    // 나머지 이벤트 리스너...
  }
}();
</script>
<!--콘솔창 차단 스크립트 끝-->

특정 기능 추가

개발자 도구가 감지되었을 때 실행할 코드는 다양한 형태로 구현할 수 있습니다. 예를 들어, 경고 메시지를 표시하거나 특정 사이트로 리디렉션하는 기능을 추가할 수 있습니다.

Alert 경고 메시지 추가: 경고 메시지를 표시하고자 할 때는 alert('메시지'); 코드를 사용합니다.
특정 사이트로 이동: 사용자를 다른 사이트로 리디렉션하려면 document.location.href="사이트 주소"; 코드를 사용합니다.

결과 확인 및 마무리

이 스크립트를 적용한 후, 사이트에서 개발자 도구를 열면 디버거가 일시 정지되고, 일시 정지를 해제하거나 콘솔 창을 닫는 순간 경고 메시지가 표시되거나 지정한 사이트로 리디렉션이 이루어집니다. 이를 통해 사이트 관리자는 사용자의 개발자 도구 사용을 어느 정도 제한할 수 있습니다. 그러나 이러한 방법은 완벽한 보안 솔루션이 아니므로, 다른 보안 조치와 함께 사용하는 것이 중요합니다.

html5css2018

이 블로그 검색