Programming

Charles Proxy 사용법 + 암호화 해제 방법

YK Choi 2022. 9. 4. 21:48

개발을 하다보면 클라이언트에서 api 요청을 제대로 보냈는지, 그에 대한 response는 잘 왔는지 테스트하고 싶을 때가 있다.

(postman이랑은 다른것은 postman에서 요청하는 request와 동일하게 클라이언트에서 개발한것이 전송되지 않았을 가능성도 고려할 수 있다. 그리고 관심갖지 못했던 다른 api 들에 대해서도 감지할 수 있다.)

 

Charles 설치, 사용법과 암호화 해제법에 대해 작성하려 한다.

 

목차는 아래와 같다.

1. Charles 설치

2. Android 기기를 노트북과 network 연결

3.  노트북에 CA 설치

4. Android 기기에 CA 설치

5. SSL Proxy 설정

 

0. Charles Proxy에 대하여

Charles 와 같은 프록시 프로그램은 기기에서 발생하는 네트워크를 Proxy(대리자)를 거쳐서 이루어지게 하여, 그 사이에서 Proxy 프로그램이 어떤 데이터들이 오고가는지를 보여주거나 break point를 걸어 디버깅에 용이하게 하는 툴이다. 따라서 Charles 는 컴퓨터(노트북 or 데스크탑)에 설치하는 프로그램이고, 클라이언트 기기는 노트북에 연결되어야한다. 연결하는 방법은 같은 와이파이 Acess Point 에 연결한 후 기기에서 프록시설정을 하면 되는데 자세한건 아래에 적겠다.

 

 

1. Charles 설치

https://www.charlesproxy.com/download/ 사이트에서 OS에 맞게 설치한다.

 

 

2. 디바이스를 컴퓨터에 연결

  • 우선 컴퓨터와 핸드폰이 동일한 와이파이 AP(Access Point)에 연결되어 있어야한다. 왠만하면 공유기가 같으면 될 것이다.
  • 컴퓨터의 ip 주소를 파악한다. cmd나 터미널로 확인할 수도 있겠지만 charles에서는 help > local IP address 를 보면 친절하게 알려준다.
  • 디바이스를 (위에서 파악한)컴퓨터의 ip 주소에 연결한다. 프록시 포트 번호는 8888 로 두면 되는데 Charles 프로그램에서 Proxy > Proxy Settings 에 포트번호와 동일하면 된다. (default가 8888임)
  • 연결이 끝나면 Charles 프로그램에 기기에서 발생한 네트워크들이 감지가 될 것이다. 아마도 http:// ~~ 의 데이터들은 request와 response 값이 보일 수는 있지만, 아직 https 와 같은 암호화된 데이터는 보이지 않을 것이다.(암호화되어 unknown으로 보일 것이다)

 

이 과정(디바이스를 컴퓨터에 연결 과정)은 Charles가 처음이라면 조금 오래 걸릴 수도 있다.

 

 

 

 

이제부터는 Charles 에서 unknown이라고 뜨는 데이터들을 볼 수 있게 하는 방법들이다. (암호화 해제)

 

 

3. 컴퓨터에 CA 를 설치한다.

Charles에서 help > SSL Proxying > Install Charles Root Certificate 클릭하면 아래와 같은 창이 뜬다.

 

추가 클릭

Charles Proxy CA ... 더블클릭

 

'이 인증서 사용 시' 를 "항상 신뢰"로 변경

 

따라오기 어렵다면 관련된 짧은 유튜브 영상을 첨부한다. 노트북에 CA 설치는 1분 30초 정도 까지만 보면 되고, SSL 연결은 아래쪽에 작성하였다.

 

 

4. Android 기기에 CA 설치

나에게 가장 많은 시간 소요을 하게 해준 단계이다. 인증서 설치가 잘 안된다.

Web 디버깅만 한다면 이 과정은 없어도 되겠지만 안드로이드 네트워크를 디버깅하고 싶은 상황이었다.

Charles에서 help > SSL Proxying > Install Charles Root Certificate on a Mobile Device or Remote Browser 를 클릭하면

아래와 같이 뜬다. browse to chls.pro/ssl 라고 적혀있듯이 접속하여 다운로드 한다.

 

Android 기기에서 아무 브라우저를 열어(삼성브라우저 등) https://chls.pro/ssl 로 접속하고, 인증서를 다운로드 한다.

(주의) Charles와 연결되어 있어야 다운로드가 진행된다!!!

그리고 열어보면 아래와 같은 화면이 뜰 것이다. 파일은 다운로드 되지만 CA 인증서로는 인정할 수 없다는것 같다.

 

당황하지말고 기기의 설정 앱에 들어간다.

설정앱 > 생체 인식 및 보안 > 기타 보안 설정 > 기기에 저장된 인증서 설치 > CA 인증서 > 계속 설치 > 다운받았던 파일 선택 > 끝

 

스크린샷은 내가 찍기 귀찮아서 도움받은 링크의 페이지를 스크린샷했다.

 

 

5. SSL 프록시 세팅

Charles 에서 Proxy > SSL Proxy Settings 에 들어가서 원하는 api의 정보를 넣는다. (base URL 등)

이런식으로 넣고 OK를 누른다. 유동적인 부분은 * 를 쓰면 된다.

이 작업에서 추가한 url 에 해당하는 api 들은 unknown 이 아니라 암호화가 해제되어 실제 데이터값들이 폴더구조와 함께 보일 것이다.

위에도 첨부했던  유튜브 영상의 1분 30초 뒷부분이 해당 내용이다. 

 

 

추가 정보

https://www.charlesproxy.com/documentation/using-charles/ssl-certificates/ 에 의하면 Android N 부터 내가 제어할 수 있는 앱만 SSL Proxying을 할 수 있다고 한다. 

 

 

 

 

TMI

1. 아래 사진과 같이 macOS Proxy 을 체크하면 컴퓨터의 네트워크 관찰을 할 수 있다.

안드로이드 디바이스의 네트워크만 디버깅하고 싶다면 체크 해제하면 된다. 

2. 유튜브 등의 일부 앱은 proxy로 연결하면 네트워크 연결이 안된다. 

3. release 빌드에서도 charles로 관찰하고싶다면 이 글을 참고하자

https://medium.com/@jplipata/using-charles-proxy-on-an-android-release-build-2fd7be125674

 

도움된 사이트

https://github.com/JaeYeopHan/tip-archive/issues/33

https://devmjun.github.io/archive/Charles

https://www.youtube.com/watch?v=g1IQTuiPWZQ 

https://gall.dcinside.com/mgallery/board/view/?id=wonyeong&no=368388