Using Charles to capture packets on computers and mobile phones

Introduction to Charles#

Charles is an HTTP proxy/HTTP monitor/directional proxy server software. Developers can use Charles to see the HTTP and HTTPS information between the computer and the internet, including requests, responses, and HTTP request headers (Cookies and cache information).

Installing and Using Charles#

Click the link https://www.charlesproxy.com/download/ to download the corresponding version for installation. Taking the macOS version as an example:

Download the dmg file Click here to download version 4.5.6
Double-click to open the dmg file, click accept, and then drag the application file to the Applications directory.
You can then open Charles from the Launchpad.
After starting Charles, a pop-up will appear requesting permission. Click Grant Privileges, agree, and then enter your password to authorize.
Then check Proxy - macOS Proxy to start the system proxy. After that, use the browser to visit Baidu, and you will see the HTTP request information for Baidu on the left side.

Installing SSL Certificate#

After completing the above steps, you may see "unknown" under the Baidu request. This is because Baidu uses HTTPS and SSL for encrypted transmission. We only need to install Charles's certificate to obtain the request information.
Select Help - SSL Proxying - Install Charles Root Certificate

After clicking, a pop-up will appear to add the certificate; just choose to add it.
Add Certificate
After adding, we open the Keychain Access system software, search for Charles in the upper right corner, and we can find the certificate we just installed, which is untrusted after installation.

Double-click the installed certificate, open the trust section, select "Always Trust," and then close the window and enter your password. As shown in the figure:
Trust Certificate

Configuring SSL Proxy#

Go to Proxy - SSL Proxying Settings, click Add to add the domain name and port you want to listen to. It supports wildcard * and SSL is usually port 443.
Add SSL Proxy
Here we add two configurations to cover most HTTPS requests. After adding, you can happily capture HTTPS requests.

*:443
*:*

Visit Baidu again, click on the request path, and select the Contents section to see the request and response information.

Capturing Packets on iOS Devices#

Configuring Proxy#

First, ensure that the phone and computer are on the same network. Click Help - Local IP Address to view the computer's IP, and click Proxy - Proxy Settings to view the proxy port, which defaults to 8888.
Open the phone and go to Settings - Wi-Fi - click the exclamation mark on the right side of the connected Wi-Fi. (Ensure the computer and phone are on the same local network!)
Scroll to the bottom and click Configure Proxy, select Manual, and fill in the IP and port information. As shown in the figure:
Then Charles will pop up a connection request; click Allow (if you clicked Deny, please restart Charles).

After that, open the mobile browser to visit Baidu, and it will prompt that this connection is not private because we have not yet installed Charles's certificate on the phone.

Installing Charles Certificate on iOS#

Open Charles and select Help - SSL - Install Charles Root Certificate on a Mobile Device or Remote Browser
Use Safari to open chls.pro/ssl and click Allow to install the profile. Ensure the device is on the local network and the proxy is configured correctly.
Then go to Settings - General - Profiles on the phone, and you will see an additional Charles Proxy CA profile. Click on that profile and click Install in the upper right corner.
After installation, go to Settings - General - About - Certificate Trust Settings (at the bottom) and click Trust Charles Proxy CA's certificate.

At this point, the certificate setup on the phone is complete.

Capturing Packets from WeChat Mini Programs#

If you only need to capture requests on the phone, you can temporarily disable Proxy - macOS Proxy (shortcut: Shift + command + P) to reduce interference from computer requests on mobile packet capture.

Open a mini program (this article uses the WeChat Index mini program) and perform an operation to send a request.

Open Charles to view the request information and you will see the response JSON information.

Acknowledgments#

Thank you for reading. Let's explore knowledge and grow together.