Proxyman으로 iOS 18 WKWebView의 HTTP/HTTPS 트래픽 캡처

1. 문제점

WKWebView를 사용할 때는 네트워크 트래픽(HTTP/HTTPS)을 캡처하기가 정말 어렵습니다. WKWebView가 시스템 프록시 설정을 따르지 않기 때문입니다.

WKWebView는 Safari처럼 Network 콘솔 탭을 제공하지 않습니다.

따라서 WKWebView에서 네트워크 트래픽을 쉽게 캡처할 방법이 없습니다.

이 글에서 다루는 내용

Proxyman으로 iOS 17 또는 iOS 18에서 WKWebView의 HTTPS 트래픽을 캡처하는 방법

2. 해결 방법

iOS 17과 iOS 18부터 WKWebView에 WKWebsiteDataStore의 proxyConfigurations가 도입되었습니다. 이를 통해 WKWebView의 프록시를 설정할 수 있습니다. 이 기능을 활용하면 WKWebView의 네트워크 트래픽을 손쉽게 캡처할 수 있습니다.

문서는 여기에서 확인할 수 있습니다: https://developer.apple.com/documentation/webkit/wkwebsitedatastore/4264546-proxyconfigurations

이 튜토리얼에서는 Proxyman을 사용해 iOS 17/18에서 WKWebView의 네트워크 트래픽을 캡처하는 방법을 보여 줍니다.

2.1. 사전 준비 사항

Proxyman 웹사이트에서 Proxyman을 다운로드합니다.

2.2. 설정

Xcode에서 프로젝트를 엽니다.
현재 사용 중인 WKWebView 인스턴스를 찾아 다음 코드를 추가합니다.

lazy var webView: WKWebView = {
    let webConfiguration = WKWebViewConfiguration()

    // ✅ define Proxy Setting to Proxyman
    let httpProxy = ProxyConfiguration(
        httpCONNECTProxy: NWEndpoint.hostPort(
            host: NWEndpoint.Host(
                "127.0.0.1"
            ),
            port: NWEndpoint.Port(
                integerLiteral: 9090
            )
        )
    )

    // ✅ Tell WKWebView to use the Proxy
    let dataSource = WKWebsiteDataStore.default()
    dataSource.proxyConfigurations = [httpProxy]
    webConfiguration.websiteDataStore = dataSource
    
    // init view
    let webView = WKWebView(
        frame: .zero,
        configuration: webConfiguration
    )
    webView.translatesAutoresizingMaskIntoConstraints = false
    return webView
}()

127.0.0.1과 9090을 Proxyman의 IP 주소와 포트로 바꿔야 합니다. 9090은 Proxyman의 기본 포트입니다.
실제 기기에서 테스트하는 경우에는 Proxyman 창 상단의 Proxyman 툴바에 표시되는 macOS의 IP 주소가 필요합니다.

iOS 시뮬레이터

Proxyman -> Certificate 메뉴 -> Install to iOS -> Simulator를 열고 안내에 따라 iOS 시뮬레이터에 인증서를 설치합니다.

실제 iPhone/iPad 기기

Proxyman -> Certificate 메뉴 -> Install to iOS -> Physical Device를 열고 안내에 따라 iPhone/iPad에 인증서를 설치합니다.

3. ✅ iOS 앱을 다시 실행하고 Proxyman에서 트래픽 확인

WKWebView의 모든 트래픽이 캡처되어 Proxyman에 표시됩니다.
fetch, axios, XMLHttpRequest 등 모든 서드파티 라이브러리의 HTTP/HTTPS 트래픽과 함께 작동합니다.

4. 다음 단계

Proxyman 필터를 사용하면 디버깅하려는 트래픽만 걸러낼 수 있습니다.
Proxyman Replay를 사용하면 디버깅하려는 트래픽을 다시 재생할 수도 있습니다.

중요한 설정 팁

이 프록시 설정은 디버그 빌드에만 포함하고, App Store 빌드에서는 제외합니다. 127.0.0.1은 같은 Mac에서 실행되는 시뮬레이터에만 사용합니다. 실제 기기에서는 Proxyman이 표시하는 Mac의 IP 주소가 필요합니다. 프록시는 WKWebView를 만들기 전에 적용합니다. 기존 연결은 이전 경로를 계속 사용할 수 있으므로, 세션 중에 프록시를 변경할 때는 웹 뷰 또는 해당 데이터 스토어를 다시 만들어야 합니다.

Noah Tran

2024년 8월 29일