찰스 프록시(Charles Web Debugging Proxy)를 이용한 웹 디버깅
Charles proxy
찰스 프록시는 앱과 웹 사이에 위치하여 모든 네트워크 요청과 결과를 확인할 수 있고, 요청값을 수정하여 실제로 요청을 송신하고 결과를 즉각적으로 확인할 수 있는 프로그램입니다.
(+) 추가 수정
외부 어플리케이션의 통신을 확인해 부당한 목적으로 사용하는 것은 잘못된 행동입니다. 따라서 이 후 본문에서는 어떤 방식으로 활용이 가능하며, 사용하는에 대한 자세한 사용법은 제외하며 초기 설정에 대해서만 다루도록 하겠습니다. 사용 시 발생하는 문제는 본인에게 있음을 잊지말아주세요.
특징
1. 앱과 웹간 통신이 목적대로 동작하는지 확인 가능
2. 요청 시 발생하는 params 와 요청 결과를 확인 가능
3. 코드단에서 수정할 필요없이 프로그램 내에서 즉각적으로 요청을 수정하여 작동 여부 및 결과 확인 가능
찰스 설치 및 초기설정
설명은 Mac OS를 기준으로 합니다.
설치하기
링크 : https://www.charlesproxy.com/
위 링크에서 접속하여 최신버전을 설치합니다. 30일동안은 체험판으로 무료 사용이 가능하며, 체험판은 30분마다 프로그램을 재실행해주어야 한다는점을 빼면 유료판과 동일한 기능을 사용할 수 있습니다.
실행 및 초기설정
<초기화면>
찰스를 실행시키면 위와 같은 화면이 나타나며 우측 상단 트레이에 물병모양의 아이콘이 등장합니다. 각 버튼의 기능은 사진과 같습니다.
1.실행시키자마자 mac에서 발생하는 무수히 많은 요청들이 기록되기 시작할텐데, 우리가 확인하려는 건 스마트폰 내 앱의 웹 통신이기 때문에 로컬 mac의 요청을 꺼줍니다. 트레이에 물병모양을 눌러보시면 MAC OS PROXY 부분에 체크가 되어 있을텐데 이를 해제합니다.
2.메뉴에 proxy -> proxy settings를 클릭하고 HTTP Proxy Port 를 8888 로 설정합니다. (다른건 건드실 필요 없습니다.)
3.다시 charlse 메뉴의 help -> Local Ip address 를 클릭하여 IP address를 확인합니다.
4.연결하려는 스마트폰을 mac과 동일한 와이파이에 연결합니다.
5.스마트폰 연결된 와이파이 정보에서 ⓘ 를 누르고 최하단에 있는 HTTP 프록시/프록시 구성을 수동으로 바꿔줍니다.
6.서버에 3에서 확인한 IP address를 입력하고, 포트는 888을 입력합니다.
7.스마트폰에서 인터넷브라우저를 실행하고 "www.charlesproxy.com/getssl" 에 접속하여 인증서를 설치합니다.
8.설정/일반/정보 최하단 프로파일에서 charles Proxy CA 인증서를 확인하고 서명여부를 확인합니다.
9.수 초 ~ 수 분내에 mac에 실행된 찰스 프록시에서 allow 여부를 묻습니다. allow를 클릭해주시면 스마트폰에서 발생하는 모든 웹 요청을 확인할 수 있습니다.
10.확인하고자 하는 앱의 요청을 클릭하면 overview가 나타납니다. URL을 복사합니다.
11.메뉴의 Proxy -> SSL Proxying Settings 를 클릭 후 Enable SSL Proxying 을 활성화 한 뒤 include에 복사한 URL을 추가합니다.