Proxyman 살펴보기

Proxyman의 주요 기능과 동작 방식을 소개하여 웹 개발 시 HTTP/HTTPS 트래픽 디버깅에 도움을 드리고자 합니다.

Contents


이 글은 사내에서 공유한 자료를 정리하여 재업로드한 자료입니다

개요


  개인적으로 개발할 때 Proxyman 이라는 소프트웨어를 자주 사용하는데, 이에 대해 간단히 알고싶다는 요청이 있어, 간단히 소개하는 글을 작성해 보았습니다. 가벼운 마음으로 읽어주시면 감사하겠습니다. 🙇


Proxyman의 동작방식


  Proxyman은 HTTP/HTTPS 트래픽을 캡처하고 분석하는 데 사용되는 패킷 캡처 프로그램입니다. Proxyman의 원리는 프록시 서버와 같은 방식으로 동작합니다. 프록시맨은 로컬에 프록시 서버를 구성하여, HTTP/HTTPS/Websocket 요청을 프록시 서버를 거쳐 보내게 설정합니다. 프록시 서버는 어플리케이션들이 전송하는 네트워크 패킷을 파싱하여, 유저가 보기 쉽게 UI 로 보여줍니다. 실제로, Proxyman 소프트웨어를 활성화한 후 네트워크 설정에 들어가 보시면, Web Proxy 가 활성화 된 것을 확인할 수 있습니다.

Proxyman 은 기본적으로 127.0.0.1:9090 에 프록시 서버를 생성합니다.


추가로 Fiddler, Burp Suite 와 같은 소프트웨어로도 비슷한 기능을 사용할 수 있습니다.



HTTPS


  간단한 HTTP/1.1 요청은 평문 형태로 전송되므로, 프록시 서버를 통해 손쉽게 어떠한 패킷이 전송되고 수신되었는지를 쉽게 알 수 있습니다. 하지만 프록시맨은 SSL이 적용된 HTTPS 요청을 어떻게 가로채는 것일까요? 프록시맨은 MITM(Man-In-The-Middle) 보안 공격과 유사한 방식을 사용하여, SSL 이 적용된 요청도 암호화/복호화 할 수 있습니다.

먼저 MITM 공격이 어떠한 과정을 통해 이루어지는지 간단히 살펴보겠습니다.

출처: Wikipedia


1. Alice 는 Bob 에게 암호키(공개키)를 달라고 요구한다. 하지만 사실은 Mallory 가 이를 가로채어, 자신의 암호키를 반환한다.
2. Alice 는 Mallory 의 암호키를 받는다. Alice 는 이것이 Bob 의 암호키라고 생각한다.
3. Mallory 는 Alice 인 척 하면서 Bob 에게 암호키(공개키)를 요구한다. 
4. Bob 은 Mallory 가 Alice 인 줄 알고, 자신의 암호키를 반환한다.
5. Alice 는 자신의 개인정보를 Mallory 의 암호키로 암호화하여, Bob 에게 전송한다. (하지만 사실 받는 대상은 Mallory이다.)
6. Mallory 는 자신의 비밀키를 사용하여, Alice 가 암호화하여 전송한 정보를 복호화한다. Alice 의 개인정보를 탈취한다.
7. Mallory 는 (4)에서 받은 Bob 의 공개키로 암호화하여 Alice 인 척 하며 Bob 에게 요청을 전송할 수 있다.


위의 MITM 공격 시나리오를, Proxyman 어플리케이션을 사용할 때 다음과 같이 비유할 수 있습니다.


| MITM 공격 상황 | 패킷 캡쳐 상황 | | --- | --- | | Alice | 사용자의 로컬 PC | | Mallory | 패킷 캡쳐 프로그램 | | Bob | 접속할 웹사이트 |

  프록시맨 설치 메뉴얼 을 살펴보시면, 유저의 로컬 PC 에 Proxyman 인증서를 설치하고, 이를 신뢰할 수 있는 인증서로 설정하는 부분이 있습니다. HTTPS 통신을 할 때, Client 와 Server 는 서로의 암호화 키와 암호화 방식을 교환합니다. 이 과정에서 Proxyman 은 자신의 인증서를 사용하여 Server 와의 인증서 교환 과정을 대리합니다. 자신의 인증서로 웹사이트와 키 교환을 하였으므로, 이를 복호화 하는 것도 가능한 것이죠.

  재미있게도, MITM 공격과 패킷 캡쳐 프로그램의 원리는 같습니다. 차이점은, 유저의 동의 여부에 있습니다. MITM 공격은 보통 유저의 동의 없이 진행되는 해킹인 반면, 패킷 캡쳐 프로그램은 유저의 동의를 받은 유틸리티 도구입니다.


Wireshark?


  사실 패킷 캡쳐 프로그램이라고 말할 때, 가장 먼저 떠오르는 소프트웨어는 Wireshark 일 것입니다. Wireshark 를 사용하면, 유저의 HTTP/HTTPS/Websocket 통신 뿐만 아니라 3-Way-Handshake 과정을 포함한 TCP 통신 패킷까지 모두 확인할 수 있습니다. Wireshark 와 Proxyman 은 어떠한 차이점이 있을까요 ?

  아주 대략적으로 설명드리면, 유저의 패킷을 가로채는 Layer 에 차이가 있습니다. Wireshark 는 유저 PC 의 NIC(Network Interface Card) 레이어에서 들어오는 패킷을 탈취하는 방면, Proxyman 은 Proxy Server(Application Server) 를 사용하여 유저의 패킷을 탈취합니다. 즉, Wireshark 는 L3 Layer 에서, Proxyman 은 L7 Layer 에서 패킷을 탈취합니다. TCP/UDP 레이어에서 디버깅이 필요하다면 Wireshark 를 사용하는 것이 유용하지만, 일반적인 웹 어플리케이션을 개발할 때에는 Proxyman 을 사용하는 것이 더 편리합니다. 이러하 이유로, 저는 개인적으로는 웹개발 시 Proxyman 을 즐겨 사용합니다.


