Preface
Charles is an HTTP proxy / HTTP monitor / reverse proxy server. When a program accesses the Internet through Charles’ proxy, Charles can monitor all the data that the program sends and receives. It allows developers to view all HTTP communications that connect to the Internet, including requests, responses, and HTTP headers (including cookies and caching information).
The above is the intro from Charles’ official website. Overall, Charles is an HTTP monitoring tool. By setting a system proxy, it helps you forward HTTP or TCP (socket) requests. If you need it, you can see all your request packets super clearly. Server-side folks will definitely have a strong need for this—packet details are a very effective “evidence” when communicating with client-side folks. Not only that, Charles also comes with a bunch of powerful features, like simulating a poor network, setting breakpoints to modify packets and resend them, domain mapping, etc. This post shares a simple walkthrough of using Charles.
p.s. Since I don’t have a Windows environment, the setup here is on macOS. Windows is pretty much the same—only the resources you’ll need to find yourself.
Installation
- Download this link, then open it and keep clicking Next. During the process it’ll ask for your password—just enter it. This is a script and needs permission to write into the Applications folder.
- In the activation steps there’s a license key. You can choose to activate for the full experience. If you don’t use a key, you can still use it, but you’ll have to wait 15 seconds on app startup.
Installing apps on macOS is really pretty foolproof…. not much to explain….
One thing worth mentioning: Charles can listen to all requests from this device, and it can also proxy requests from other devices on the LAN (the most common case is capturing traffic from mobile apps). Below I’ll introduce how to configure both.
Configure proxy for the current device (the computer with Charles installed)
- Make sure the macOS proxy is enabled. You can also find it in Settings - Network - Advanced - Proxies - Web Proxy (HTTP) Proxy.
If you want to change the port, you can set it via Charles menu bar Proxy - Proxy Settings.
- At this point you can already do basic HTTP request parsing. But if you want to capture HTTPS, you still need to install a certificate on your computer. This certificate allows the browser to trust Charles.
help-ssl prcxying-Install Charles Root Certificate. (SSL is the encryption protocol used by HTTPS.)
- Find this certificate, then set everything here to Always Trust. Press cmd+s to save. When you close it, it’ll prompt you for your password—just enter it.
- Set the SSL proxying scope: in the Charles menu bar choose Proxy - SSL Proxying Settings.
- First check Enable SSL Proxying, then add the host(s) you want to proxy. Set Host to the wildcard
*, and Port to 443 (the HTTPS port).
At this point, you can listen to and properly parse all HTTP and HTTPS requests. Let’s test it.
UI overview
Overall the UI is pretty straightforward—click around a bit and you’ll get the idea.
Capture traffic from LAN devices (Android as an example)
The big prerequisite is: the device you want to capture must be on the same LAN, otherwise the proxy won’t work. If it’s not on the same LAN, what then? The answer is: find a way to get onto the same LAN—mobile hotspot, USB tethering, intranet tunneling, etc. This is the prerequisite; otherwise you can stop reading here.
- The core steps for capturing a LAN device are still: set the device’s system proxy, then install the Charles certificate. The only difference is: on the machine with Charles installed, the proxy host is localhost (127.0.0.1) on port 8888. But other devices on the LAN have their own localhost, so they can’t set it to localhost. They need to set it to the LAN IP of the machine running Charles.
- On the mobile device: Settings - WLAN - long press SSID - Modify - set Proxy to Manual - set Proxy server to the IP of the computer with Charles installed, Port 8888. No need to set anything else—just Save.
- Charles will pop up asking whether to allow remote proxying / listen to this remote host—click Allow. If you accidentally clicked Deny or want to manage it later, go to Charles menu bar Proxy - Access Control Settings to manage it.
- At this point you can already capture simple HTTP requests from the mobile device’s browsing. But in today’s HTTPS-everywhere era, there are very few pure HTTP sites. If you haven’t installed the HTTPS certificate, chances are you won’t even be able to open sites, and you’ll get frequent “untrusted certificate” prompts. So we still need to install the certificate like we did above. There are two ways: the first is like on the computer—download the certificate and transfer it to the phone. The second is more convenient: visit a Charles-hosted intranet site to download it. We’ll use the second.
- On the phone, visit
chls.pro/ssl, then tap Install and enter a password.
- Finally, open Zhihu on the phone, and you’ll be able to see Zhihu’s HTTPS packet details in Charles (if you don’t see any requests after configuring, I recommend restarting Charles).
Afterword
That’s it for the basic configuration and a quick intro to the main UI and features. The post is already pretty long, so I didn’t go into every feature in detail. On one hand, the UI is easy enough that you can click around a few times and get it. When I have time, I’ll share some of the features I use most often to solve a few pain points in my day-to-day work.
All articles in this blog, unless otherwise stated, are licensed under @Oreoft . Please indicate the source when reprinting!