크롬을 이용한 모바일웹 디버깅 및 분석 방법

출처: http://teamcrak.tistory.com/category/%EC%8A%A4%EB%A7%88%ED%8A%B8%ED%8F%B0

웹 모의해킹 시 개발자도구를 이용한 웹 애플리케이션 분석으로 로직에 허점을 발견하거나 DOM영역에 대한 변조를 통해 취약점을 찾는 등 분석을 하기 위해서는 다양한 방법이 존재합니다. 모바일 웹도 이처럼 브라우저를 이용하여 디버깅을 하거나 로직을 분석할 수 있는 방법이 있어 소개하고자 합니다.

주제: 크롬 브라우저를 이용한 모바일 웹 디버깅 및 분석 방법 소개

 1. 환경구성

 2. inspect를 이용한 mobile web remote debugging

 3. 크롬브라우저를 이용한 mobile web debugging

1. 환경구성

- Chrome 버전 32 이상 설치 된 PC  - 안드로이드 4.4 이상에서 크롬 설치  - USB 디버깅 허용

2. Inspect를 이용한 Mobile web remote debugging

PC와 스마트폰을 연결 후 환경구성이 되면 크롬 브라우저 주소창에 chrome://inspect 를 입력합니다.

그 후 안드로이드 기기에서 크롬 브라우저를 실행 후 분석하고자 하는 대상 사이트로 접속합니다.

<그림1> 모바일에서 크롬브라우저 실행

inspect 버튼을 누르면 모바일에서 실행되는 사이트에 대한 remote debugging을 할 수 있게 됩니다.

<그림2> 크롬 브라우저 inspect 실행

다음과 같이 모바일 웹에 대한 디버깅 혹은 로직 분석이 가능하게 됩니다.

간단하게 breakpoint를 설정하고 모바일 웹에 대한 로직 분석을 하였습니다.

<그림3> 모바일 웹 디버깅 및 로직 분석

모바일 웹 사이트에 대한 함수 분석이나 스탭별 실행을 하여 로직 분석에 용이합니다.

<그림4> 모바일 웹 사이트 함수 및 실행 로직 분석

쿠키값 혹은 리소스 정보들을 확인할 수 있습니다.

<그림5> 모바일 사이트 내 리소스 정보 확인

 

Webview를 사용하는 앱에 대해서 분석할수 있습니다.

앱에 Webview debugging이 활성화 되어있어야 합니다. 코드패치나 소스수정을 통해 webview debugable을 true로 설정합니다.

<그림6> WebView를 사용한 앱에 대한 분석

inspect 버튼을 누르면 다음과 같이 디버깅 할 수 있는 화면에 접근하게 됩니다.

<그림7> Webview를 사용하는 모바일 앱에 대한 분석

3. 크롬브라우저를 이용한 mobile web debugging

모바일 웹에 대해서 스마트폰을 이용해서 분석을 할 수도 있지만 크롬 브라우저 내에 설정을 변경하여 모바일 웹에 대한 디버깅 및 분석을 할 수있는 방법도 존재합니다.

먼저 크롬 브라우저에서 F12 버튼을 누른 후 아래 그림과 같이 스마트폰 모양의 아이콘을 클릭합니다.

그 후에 Device 선택을 할 수 있는데, 환경에 맞는 Device를 설정하면 됩니다.

<그림8> 모바일 사이트 분석을 위한 크롬브라우저 설정 변경

breakpoint를 적용하여 로직 분석하거나 DOM영역에 대한 분석이 가능합니다.

<그림9> 모바일 사이트 로직 분석

콘솔로 정의된 함수를 확인하거나 파라미터 값들을 확인합니다.

<그림10> 모바일 웹 함수 분석

Async를 활성화해서 콜스택을 살펴봅니다.

<그림11> 호출 스택 확인 및 디버깅

이렇게 크롬 브라우저를 이용하여 모바일 웹에 대한 분석을 하고 다양한 방법으로 취약점에 대한 접근을 할 수 있게 됩니다.

모바일 웹에 대한 분석 환경은 크롬 브라우저를 통한 방법 이외에도 다양하게 있고, 저희 팀크랙에서는 상황에 맞춰 보다 효율적인 방법으로 취약점을 찾고 있습니다.

감사합니다.

참고자료

https://developer.chrome.com/devtools/docs/remote-debugging