크롬에서의 크롬 개발자 도구 프로토콜(CDP, Chrome DevTools Protocol)은 개발자가 크롬 브라우저와 통신하여 상태 검사, 동작 제어, 디버깅을 수행하는 API이며 해당 기능을 통해서 많은 부가적인 작업을 수행할수있게된다.
간단하게 복사 방지를 해제 하기 위해서 개발자도구를 실행한다던지 크롤링을 수행한다던지, 웹 페이지의 자동화된 작업을 수행하던지 다양한 곳에서 개발자들이 사용하게 된다.
요 근 레에 코레일 홈페이지의 개편이 있었다.
레츠코레일이라는 홈페이지 브랜드? 이것이 사라지고 코레일 홈페이지로 철도공사 페이지, 예매 등 사이트가 통합되었다.
여느떄와 다름없이 개발자로써 변경된 구조가 궁금하여 개발자도구를 키는 순간, 페이지는 차단되었다.
개발자도구 프로토콜 CDP를 감지하였기 때문이였다.
CDP란?
우리가 사용하게 되는 개발자 도구를 크롬에서 실행함으로써 동작하게 되는 프로토콜이다. 개발자 도구는 접속하고 있는 페이지의 렌더된 html 코드, 사용중인 css, 주고받은 페이로드 등 웹 개발을 하면서 필요한 모든 도구들이 모여있다.
보통 셀레니움(Selenium)이나 퍼피티어(Puppeteer) 같은 자동화 라이브러리들도 결국 내부적으로는 이 CDP를 사용하여 브라우저에게 명령을 내리고 정보를 받아온다. 즉, 브라우저를 코드로 제어할 수 있는 '리모컨' 같은 역할을 하는 셈이다.
보통의 웹사이트라면 굳이 개발자 도구를 막지 않는다. 하지만 코레일은 상황이 좀 다르다. 명절 기차표 예매나 인기 노선의 티켓팅에서 매크로(Macro) 프로그램이 기승을 부리기 때문이다.
매크로 프로그램들은 대부분 이 CDP를 통해 브라우저를 제어하여 사람보다 빠르게 클릭하고 예매를 시도한다. 그러니 보안 솔루션 입장에서는 "CDP가 활성화되었다 = 매크로일 확률이 높다" 라고 판단하고 접속을 끊어버리는 것이다.
감지 원리
보안 솔루션들이 CDP 사용 여부를 감지하는 방법은 다양하다.
- navigator.webdriver 플래그 확인: 자동화 도구로 브라우저가 실행되면 이 값이 true로 설정되는데, 이걸 체크한다.
- 콘솔/디버거 탐지: 자바스크립트로 debugger; 구문을 실행시켰을 때 반응 속도를 체크하거나, console 객체의 메서드를 오버라이딩하여 감시한다.
- 윈도우 크기 감지: 브라우저 내부 창 크기(innerWidth)와 외부 창 크기(outerWidth)의 차이를 계산해서 사이드에 개발자 도구가 열려있는지 추론하기도 한다.