[devtools-detector] javascript로 개발자도구 탐지방법

 

머릿말

일반적으로 개발자도구를 탐지하는 이유는 Client 단 소스코드를 분석하기 어렵게 만들기 위해서라고 생각하는데요. 근데 사실 이게 정말 애매한 게 보통 Client 단 소스코드를 분석하기 어렵게 하기 위한 방법으로는 소스코드 난독화를 주로 합니다. 근데 이제 이 난독화도 결국에는 프로그래밍 언어로 이루어진 코드이기 때문에 역으로 분석도 가능하겠죠. 그래서 다시 개발자도구를 그럼 사용하지 못하게 해보자 같은 생각을 하게 되고, 사실상 Client 단에서 아무리 막으려고 해봤자 우회할 수 있는 방법은 많습니다. 그래서 보통 일반적으로 백신과 같은 프로그램에서 개발자도구를 막곤 하지요.

 

아마 왠만한 은행이나 공공기관 웹 사이트 들어가보면 개발자도구를 키는 순간 강제로 개발자도구를 종료시켜버리는 것을 확인하실 수 있을 겁니다.

 

단순히 소스코드를 보기 위해서는 크롬 브라우저에서 단축키 Ctrl+U 를 누르면 소스코드를 볼 수 있지만, 개발자도구가 지원해주는 각종 다양한 응용이 가능한 디버깅, 메모리 확인, 구조 분석, 네트워크 스니핑, 성능 분석 등을 할 수가 없어서 많이 번거롭겠지만 소스코드 자체는 개발자도구 없이 볼 수 있긴 합니다.

 

서두가 길었는데 이제 본격적으로 개발자도구 탐지하는 라이브러리 사용법에 대해서 다뤄보겠습니다.

참고로 탐지 원리에 대해서는 다른 포스팅에 대해서 다뤄보려고 합니다.

 

개발자도구 탐지 라이브러리 사용법

개발자도구를 탐지하는 라이브러리는 몇년을 걸쳐서 또 많은 브라우저 버전 업데이트에 걸쳐서 계속해서 업데이트되고 다시 제 기능을 하지 못하게 되고, 다시 새로운 방법을 찾아서 업데이트되고, 여러 사람들이 참여해서 만들어내곤 하다 보니 여러 버전이 생겼습니다.

 

그 중에서 지금 시간 기준으로 가장 잘 동작한다고 생각하는 라이브러리 하나를 소개드리겠습니다.

아마 구글에 devtools-detector 라고 쳐보면 바로 최상단에 노출되는 github 주소일텐데요.

https://github.com/AEPKILL/devtools-detector

GitHub - AEPKILL/devtools-detector: Detect if DevTools is open

 

이곳에 올라와있는 라이브러리가 제가 생각하기에 현재 시점으로 가장 잘 동작하는 개발자도구 탐지 라이브러리인 것 같습니다.

 

사용법에 대해서는 위 github에서 더 자세하게 나와있지만, 저는 이제 HTML 태그로 구성된 환경에서 어떻게 적용할 수 있는지 살펴보겠습니다.

<script src="./devtools-detector.js"></script>
<script>
  devtoolsDetector.addListener(function(isOpen) {
    isOpen
      ? console.log('devtools is opened.')
      : console.log('devtools is closed.');
  });
  devtoolsDetector.launch();
</script>

우선 devtools-detector.js 를 script 태그로 import 해옵니다. 그리고 Event Listener 를 등록해주는데요. 만약에 개발자도구가 열려있다면 isOpen 이라는 변수에 true 값이 들어가게 됩니다. 그 반대라면 false 가 들어가겠죠.

 

github에는 아예 build를 할 수 있는 프로젝트의 전체 소스코드가 나오기 때문에 간단하게 테스트해보기 위해서는 아래코드를 import 해서 사용하면 됩니다. 아래 코드는 github에 나온 DEMO 페이지에서 업로드되어 있는 javascript 파일입니다.

https://blog.aepkill.com/demos/devtools-detector/devtools-detector.js

 

아니면 그냥 아래 DEMO 페이지에서 테스트 해보셔도 됩니다.

https://blog.aepkill.com/demos/devtools-detector/

devtools-detector demo

 

다른 라이브러리 중에서 devtools-detect 라는 npm package list 에 등록된 모듈이 있는데, 해당 모듈은 현재 기준으로 아직 완벽하게 탐지하지 못하는 부분이 있는 것 같았습니다. devtools-detect 모듈과 devtools-detector 모듈의 가장 큰 차이점으로는 date-to-string 기법으로 확인하는지의 여부인 것 같습니다. 해당 기법을 활용한 탐지 방법에 대해서는 이번 글에서는 따로 다루지 않겠습니다.

 

주의사항

한동안 제 블로그에 이 devtools-detector 을 적용해보았는데요. 몇일을 두고보니 블로거라면 정말 주의해야할 점이 보였습니다. 블로거한테는 검색엔진에 포스팅이 색인이되고 검색엔진을 사용하는 사용자들에게 글이 노출되는 것에 정말 신경을 많이 쓸텐데요. 바로 이 점에서 devtools-detector 라이브러리가 사소한 문제를 발생시킵니다. 어떤 이유에서인지는 아직 정확히 확인이 되지 않았는데요, 이 라이브러리가 검색엔진의 크롤러가 접근해서 블로그 페이지를 확인하는 것을 제한하는 것 같았습니다. 실제로 여러번 실험해본 결과 devtools-detector 을 적용하고서 검색엔진 크롤러에게 포스팅에 대해 색인요청을 했을 때 알 수 없는 오류로 색인 처리에 실패했다고 오류가 났고, 다시 적용을 하지 않고서 바로 시도했을 때는 되는 것을 확인할 수 있었습니다.

 

만약 저와 같이 Front-end 에 devtools-detector 를 탑재하고 싶은데 검색엔진에게 만큼은 제한을 해제하고 싶은 경우에는 User-agent 값을 확인해서 만약 User-agent 가 bot 종류의 것이라면 devtools-detector 를 실행하지 말게끔 구현하시면 될 것 같습니다.

 

검색엔진의 크롤러 봇 탐지 방법에 대해서는 아래 포스팅을 참고하시면 되겠습니다.

https://domdom.tistory.com/entry/javascript-%EA%B2%80%EC%83%89%EC%97%94%EC%A7%84%EC%9D%98-%ED%81%AC%EB%A1%A4%EB%A7%81-%EB%B4%87-%ED%83%90%EC%A7%80-%EB%B0%A9%EB%B2%95

[javascript] 검색엔진의 크롤링 봇 탐지 방법

 

- 끝 -