brunch

You can make anything
by writing

C.S.Lewis

by 매스프레소 Oct 07. 2019

Web debugging tool Charles 사용법

안녕하세요. Mathpresso Product 팀에서 iOS 개발을 하는 Leo 라고 합니다. iOS에서 네트워킹 코드를 디버깅할 때 Charles를 사용하여 네트워크 요청을 변경, 검사하는 방법을 소개하려고 합니다.

Charles은 앱과 인터넷 사이에 위치하는 web proxy 툴입니다. 모든 네트워킹 요청은 Charles를 통해서 지나가고 해당 내용을 기록합니다. 또한 네트워크 요청과 응답값을 살펴보는 것이 가능하고 심지어 응답 값을 변경하여 클라이언트에 적용할 수 있습니다.

1. Getting Started

2. About Proxies

3. Valid Certification for Charles on device

4. Use Charles proxy on someone else’s app

5. Conclusion

1. Getting Started

먼저 최신 버전의 Charles을 다운로드합니다.(https://www.charlesproxy.com/download/). Charles 유료 버전 이지만 30일 일 동안은 체험판 버전으로 사용 가능합니다(Mathpresso 에서는 일할때 필요한 소프트웨어들을 지원해줍니다!!)

Note: Charles은 Java 기반의 앱으로 MacOS, Windows, Linux를 지원합니다. 해당 포스팅에서는 MacOS에서 사용 하는 방법을 설명하기 때문에 다른 플랫폼 에서는 사용법이 조금 다를 수 있습니다.

Charles를 실행하면 다음과 같은 Charles를 사용하기 위한 네트워크 자동 구성 설정에 대한 알럿창을 확인할 수 있습니다.

Grant Privileges를 클릭하고 비밀번호를 입력하면 Charles이 실행되자 마자 네트워크 이벤트 기록을 시작하고 왼쪽 패널에 기록된 이벤트를 확인 할 수 있습니다.

Charles의 주요 기능에 대한 인터페이스는 다음과 같습니다.

Charles에 대한 다른 주요 기능은 여기를 참조해주세요

1. 왼쪽부터 첫 번째 빗자루 버튼은 현재 기록된 모든 세션을 삭제 합니다.

2. 두 번째 버튼은 Network 세션을 기록/기록을 잠시 멈춤 기능 입니다. 버튼이 빨강색이면 기록중, 빨강색이 아닐때는 잠시 멈춤 상태 입니다.

3. 세 번째 거북이 버튼은 Throttling 기능입니다.

4. 네 번째 버튼은 특정 API 요청을 break-point로 지정하여 요청과 응답 값을 검사/수정 하는 기능입니다.

5. 다섯번째 버튼은 Network Request 생성 기능입니다

6. 여섯 번째 버튼은 선택된 요청을 재요청합니다. 그 외 버튼들은 툴 설정에 대한 내용이고 각 버튼에 마우스를 올려놓으면 간단한 설명을 볼 수 있습니다.

왼쪽의 Structure / Sequence 버튼을 눌러서 기록된 세션을 그룹화/단일화하여 볼 수 있습니다. 사용자 인터페이스를 둘러보고 이벤트를 살펴보면 이상한 점을 알아차리게 될 것입니다. HTTPS 이벤트에 대한 세부사항을 볼 수 없는 것입니다.

SSL/TLS는 민감한 요청/응답 정보를 암호화 합니다. 하지만 Charles은 이 암호화를 무력화 시키는 방법을 가지고 있습니다. 이 방법은 3.Valid Certification for Charles on device, 4. Use Charles proxy on someone else’s app 에서 배우게 됩니다.

2. About Proxies

Charles는 프록시 서버이기 때문에 앱/컴퓨터와 네트워크 연결 사이에 위치함을 의미합니다. Charles를 실행할 때 자동 Network 설정에 동의했다면 모든 Network Request들이 Charles을 통하도록 네트워크 설정을 변경합니다. 이를 통해서 디바이스에서 요청하는 모든 네트워크 이벤트를 Charles이 기록 하고 검사할 수 있습니다.

SSL(Secure Sockets Layer)이 중요한 이유중 하나는 데이터 암호화 입니다. 데이터 암호화는 민감한 정보를 도청하는 프록시 서버와 같은 미들웨어를 방지합니다.

우리는 Charles를 이용하여 SSL 메시지를 훔쳐보고 디버깅을 하고 싶습니다. SSL/TLS는 certificate issuer라고 불리는 제3의 신뢰성이 인가된 생성자가 생성한 인증서를 사용하여 메시지를 암호화합니다.

Charles는 iOS와 MacOS 기기에 신뢰 된 SSL/TLS 암호화 인증서를 생성하여 제공합니다. 신뢰할 수 있는 인증서 발행자가 인증서를 발행하지 않을 때에는 명시적으로 디바이스에 인증서를 신뢰하도록 지시할 수 있습니다. Charles에서 제공한 인증서를 디바이스에 설치하면 Charles이 해당 디바이스에서 요청하는 SSL 이벤트를 해독할 수 있습니다.

해커가 네트워크 통신망을 염탐하기 위해 미들웨어를 사용하는 방법을 man-in-the-middle attack 이라고 합니다. Charles은 man-in-the-middle attack 전략을 사용하는데, 이 전략이 효과가 없을때가 있습니다. 예를 들어 앱의 보안을 강화하기 위해 SSL Pinning(HTTP Public Key Pinning)방법을 사용 하는 경우 입니다.

SSL Pinning은 서버와 클라이언트 사이에서 인증서가 위/변조되어 사용되는 것을 막기 위해 클라이언트에서는 서버에서 인가된 인증서를 등록하여 네트워크 요청 시 해당 인증서가 아니면 서버에서 막아버리는 방법입니다.

이제 기본적인 배경지식은 충분합니다. 다음 색션에서 Charles이 제공하는 인증서를 디바이스에 설치하는 방법을 배우고 Charles을 사용할 시간입니다.

3. Valid Certification for Charles on device

1. iOS 디바이스에서 발생하는 Network 트레픽을 Charles로 대리하는 방법 설정은 간단합니다. 먼저 proxy/MacOS proxy를 클릭하여 disabled 합니다.

2. Proxy/Proxy Settings을 클릭하고 Proxise 색션의 Port 숫자를 8888로 설정합니다.

3. Help/Local IP Addres를 클릭하여 현재 연결된 Network의 IP를 확인합니다.

4. 이제 iOS 디바이스의 Setting을 열고 Wi-Fi를 탭 하여 와이파이 옆에 ⓘ 버튼을 탭하고 HTTP Proxy 색션을 Manual로 선택합니다. 그리고 3번에서 확인한 IP주소를 입력합니다.

5. iOS 디바이스에서 Safari를 열고 http://www.charlesproxy.com/getssl을 가면 Profile/Certificate를 설치하라는 메시지 팝업창이 나타납니다. 해당 인증서를 설치하면 다음과 같이 자체 서명된 Charles 인증서를 볼 수 있어야 합니다.

4. Use Charles proxy on someone else’s app

Charles을 사용하여 테스트 해볼앱은 미세미세 라는 날씨 앱입니다. App Store에서 미세미세 앱을 다운받습니다.

앱을 켜면 Charles이 앱의 현재 화면에서 요청하는 API 세션 목록을 볼 수 있습니다. 그중 이미지에 표시된 /fineDust/v1/data/getDataUsingcoordinate을 클릭하여 오른쪽 마우스 클릭 후 brackpoints를 설정합니다. 그러면 해당 주소의 API 요청이 있을때마다 중간에서 요청/응답 값을 변경 할수 있게 해줍니다.

앱을 pull to refresh 하면 Breakpoint 설정했던 요청을 검사할 수 있는 화면을 볼 수 있습니다. 해당 화면에서 Request 요청 -> Response 응답 값을 변경하여 클라이언트에 적용 할 수 있습니다.

다음과 같이 설정하고 실행하면, 변경한 응답값이 적용됩니다.

현재 주소가 변경된 응답값으로 적용

다음은 네트워크 Throttling 테스트 입니다. Throttling 테스트를 하기 위해 Charles 상단 인터페이스의 거북이 아이콘을 클릭하면 Throttling을 시작합니다. Proxy/Throttle Settings을 클릭하면 Throttling 테스팅시 사용가능한 옵션들을 설정할수 있습니다. 여기에는 데이터 손실, 안정성, 대기시간 등을 설정하여 실험할 수 있습니다.

Apple또한 Throttling 테스팅을 할수 있는 Network Link Conditioner을 제공하지만 Charles은 더욱 세밀한 설정이 가능합니다. 예를 들면 전체 Network 속도를 느리게 하는 대신 특정 URL에만 Throttling을 적용할수 있습니다.