Charles로 Proxy 환경 구축하기

[JaeYeopHan]

:tada: Charles for debugging

• Charles 라는 Proxy debugging tool 사용법에 대해 정리한다.
  • 4.0.x version에는 Map local한 파일이 전부 load되지 않는 버그가 존재한다.
  • 이 tutorial에서 사용한 version은 4.2.6 (18.06.26 기준 최신 버전)
• 이미 js가 실서비스에 배포된 상태에서 로컬의 js 파일을 수정하고 반영하며 디버깅이 필요한 경우 사용한다.
• charles의 official document는 매우 #구리다.
• mac에서의 proxy setting 은 charles setting 만으로 끝나지만 모바일 디바이스 기기는 모바일 디바이스 프록시 설정도 별도로 필요하다. 우선 mac에서의 charles 설정부터 진행한다.

:rocket: Charles Setting

• Charles Application이 설치되어 있어야 한다. 아래 링크에서 download 할 수 있다.
  • https://www.charlesproxy.com/download/

1. Start Charles

2. Charles SSL 인증 설정을 한다.

2-1. 다음 링크에서 Charles Certification을 설치한다.

• http://www.charlesproxy.com/getssl

2-2. 다음 경로로 '키체인 접근'으로 들어간다.

2-3. '키체인 접근'에서 Charles Proxy CA를 double click 한다.

2-4. '이 인증서 사용 시', '항상 신뢰' 옵션으로 변경한다.

3. macOS Proxy를 활성화 시킨다. (단축키는 shift + cmd + p)

활성화시키게 되면 chrome(browser)에서의 네트워크를 tracking 한다. Charles를 구동하면 자동으로 Recording이 시작되기 때문에 바로 tracking이 되는 것이므로 Recording 상태가 아니라면

여기에서 동그란 버튼을 클릭하여 빨갛게 만들어줘야 한다. (단축키는 cmd+R)

4. 디버깅하고자 하는 웹 페이지를 연다.

좌측의 Structure 탭에서 리소스의 이동을 확인할 수 있다. (tracking)

5. 디버깅 하고자 하는 페이지의 url에 Enable SSL Proxying을 해준다.

6. 디버깅 하고자 하는 페이지의 수정하고자 하는 리소스에 Map local을 설정해준다. (우측 버튼 클릭)

• Local path 부분에 수정하고자 하는 local path를 choose한다.
• 현재 mapping 되어 있는Map local 목록을 보기 위한 단축키는 (cmd + alt + L). 다음과 같이 목록이 나타나게 되며 추가하거나 삭제할 수 있고 활성화 상태를 변경할 수 있다.

=> Map local을 적용하게 되면 repuest에 대한 response를 local 파일로 전달하게 된다. Mac에서만 proxy를 설정하려면 이렇게 해주면 끝!

모바일 디바이스에서 Charles를 사용하려면 디바이스에서의 setting이 추가적으로 필요하다! (ㅜㅜ)

---

:rocket: Android device setting

1. 디바이스의 '설정'으로 들어가서 WIFI setting을 해줘야 한다.

1-1. WIFI 설정에서 프록시 설정 을 수동으로 바꿔준다.

1-2. 저버전에서는 '고급 옵션 보기'를 활성화시켜줘야 프록시 설정을 할 수 있다.

1-3. 프록시 설정에서는 IP Address(서버)와 Port Number(포트)를 설정해준다.

2. 서버 설정을 위해 IP Address를 setting 해준다. 그 때 다음 메뉴에서 IP주소를 확인할 수 있다.

위 메뉴에서 Install Charles Root Certificate Device or Remote Browser를 클릭하면 다음과 같은 메시지가 나온다.

이 메세지에서 IP Address를 확인할 수 있다.

3. 위 메세지에 나와있는 crls.pro/ssl 에서 인증서를 설치한다.

브라우저에서 위 링크(http://crls.pro/ssl)를 통해 바로 설치가 가능하다.

4. 포트(Port Number)를 설정해준다.

• Charles에서 default Port Number는 8888이다.
  • 그래서 그냥 8888로 설정해주면 된다.
• Proxy Setting에서 Charles의 port number를 변경하여 다른 포트 넘버를 사용할 수 있다. 다음 메뉴를 통해 들어갈 수 있다.
• Proxy Setting을 누르면 다음과 같은 창이 나타나고 이 창에서 port number를 지정할 수 있다.

5. Allow access

• setting이 끝나고 나면 Charles에서 해당 접근을 허락할 것인지에 대한 메세지 창이 나타난다.

Allow 해주자. 여기서 Allow된 목록은 [Proxy] -> [Access Control Settings]에서 다음과 같이 확인할 수 있다.

---

iOS device setting

iOS의 경우도 Android 설정 방법과 비슷하다. 그래서 자세한 설명은 생략한다. 다만 '인증서 신뢰 설정'이라는 하나의 단계가 추가된다.

1. 마찬가지로 crls.pro/ssl 에서 인증서를 설치한다.

2. WIFI 설정에서 프록시 구성을 '수동'으로 한 후, IP Address와 Port number를 설정한다.

3. [프로파일 및 기기 관리]에서 인증서 설치가 되었는지 확인한다.

4. 그리고 나서 인증서 신뢰 설정에서 인증서를 활성화 시킨다.

• [설정] - [일반] - [정보] - [인증서 신뢰 설정]

---

:gift: Tip

• Proxy를 걸고자 하는 url에 Focus를 해주면 나머지는 Other Hosts로 분류되어 보기 편하다.

:pray: Useful References

• https://medium.com/@hackupstate/using-charles-proxy-to-debug-android-ssl-traffic-e61fc38760f7
• https://www.raywenderlich.com/154244/charles-proxy-tutorial-ios
• http://help.testlio.com/testing-with-testlio/capturing-network-logs/charles-proxy-guide-for-ios