axios(NodeJS)의 HTTP/HTTPS 요청 캡처하기

이 글에서 다룰 내용:

Proxyman으로 NodeJS의 axios 라이브러리에서 보내는 HTTP/HTTPS 요청/응답을 캡처하는 방법

1. axios로 HTTPS 요청 보내기

JavaScript/NodeJS 개발자라면 axios 라이브러리로 HTTP/HTTPS REST 요청을 보내는 일이 흔합니다. Axios는 Promise 기반의 편리한 API를 제공해 요청을 더 쉽게 보낼 수 있도록 도와줍니다.

장점은 다음과 같습니다:

사용이 쉬움: Axios는 HTTP 요청을 보내기 위한 쉬운 API를 제공하므로 웹 개발자들이 즐겨 찾는 선택지입니다.
크로스 플랫폼 호환성: Axios는 브라우저와 Node.js 모두에서 사용할 수 있어, 웹 애플리케이션을 개발하는 사람에게 다용도로 쓸 수 있는 선택지입니다.
Promise 지원: Axios는 Promise를 지원하므로 비동기 요청이 가능하고 응답을 쉽게 처리할 수 있습니다.
요청 취소 지원: Axios는 요청을 취소하는 기능을 제공합니다. 사용자가 페이지를 떠나거나 요청이 너무 오래 걸리는 상황에서 유용합니다.
인터셉터: Axios는 인터셉터를 지원하며, 요청이나 응답이 전송되거나 수신되기 전에 이를 수정하는 데 사용할 수 있습니다.
오류 처리: Axios는 뛰어난 오류 처리 기능을 제공해 개발자가 애플리케이션의 오류를 손쉽게 처리할 수 있습니다.
JSON 데이터 처리: Axios는 서버에서 받은 JSON 데이터를 자동으로 파싱하고, 요청으로 보내는 JSON 데이터도 자동으로 변환할 수 있습니다.

다음 샘플 코드는 axios 라이브러리로 요청을 보내는 방법을 보여줍니다.

import axios from 'axios';

var response = await axios.get("https://google.com");
console.log(response);

response = await axios.get("https://httpbin.org/get?lib=axios&schema=https");
console.log(response);

response = await axios.get("http://httpbin.org/get?lib=axios&schema=http");
console.log(response);

실행하려면:

샘플 코드를 main.js로 저장합니다.
이 디렉터리에서 터미널을 열고 npm init -y를 실행해 간단한 패키지를 만듭니다.
axios를 설치합니다: npm install axios
node main.js
완료입니다.

2. HTTP/HTTPS 요청 및 응답은 어떻게 캡처하나요?

현재의 문제점

Axios는 기본적으로 시스템 HTTP 프록시 설정을 따르지 않습니다. 따라서 Proxyman이나 다른 웹 디버깅 프록시(예: Charles Proxy, Fiddler)에서는 Axios의 요청/응답이 전혀 보이지 않습니다.

이를 해결하려면 프록시를 직접 설정해야 합니다. 다음은 그 방법의 예시입니다. 자세한 내용은 Axios 문서에서 확인하세요.

var response = await axios.get({
    url: "https://google.com",

    // Provide a Proxy config
    proxy: {
        protocol: 'https',
        host: '127.0.0.1',
        port: 9090
      },
});

소스 코드를 직접 수정해야 하므로 실수하기 쉽고 시간도 많이 걸립니다.

해결 방법 ✅

다행히 Proxyman에는 설정 없이 HTTP/HTTPS 요청/응답을 캡처할 수 있는 기능이 있습니다.

https://proxyman.com/에서 최신 macOS 앱을 다운로드하세요.
Mac에 Proxyman 인증서를 설치하세요. Certificate 메뉴 → Install Certificate on this Mac… 를 연 다음 "Install & Trust" 버튼을 클릭하면 간단히 설치할 수 있습니다.

Setup 메뉴 → Automatic을 열고 "New Terminal app…"을 클릭하세요.

설정 없이 Axios HTTP 트래픽을 캡처할 수 있는 미리 구성된 터미널 앱 열기

New Terminal app 창이 열립니다. 이는 미리 구성된 Apple 터미널 앱으로, Axios의 HTTPS 트래픽을 자동으로 캡처하고 복호화합니다.
새 터미널 앱에서 node main.js를 다시 실행하면, 이제 모든 HTTP/HTTPS 트래픽이 Proxyman에 의해 캡처되고 복호화됩니다 🎉

완료입니다.

내부 동작 방식이 궁금하다면 이 Automatic Setup 문서를 참고하세요.
직접 사용하는 터미널(iTerm2 또는 Hyper)을 쓰고 싶다면 Manual Setup 문서를 확인하세요.

지원되는 다른 NodeJS 라이브러리

Proxyman은 Axios, got, superagent, fetch, node-fetch를 별도 설정 없이 기본으로 지원합니다.

결론

axios NodeJS 스크립트의 HTTP/HTTPS 트래픽을 캡처하는 것은 실수하기 쉽고 시간도 오래 걸립니다. 하지만 Proxyman의 Automatic Setup을 사용하면 설정 없이 클릭 한 번으로 캡처할 수 있습니다.

node main.js는 Proxyman이 연 터미널 안에서 실행하세요. 설정이 해당 세션에만 적용되며, 셸 프로필은 변경되지 않습니다. 그래도 트래픽이 보이지 않는다면, 코드가 자체 Axios 에이전트나 프록시 옵션을 지정하고 있는지 확인하세요. 그다음 같은 터미널에서 기본 Node fetch 요청을 시도하면 앱 설정 문제와 설정 문제를 구분할 수 있습니다.

Proxyman은 고성능 macOS 앱으로, 개발자가 iOS 기기, iOS 시뮬레이터, Android 기기에서 실행되는 앱과 도메인의 HTTP(S) 트래픽을 캡처하고 검사할 수 있게 해 줍니다.

https://proxyman.com/에서 다운로드할 수 있습니다.

Noah Tran

2023년 5월 14일