Proxyman Breakpoint로 iOS 앱의 요청과 응답 가로채고 수정하기
이 미니 블로그에서는 디버깅 목적으로 Proxyman의 Breakpoint 도구를 사용해 API 호출을 조작하는 방법을 소개합니다.
소프트웨어 개발에서 브레이크포인트(breakpoint)란 의도적으로 실행을 멈추거나 일시 정지하는 지점을 말합니다. 이 지점에서 API 요청이나 응답을 살펴보고 수정할 수 있으며, 이를 차단할지 그대로 진행할지도 결정할 수 있습니다.
1. Breakpoint를 사용하는 경우
기본적으로 다음과 같이 동작합니다.
- 요청에 대해 Breakpoint를 활성화하면 Proxyman이 요청을 서버로 보내기 전에 멈춥니다.
- 응답에 대해 Breakpoint를 활성화하면 응답을 앱으로 전달하기 전에 멈춥니다.
따라서 이런 요청과 응답을 수정해 UI 오류나 특정 백엔드 기능(보안 취약점 포함)을 테스트할 수 있습니다. 이 미니 블로그에서는 Breakpoint가 어떻게 동작하는지 간단한 예제 두 가지로 살펴보겠습니다:
- 예제 1: 앱이 어떻게 동작하는지 보기 위해 사용자의 검색어를 변경합니다 (요청 수정)
- 예제 2: 응답에 담긴 사용자 이름과 아바타를 변경해 UI가 긴 메시지를 처리할 수 있는지 확인합니다 (응답 수정)
2. 원격 기기에 Proxyman 인증서 설치하기
시작하기 전에 먼저 iOS 기기에 Proxyman 인증서를 설치해 HTTPS 콘텐츠를 볼 수 있도록 합니다.
원격 기기에서 들어오는 요청
테스트에 집중하기 위해 Pin 기능으로 테스트 시나리오에 쓸 두 엔드포인트 api.unsplash.com/me와 api.unsplash.com/search만 분리해서 보겠습니다.
Pin을 사용해 엔드포인트 분리하기
3. 엔드포인트로 매칭 규칙 정의하기
이제 Breakpoint가 나가는 요청이나 들어오는 응답을 어떻게 가로챌지 정의할 차례입니다. 이 조건은 두 가지 방법으로 설정할 수 있습니다:
방법 1: 메뉴 막대
메뉴 막대에서 Tools -> Breakpoint -> Rules를 선택합니다.
Breakpoint 규칙 창이 나타나며, 여기서 모든 매칭 조건을 정의할 수 있습니다. 새 규칙을 추가하려면 창 왼쪽 아래 모서리에 있는 “+” 버튼을 클릭하세요.
Breakpoint 매칭 규칙을 정의할 수 있는 새 창이 나타난 모습
첫 번째 시나리오에서는 엔드포인트 “api.unsplash.com/search”를 입력하고 “Request”를 선택합니다 (검색어만 변경하려고 하므로).
“Add” 버튼을 누르면 이제부터 해당 엔드포인트로 나가는 모든 요청이 Breakpoint에 의해 멈추게 됩니다.
방법 2: 우클릭
매칭 규칙을 정의하는 또 다른 방법은 엔드포인트 URL을 선택한 다음 우클릭 -> Tools -> Breakpoint를 선택하는 것입니다.
URL 우클릭 -> Tools -> Breakpoint
Proxyman이 선택한 엔드포인트를 조건으로 자동 사용하기 때문에, 엔드포인트 “api.unsplash.com/me”가 자동으로 채워진 것을 볼 수 있습니다.
두 번째 시나리오에서는 “Response”를 선택해 보겠습니다.
엔드포인트가 자동으로 채워집니다. 매칭 대상으로 Request 또는 Response 중 하나를 선택할 수 있습니다.
“Done”을 누르면 Breakpoint 규칙 창에 새 규칙이 추가된 것을 확인할 수 있습니다.
이제 설정이 끝났으니 요청과 응답을 수정해 앱이 어떻게 동작하는지 확인해 보겠습니다.
4. Breakpoint로 요청 수정하기
먼저 Unsplash 앱을 실행합니다. 그런 다음 검색창에서 “eat clean” 키워드를 검색해 Breakpoint를 트리거하는 엔드포인트로 이동합니다.
API 호출이 캡처되자마자 Breakpoints 창이 나타나 쿼리를 쉽게 수정할 수 있습니다.
이제 검색어를 “eat clean”에서 “mountain”으로 바꿔 보겠습니다…
… 원본 요청(왼쪽)의 “eat clean” 이미지를 보여 주는 대신, 요청을 수정한 결과 앱이 “mountain” 이미지(오른쪽)를 렌더링합니다 :)
결과는 다음과 같습니다.
Breakpoint로 요청을 수정한 뒤 앱이 “mountain” 이미지(위)를 렌더링한 모습
5. Breakpoint로 응답 수정하기
이번에는 앱이 사용자 이름과 아바타를 어떻게 처리하는지 확인하기 위해 값을 바꿔 보겠습니다. Unsplash 앱을 다시 열어 엔드포인트 “api.unsplash.com/me”를 호출하면 됩니다.
API 응답이 캡처되면 요청을 수정할 때와 같은 방식으로 응답 내용을 편집할 수 있습니다.
수정 전 원본 내용
사용자 이름을 더 긴 이름으로 바꾸고 아바타도 함께 업데이트해 보겠습니다.
변경 후 새 내용
“Execute”를 누르면 원래 이름과 아바타(아래) 대신 새 사용자 이름과 아바타(위)가 표시된 수정된 프로필을 확인할 수 있습니다 :)
Breakpoint로 응답을 수정한 뒤 앱이 새 프로필(오른쪽)을 렌더링한 모습
6. 다음 단계
Breakpoint를 사용하면 API 요청과 응답의 어떤 부분이든 바꿀 수 있습니다. 다만 앱이 기대하는 형식의 데이터를 받지 못하면 오작동하거나 충돌할 수 있다는 점을 기억하세요.
알고 계셨나요? 같은 변경을 자주 테스트한다면 Breakpoint Template을 사용해 적용할 값을 저장해 둘 수 있습니다. 관련 없는 트래픽이 멈추지 않도록 각 규칙에 좁은 호스트와 경로를 지정하세요. 테스트가 끝나면 규칙을 끄세요. 그렇지 않으면 백그라운드 요청이 Breakpoint에서 대기하면서 앱이 멈춘 것처럼 보일 수 있습니다.
그럼 이 도구를 직접 써 보고 생산성을 높이는 데 주저하지 마세요.
즐거운 디버깅 되세요 :)
Proxyman은 iOS 기기, iOS 시뮬레이터, Android 기기에서 앱과 도메인의 HTTP/HTTPS 요청을 캡처하고 검사할 수 있게 해 주는 고성능 macOS 앱입니다.
https://proxyman.com에서 다운로드하세요.
