[JavaScript] 개발자 도구 감지하기(+우회)

우연히 브라우저의 개발자 도구를 차단하는 사이트를 만났다. 개발자 도구를 감지하는 사이트들을 몇 번 만난 적 있었는데 이 사이트는 무슨 짓을 해도 우회가 되지 않았다. 무슨 원리인가 찾아보다가 이건 정리할 만하다 싶어서 글로 남긴다.

일단 원래 알고 있던 기본적인 탐지 방법부터 소개하자면

단축키 막기

document.addEventListener('keydown', (event) => {
  if (event.key === 'F12' || (event.ctrlKey && event.shiftKey && event.key === 'I')) {
    event.preventDefault();
    alert('개발자 도구 감지!');
  }
});

가장 허접한 방법으로는 개발자 도구 단축키를 막는 방법이 있다.

F12나 Ctrl+Shift+I를 감지하는 건데 개발자 도구를 연 상태로 사이트에 진입하거나 단축키가 아닌 브라우저 메뉴에서 개발자 도구를 열면 바로 무력화할 수 있다.

뷰포트 크기 감지

setInterval(() => {
  if (window.outerWidth - window.innerWidth > 200 || window.outerHeight - window.innerHeight > 200) {
    alert('개발자 도구 감지!');
  }
}, 500);

뷰포트 화면 크기를 이용한 방법도 있다. 개발자 도구가 열리면 화면을 차지하기 때문에 이를 감지하는 원리이다. 얘는 개발자 도구를 외부 창으로 여는 방법으로 무력화할 수 있다.

패널처럼 브라우저마다 개발자 도구 말고도 화면을 차지하는 기능이 있을 수 있는데 이를 열면 오감지가 된다는 심각한 문제가 있다. 방금 테스트하다가 알았는데 화면 확대를 해도 오감지가 된다. 이건 좀..

디버거 체크

setInterval(() => {
  const start = performance.now();
  debugger;
  const end = performance.now();
  if (end - start > 100) {
    alert('개발자 도구 감지!');
  }
}, 1000);

개발자 도구가 열리면 debugger 문을 실행할 수 있으므로 이를 감지하는 원리이다. 개발자 도구에서 debugger를 무시하는 옵션이 있기 때문에 이를 활성화해서 무력화할 수 있다.

 

이 방법들 모두 간단히 우회할 수 있긴 한데 그나마 세 번째가 가장 정석적인 방법이라고 알고 있었다. 그런데 이번에 만난 사이트는 어떤 방법으로도 우회가 되지 않았다. 무슨 원리인가 찾아보다가 devtools-detector라는 패키지를 발견했다.

https://www.npmjs.com/package/devtools-detector

데모 페이지를 확인해 보니 오감지도 없고 확실하게 감지된다. 깃허브를 둘러보니 친절하게 작동 방식도 소개하고 있었다.

작동 방식을 보니 console.log로 큰 데이터를 출력할 때 개발자 도구의 상태에 따라 성능 차이가 발생하는 점을 이용해서 감지하는 원리였다. 역시 세상엔 천재들이 많다.ㄷㄷ

아무튼 원리를 알고 나니 console.log를 손보면 되겠다 싶어서 console.log, console.table, console.clear를 빈 함수로 덮어씌우는 코드를 주입하고 나니 우회가 되었다. 짠~

스크립트 주입은 유저 스크립트를 만드려다가 애드가드로 해결했다. 필터링 룰 중에 스크립트 주입 기능이 있어서 룰 한 줄로 해결!

 

더 찾아보니 누가 브라우저 확장으로 만들어 둔 것도 있었다.

https://github.com/Andrews54757/Anti-Anti-Debug

GitHub - Andrews54757/Anti-Anti-Debug: Be able to use developer tools again on user-hostile websites

일부 사이트에서 호환성 문제가 있을 수 있다고 필요한 순간에만 활성화 하는 걸 추천한다고 한다.