개발자 도구 탐지하는 동작 원리

개발자 도구가 열려 있음을 탐지하는 방식은 여러가지가 있다.

 

그 중 대표적인 것들만 다뤄보고자 한다.

 

---

 

1. 개발자 도구가 켜져 있을 때에만 객체의 속성을 자동으로 탐색하고 평가하는 원리 이용

 

<예시 코드>

let devtoolsOpen = false;
const element = new Image();
Object.defineProperty(element, 'id', {
    get: function() {
        devtoolsOpen = true;
        throw new Error("DevTools detected!");
    }
});

setInterval(() => {
    devtoolsOpen = false;
    console.log(element);
    if (devtoolsOpen) {
        alert("개발자 도구가 열려 있습니다!");
    }
}, 1000);

 

<코드 설명>

Object.defineProperty(element, 'id', {
    get: function() {
        devtoolsOpen = true;
        throw new Error("DevTools detected!");
    }
});

 

element 객체의 id 속성에 대한 getter 함수를 정의한다.

 

즉, element.id에 접근하려고 하면, 정의된 함수가 실행된다.(개발자 도구가 켜져있을 때 작동)

 

이후, function() 내부 스크립트가 읽히면서 devtoolsOpen = false -> true 로 바뀌게 된다.

 

setInterval(() => {
    devtoolsOpen = false; // 매번 초기화
    console.log(element); // element를 콘솔에 출력 (이때 id의 getter가 실행됨)
    if (devtoolsOpen) {
        alert("개발자 도구가 열려 있습니다!"); // 플래그가 true라면 경고 메시지 표시
    }
}, 1000);

 

setInterval을 사용해 1초마다 다음을 반복한다.

 

1. devtoolOpen 을 false로 초기화한다.

2. console.log(element)를 호출하여, 콘솔에 element 객체를 출력한다.

• 이 과정에서 element의 id 속성에 접근하게 되고, 위에서 정의한 getter가 실행된다.
• 만약 개발자 도구가 열려 있다면, getter가 실행되어 devtoolsOpen = true 로 변경된다.

3. if(devtoolsOpen) 조건이 참이면 alert("개발자 도구가 열려 있습니다!")를 실행합니다.

 

 

<왜 개발자 도구가 켜져있을 때 속성 평가 동작을 할까?>

 

코드가 개발자 도구(DevTools)가 열려 있을 때만 반응하는 이유는, 브라우저의 개발자 도구 콘솔이 실행 중일 때 특정 객체나 프로퍼티를 자동으로 평가하는 동작 때문이다. 이 동작은 일반적인 브라우저 실행에서는 발생하지 않으며, 개발자 도구가 열려 있는 경우에만 트리거 된다. 

 

1. 개발자 도구와 객체 평가

 

개발자 도구가 열려 있을 때, console.log(element)로 객체를 출력하면 브라우저는:

• 출력하려는 객체의 속성을 탐색하고,
• 프로퍼티 값을 평가하여 출력에 필요한 데이터를 준비한다.
• 브라우저가 객체 속성을 탐색할 때, 해당 속성에 getter가 정의되어 있으면 이 getter가 실행된다.

예시

Object.defineProperty(obj, 'property', {
    get: function() {
        console.log("Getter accessed!");
        return 42;
    }
});

console.log(obj);

• 개발자 도구가 열려 있으면, 브라우저가 obj 객체의 property 속성에 접근하여 getter를 실행한다.
• 개발자 도구가 닫혀 있으면, 브라우저가 console.log의 출력만 처리하며 속성을 평가하지 않는다.

 

 

2. 단축키로 개발자 도구 열림 차단

 

방법 1 : keydown 이벤트로 F12 감지

document.addEventListener("keydown", function (event) {
    if (event.key === "F12") {
        event.preventDefault(); // 기본 동작 차단
        alert("개발자 도구 사용이 차단되었습니다.");
    }
});

 

방법2: ctrl + shift + i 조합 차단

document.addEventListener("keydown", function (event) {
    if (event.ctrlKey && event.shiftKey && event.key === "I") {
        event.preventDefault(); // 기본 동작 차단
        alert("개발자 도구 사용이 차단되었습니다.");
    }
});

 

방법3: contestmenu 이벤트 차단

document.addEventListener("contextmenu", function (event) {
    event.preventDefault(); // 우클릭 차단
    alert("우클릭이 차단되었습니다.");
});

• contextmenu는 우클릭 시 발생하는 이벤트입니다.

 

 

외에도 행렬 생성 하는 시간이 발생하는 시간 차를 이용한 방법 등 더 있다. 

 

이후, 더 파악이 되면 작성하도록 하겠다.