Charles Proxy — ano ito, pagsasaayos at pagharang ng HTTPS traffic

Ano ang Charles Proxy?

Charles Proxy — ay isang HTTP proxy at HTTP monitor na kumikilos bilang tagapamagitan sa pagitan ng client at server. Lahat ng request at response ay dumadaan sa Charles, na nagpapahintulot na tingnan ang kanilang nilalaman, suriin ang structure, baguhin ang data sa real-time, at gayahin ang iba't ibang kondisyon ng network. Available para sa Windows, macOS, at Linux.

Kasaysayan at Pagpoposisyon

Ang Charles Proxy ay nilikha noong 2004 ni Karl von Randow at nananatiling isa sa pinakasikat na tool para sa pag-debug ng network traffic. Hindi tulad ng mga libreng alternatibo, nag-aalok ang Charles ng bayad na lisensya na may 30-araw na trial period. Ang tool ay nakaposisyon bilang isang propesyonal na solusyon para sa mga mobile app developer, web developer, at QA engineer na nangangailangan ng buong kontrol sa HTTP communications.

Pagkatugma sa Platform

Gumagana ang Charles bilang isang system proxy sa computer at maaaring humarang ng traffic mula sa anumang device sa parehong network: Android, iOS, simulators, emulators, web browser, at IoT devices. Para sa HTTPS interception, kailangan mong i-install ang Charles root certificate sa bawat device. Ang traffic ay suportado sa HTTP/1.1 at HTTP/2 (partial). Ang HTTP/3 (QUIC) ay hindi suportado sa antas ng interception.

Paano Gumagana ang Charles Proxy

Gumagana ang Charles sa prinsipyo ng MITM (Man-in-the-Middle) proxy: kapag nagpadala ang isang client ng request sa pamamagitan ng Charles, hinaharap ng tool ang request na ito, ipapasa ito sa target na server, tatanggapin ang response, at ibabalik ito sa client. Lahat ng traffic ay dumadaan sa Charles, na nagpapahintulot sa pagsusuri at pagbabago.

Arkitektura ng Proxy

Kapag inilunsad, gumagawa ang Charles ng isang local HTTP proxy sa port 8888 (default). Ang operating system o application ay naka-configure upang gamitin ang proxy na ito. Lahat ng HTTP request ay unang ipinapadala kay Charles, na pagkatapos ay kumikilos bilang isang buong client para sa target na server. Para sa HTTPS, ginagamit ng Charles ang sarili nitong SSL proxying technique: bumubuo ito ng certificate on the fly para sa bawat domain, na nilagdaan ng Charles root certificate. Kung ang root certificate ay naka-install bilang pinagkakatiwalaan sa device, maaaring i-decrypt at tingnan ng Charles ang HTTPS traffic.

Mga Mode ng Paggawa

Sinusuportahan ng Charles ang dalawang mode: Proxy (classic proxy server) at SOCKS Proxy (para sa UDP at TCP traffic). Para sa web development, ginagamit ang standard HTTP proxy. Para sa mobile devices — WiFi Proxy configuration sa device na may specific na IP address ng computer na nagpapatakbo ng Charles. Sinusuportahan ng MacOS ang automatic proxy configuration para sa iOS simulator.

<!-- Configuration ng network_security_config.xml para sa Android na may suporta sa Charles -->
<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <debug-overrides>
        <trust-anchors>
            <!-- Pagkatiwalaan ang certificate ng Charles sa Debug build -->
            <certificates src="user" />
        </trust-anchors>
    </debug-overrides>
</network-security-config>

Mga Pangunahing Tampok ng Charles Proxy

Ang Charles Proxy ay nagbibigay ng set ng mga propesyonal na tool para sa pagsusuri at pagbabago ng traffic na higit pa sa simpleng pagharang ng request.

Rewrite at Breakpoints

Ang tool na Rewrite ay nagpapahintulot ng automatic na pagbabago ng ilang bahagi ng request o response: headers, URL parameters, response body. Halimbawa, maaari mong palitan ang User-Agent header ng value mula sa ibang device o alisin ang specific cookies. Ang Breakpoints ay gumagana tulad ng isang debugger: ang request ay pinipigilan sa isang napiling yugto (bago ipadala o bago matanggap), at ang developer ay maaaring manu-manong baguhin ang nilalaman nito bago ito magpatuloy. Ito ay kapaki-pakinabang para sa pagsubok ng paghawak ng error response o hindi karaniwang estado.

Map Local at Map Remote

Map Local ay nagpapahintulot na palitan ang isang network resource (CSS, JS, JSON) ng isang local file sa disk. Ito ay kailangang-kailangan sa frontend development: maaari mong baguhin ang CSS/JS at agad na makita ang resulta nang hindi nagde-deploy sa server. Map Remote ay nagre-redirect ng mga request mula sa isang URL patungo sa isa pa — halimbawa, mula sa production server patungo sa staging para sa pagsubok. Ang parehong tool ay gumagana sa mga URL pattern na sumusuporta sa wildcards.