자주 사용하는 기능


이제 Proxyman 의 정체에 대해 대략적으로 살펴보았으니, 이제부터는 간단한 사용법에 대해 알아보겠습니다.


Image

출처 : Proxyman 웹사이트

Proxyman 의 기본적인 UI 입니다. 기본적인 사용법은 Proxyman 웹사이트 에 잘 설명되어 있으니, 이 문서를 읽어주시면 감사하겠습니다. 이 문서에서는 제가 개인적으로 사용하는 Proxyman 의 기능들에 대해서 요약하겠습니다.


Edit and Repeat Request


Image   API 개발 후 테스트로 요청을 날려볼 때, Request Body 를 일부만 변경하고 이외의 패킷은 동일하게 전송하고 싶을 때가 있습니다. 이 때에, 테스트 해보고 싶은 요청을 우클릭 한 후, Edit and Repeat 기능을 사용해 볼 수 있습니다.

Image

  위의 이미지와 같이, 선택한 패킷의 일부 부분만 수정하여 직접 HTTP 요청을 전송해 볼 수 있습니다. 위의 캡쳐 이미지와 같이 HTTP 본문을 직접 수정해 볼 수도 있고, 보기 쉬운 UI 로 직접 요청 정보를 수정해 볼 수 있습니다.

Breakpoint

  다들 개발하실 때에 Debugger 기능을 많이 사용하실 것 같습니다. Proxyman 의 Breakpoint 기능을 사용하면, 로컬 PC 에서 전송하는 HTTP/HTTPS 요청에 Breakpoint 를 생성하고, 해당 요청의 정보를 수정하여 전송할 수 있습니다.


Image

  Breakpoint 걸고 싶은 요청의 URL Matching Rule, Method 등을 설정하면, 해당 요청을 보내기 직전에 다음과 같이 Breakpoint 에 걸립니다. 아래 스크린샷 이미지가 Breakpoint 에 걸렸을 때의 화면입니다. 하단의 UI 를 통해 Request 에 대한 정보를 수정할 수 있고, 우측 하단의 Execute 버튼을 누르면 요청을 전송할 수 있습니다.


Image

Map Remote


  이 기능은 서버 개발을 할 때 유용하게 사용할 수 있는 기능입니다. 백엔드 API 개발의 기능을 fix 한 후, 배포하기 전까지는 UI 상으로는 클릭해가며 해당 기능을 테스트해보는 것은 불가능합니다. (물론 테스트코드, Swagger 등을 통해 직접 API 를 호출해 볼 수 있지만, 가끔은 클릭을 통해 API 를 테스트 해 보는 것이 편할 때가 있습니다.) 이 때에 프록시맨의 Map Remote 기능을 이용하면 간편하게 이를 테스트할 수 있습니다.


Image

Map Local


  이번 기능은 프론트앤드 개발을 할 때 간단히 사용해 볼 수 있는 기능입니다. FE 개발을 해야 하지만, BE 에서는 API 개발이 아직 완료되어있지 않은 상황이 있습니다. 이 때에, “특정한 HTTP 요청의 결과를 유저가 원하는 형태로 변환” 해주는 기능 이 Map Local 기능입니다. 쉽게 말하면, 간단한 Mocking 서버를 만드는 것이라고도 생각해 주시면 좋습니다.


Image

  이렇게 설정한 후, 웹브라우저에서 강의 상세 페이지로 이동하면 어떠한 화면이 나올까요 ?


Image

  위에서 유저가 설정한 대로, 실제 HTTP 요청을 보내지 않고 유저가 지정한 텍스트 (“프록시멘 Map Local”) 이 API 응답이 반환되어, 프론트 화면에 적용된 것을 확인할 수 있습니다.


Export


  UI 테스트를 하다 버그가 발생하면, 주로 브라우저/개발자 도구를 캡쳐하여 해당 기능을 개발한 분들에게 공유해드리곤 합니다. 하지만 개발자들의 입장에서는 API 의 응답 결과가 정확히 어떻게 반환되었는지 안다면, 좀 더 빠른 디버깅을 할 수 있습니다. 이 때에, 문제가 되었던 트래픽들을 기록한 후, Export 하면 디버깅에 더 도움이 될 수 있습니다. Export 형식은 Proxyman Log(프록시맨 어플리케이션으로 열 수 있는 파일 확장자), Postman File, RAW Request & Response 등을 지원합니다.

정리


  웹 개발을 할 때 HTTP/HTTPS 통신은 빠질 수 없는데, Proxyman 은 “HTTP/HTTPS 디버거” 정도로 이해해 주시면 감사하겠습니다. 일반적인 백엔드/프론트앤드 개발 시에는 Proxyman 무료 버전으로도 충분히 편하게 사용할 수 있으니, 개인적으로는 Proxyman 이라는 어플리케이션을 추천합니다.


관련문서




이것도 읽어보세요