(JavaScript) 개발자 도구 실행 감지하기

보안이 필요한 사이트에 적용중인 기능입니다.

단축키 F12 키를 누르면 개발자 도구가 실행되는데, 사이트의 코드뿐만 아니라 네트워크 접속 과정까지 볼 수 있습니다.
개발자 도구가 실행됐는지 확인하려면 자바스크립트의 디버그 중단점 코드를 사용하면 됩니다.

디버그 중단점 코드

debugger;

개발자 도구가 실행된 상태에서는 위 코드가 있는 줄에서 자바스크립트가 일시정지 됩니다.

그 다음 개발자 도구를 닫거나 개발자 도구에서 실행 버튼을 누르면 나머지 자바스크립트가 실행되는데, 이때 중단점 이전과 이후의 시간차를 비교해서 개발자 도구가 실행됐는지를 확인하면 됩니다.

응용 코드

!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) {
            alert('DEVTOOLS detected. all operations will be terminated.');
            // IP 기록 실행
        }
    }
    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);
    }
}();

익명 함수로 실행.
allow는 감지 시간.
end와 start 기록 시각을 비교하여 allow 이상 차이나면 개발자 도구가 실행된 것으로 확인.
window.attachEvent는 표준 브라우저인지 검사.
페이지가 완전히 로드되었을 때만 감지 코드 실행할 것.
크기 변경 이벤트, 마우스 이동 이벤트, 활성화 이벤트, 숨김 이벤트 핸들러에 감지 코드 이벤트 처리기 추가.

IP 기록 및 차단은 DB 또는 파일에 접속자의 IP를 기록하여 관리하면 됩니다.