Throttle at Simulation ng Kondisyon ng Network

Ang tool na Throttle ay nagpapahintulot na gayahin ang iba't ibang uri ng network connections gamit ang preset profiles: 3G, EDGE, GPRS, DSL, WiFi. Maaari mong i-configure ang speed limits (download/upload), latency, packet loss, at stability. Ito ay kritikal para sa pagsubok ng behavior ng app sa ilalim ng mabagal o hindi matatag na koneksyon — tamang paghawak ng timeouts, retry attempts, offline mode.

Auto Save at Recording

Maaaring awtomatikong i-save ng Charles ang traffic sessions sa .chls files, na nagpapahintulot sa pagsusuri sa ibang pagkakataon o pagbabahagi sa mga kasamahan. Ang Recording Control ay nagpapahintulot ng flexible configuration kung aling traffic ang ise-save: ayon sa domain, content type, status code. Ito ay maginhawa para sa pangmatagalang pagsubaybay ng API.

Pag-set up ng Charles Proxy para sa Mobile Devices

Para sa pag-debug ng mobile app traffic, ang Charles ay naka-configure bilang isang WiFi Proxy: lahat ng device sa parehong network ng computer ay maaaring mag-route ng traffic sa pamamagitan ng Charles. Ang tamang HTTPS setup ay nangangailangan ng pag-install ng Charles certificate sa mobile device.

Pag-set up sa Android

Para sa Android: buksan ang Settings → WiFi → Advanced → Proxy, piliin ang Manual at ilagay ang IP address ng computer na may port 8888. Pagkatapos ay buksan ang browser sa device at pumunta sa http://chls.pro/ssl para i-download ang Charles certificate. Sa Android 7+ (API 24+), kinakailangan ang network_security_config.xml para magtiwala sa user certificates sa Debug build — kung hindi, ang app ay maaaring hindi mag-route ng traffic sa pamamagitan ng Charles.

Pag-set up sa iOS

Para sa iOS: Settings → WiFi → i-configure ang proxy sa IP at port 8888. Pagkatapos Safari → http://chls.pro/ssl → i-install ang certificate profile. Sa iOS 10.3+, kailangan mong paganahin ang certificate trust: Settings → General → About → Certificate Trust Settings → paganahin ang Charles Proxy. Ang iOS ay mas mahigpit sa certificates: ang ilang app ay maaaring gumamit ng SSL Pinning, na humaharang ng traffic sa pamamagitan ng Charles kahit na may pinagkakatiwalaang certificate.

Paglutas ng mga Problema sa SSL Pinning

Kung ang app ay gumagamit ng SSL Pinning (pag-pin ng server certificate), ang standard proxying sa pamamagitan ng Charles ay hindi gagana — tatanggihan ng app ang Charles certificate. Mga solusyon: huwag paganahin ang SSL Pinning sa Debug build sa pamamagitan ng OkHttp o URLSession settings, gamitin ang Frida para i-bypass ang pinning sa runtime, o gamitin ang Android Emulator na may root access.

Mga Praktikal na Sitwasyon ng Paggamit ng Charles Proxy

Ang Charles Proxy ay lumulutas ng specific development at testing tasks. Tingnan natin ang mga pinakakaraniwang sitwasyon kung saan ang tool ay kailangang-kailangan.

Pag-debug ng API Integration

Ang pinakakaraniwang sitwasyon — pagsuri ng kawastuhan ng mga API request. Ipinapakita ng Charles ang exact URL ng request, headers, body, parameters. Kung ang server ay nagbalik ng hindi inaasahang response, agad na makikita: JSON structure, error code, response headers. Ito ay nagpapahintulot na makilala ang client-side error mula sa server-side error nang walang logs mula sa magkabilang panig.

Pagsubok na may Mabagal na Koneksyon

Gamit ang Throttle profiles, maaari mong subukan kung paano kumikilos ang app sa ilalim ng mababang bilis ng koneksyon: kung ang loading indicator ay ipinapakita, kung ang timeout ay hawak nang tama, kung ang UI ay nag-freeze sa pagkawala ng koneksyon. Ang pagsubok ng caching ay lalong mahalaga — kung ang data ay na-load na, dapat itong ipakita ng app mula sa cache sa halip na pumasok sa walang katapusang pag-load.

Pag-edit ng mga Server Response

Gamit ang Breakpoints, maaari mong baguhin ang server response bago ito ipadala sa app. Halimbawa, magbalik ng empty array sa halip na data, baguhin ang status code sa 500, magdagdag ng bagong field sa JSON. Ito ay nagpapahintulot sa pagsubok ng edge case handling nang hindi binabago ang server code — isa sa pinakamakapangyarihang application ng Charles sa mobile development.