The content of this paper mainly includes:
The introduction of Charles
How to install Charles
Set Charles up as the system agent
Charles main interface introduction
Filtering network Requests
Intercept network packets on the iPhone
Intercepts Https communication information
Simulate a slow network
Modify the network request content
Stress test the server
Modify the content returned by the server
The reverse proxy
Set up external agents to resolve conflicts with wall climbing software
conclusion
Introduction to the
Charles is a common network packet interception tool in Mac
In mobile development, we often need to intercept network packets for analysis in order to debug the network communication protocol with the server.
Charles implements interception and analysis of network packets by setting himself up as the network access proxy server of the system, through which all network access requests are processed.
In addition to debugging ports for mobile development, Charles can also be used to analyze communication protocols for third-party applications. In conjunction with Charles’ SSL capabilities, Charles can also analyze the Https protocol.
Charles is a paid software with a 30-day free trial. After the trial period, users who have not paid will still be able to use the app for no more than 30 minutes at a time, and there will be a 10-second delay on startup. Therefore, the payment plan is quite user friendly, even if you don’t pay for a long time, you can still use the full software features. However, when you need to do packet debugging for a long time, you will be affected by Charles forcing the shutdown.
The main functions of Charles include:
Intercepts Http and Https network packets.
Supports resending network requests, facilitating back-end debugging.
Network request parameters can be modified.
Support network request interception and dynamic modification.
Support analog slow network.
Key new features include:
Http 2 is supported.
Support IPv6.
Installation, Charles
Go to the official Charles website (www.charlesproxy.com) to download the latest Charles installation package, which is a DMG file. Once opened, drag Charles to the Application directory to complete the installation.
Set Charles up as the system agent
As mentioned earlier, Charles does packet interception by setting itself up as a proxy server, so the first step in using Charles is to set it up as a proxy server for your system.
After starting Charles, the first time Charles asks you to set system agent permissions for it. You can grant Charles this permission by entering the login password. You can also ignore this request, and when you need to set Charles up as a system Proxy, choose “Proxy” -> “Mac OS X Proxy” from the menu to set Charles up as a system Proxy. As follows:
After that, you can see a steady stream of network requests popping up in Charles’s interface.
It should be noted that Chrome and Firefox browsers do not use the proxy server Settings of the system by default, while Charles set himself as a proxy server to complete packet interception, so the network communication content of Chrome and Firefox browsers cannot be intercepted by default. If you need to intercept, you can use your system’s proxy Settings in Chrome, or simply set the proxy to 127.0.0.1:8888 to achieve the same effect.
Charles main interface introduction
Charles provides two main views for viewing packets, called “Structure” and “Sequence.”
The Structure view classifies network requests by domain names visited.
The Sequence view sorts network requests by access time.
You can switch back and forth between these two views depending on your needs. Charles provides a simple Filter function that allows you to enter a keyword to quickly Filter out web requests with a specified keyword in the URL.
For a specific network request, you can view the detailed request content and response content. If the request content is a POST form, Charles will automatically display the form for you. If the response is in JSON format, Charles can automatically format the JSON content for you to view. If the response content is an image, Charles can display a preview of the image.
Filtering network Requests
In general, we need to filter network requests and only monitor requests sent to a specified directory server. For this need, there are several approaches:
Method 1: In the Filter text box in the middle of the main window, enter the keywords to be filtered out. For example, if the address of our server is http://yuantiku.com, you only need to enter Yuantiku in the Filter field.
Method 2: In Charles menu bar, choose “Proxy” -> “Recording Settings”, then select the Include bar, select add a project, and then fill in the protocol to be monitored, host address, port number. This allows you to intercept only packets from the target site. As shown below:
In general, we use method 1 to do some temporary packet filtering and method 2 to do some recurrent packet filtering.
Method 3: Right click on the network request you want to Filter, select “Focus”, and then check the Focussed item in the Filter column, as shown below:
This method can temporarily, quickly filter out some type of network request did not pass the keyword.
Settings on Charles
To intercept a network request on the iPhone, we first need to turn on Charles’s proxy. On the Charles menu bar, choose Proxy > Proxy Settings, enter Proxy port 8888, and check Enable transparent HTTP proxying to complete the Settings on Charles. As shown below:
Settings on the iPhone
First of all, we need to obtain the IP Address of the computer where Charles is running. “Help” -> “Local IP Address” in the top menu of Charles, you can see the IP Address in the pop-up dialog box, as shown below:
In iPhone “Settings” -> “wireless LAN”, you can see the name of the currently connected wifi. By clicking the details button on the right, you can see the details of the currently connected wifi, including IP address, subnet mask and other information. At the bottom there is the item “HTTP proxy”, we switch it to manual, and then fill in the IP of the computer where Charles is running and the port number 8888, as shown in the picture below:
After setting up, we open any program that needs network communication on iPhone, and we can see Charles pop up the confirmation menu of iPhone request connection (as shown in the picture below), click “Allow” to complete the setting.
Intercepts Https communication information
Install the certificate
If you need to intercept and analyze Https protocol related content. Charles’ CA certificate needs to be installed. The specific steps are as follows.
First we need to install the certificate on the Mac. Select “Help” > “SSL Proxying” > “Install Charles Root Certificate” from the top menu of Charles, and then enter the system account password to see the added Certificate in the KeyChain. As shown below:
Note that Charles does not intercept Https network traffic by default, even after the certificate is installed. If you want to intercept all Https network requests on a site, you can right click on the request and select SSL Proxy, as shown below:
In this way, all SSL requests to the Host can be intercepted.
Intercepts Https communication information on mobile devices
If you want to intercept Https traffic on an iOS or Android device, you also need to install the corresponding certificate on the phone. Click on the top menu of Charles and choose Help -> SSL Proxying -> Install Charles Root Certificate on a Mobile Device or Remote Browser You’ll then see Charles pop up with a simple installation tutorial. As shown below:
According to the tutorial we said before, after setting Charles as the agent on the device, visit the address: charlesproxy.com/getssl in the mobile browser to open… Https communication. Note, however, that Charles does not intercept by default. You also need to right-click on the network request to intercept and select the SSL Proxy menu item.
Simulate a slow network
When doing mobile development, we often need to simulate slow or high latency networks to test the performance of applications on mobile networks. Charles is very supportive of this need.
In the menu of Charles, choose “Proxy” -> “Throttle Setting”. In the dialog box that pops up later, you can select “Enable Throttling” and set Throttle Preset. As shown below:
If we want to simulate the slow network of a specific site, we can check the “Only for Selected Hosts” TAB in the above image and add the specified hosts TAB in the lower part of the dialog.
Modify the network request content
Sometimes in order to debug the server interface, we need to repeatedly try the network request with different parameters. Charles can easily provide modification and retransmission of network requests. To create an editable Web request, right-click on the previous web request and select Edit. As follows:
We can modify any information of the request, including URL address, port, parameters, etc., and then click “Execute” to send the modified network request (as shown in the figure below). Charles allows us to modify and send the request multiple times, which is very convenient for us and the server-side debugging interface, as shown below:
Stress test the server
We can use Charles’s Repeat feature to simply test the server’s concurrency capabilities as follows.
Right click on the web request we want to suppress (POST or GET request) and select the “Repeat Advanced” menu item as follows:
Then we can pop up in the dialog box, select the number of concurrent threads to suppress and suppress the number of times, after confirming, can start to suppress.
Quietly, some poorly written voting sites can also use this method to quickly vote. Of course, I also fed a lot of junk data to some fraudulent phishing websites with Charles Repeat function. Last time, I accidentally suspended the database of a phishing website. Well, please call me Lei Feng.
Modify the content returned by the server
Sometimes we want the server to return some specified content so that we can debug special cases. For example, the list page is empty, the data is abnormal, and some time-consuming network requests time out. Without Charles, it would be a hassle to get the server to cooperate in constructing the corresponding data. At this point, charles-related functions can be used to meet our needs.
Depending on your needs, Charles provides Map, Rewrite, and Breakpoints capabilities to modify what the server returns. The functional differences among the three are as follows:
1. The Map function is suitable for long-term redirection of certain requests to another network address or local file.
2. The Rewrite function lends itself to some regular substitutions for network requests.
3.Breakpoints are suitable for temporary modifications.
The Map function
Charles’s Map function is divided into Map Remote and Map Local. As the name implies, Map Remote redirects a specified network request to another url request address, and Map Local redirects a specified network request to a Local file.
From the Charles menu, choose “Tools” -> “Map Remote” or “Map Local” to enter the Settings page of the corresponding function.
For the Map Remote function, you need to enter the source address and destination address of network redirection respectively. For conditions that do not need to be restricted, you can leave them blank. Here is an example where I redirected all ytk1.yuanku.ws (test server) requests to www.yuantiku.com (online server).
For the Map Local function, we need to fill in the redirection source address and the Local target file. For some complicated network request results, we can first use the “Save Response…” provided by Charles. Function to save the result of the request locally (as shown below), and then modify it slightly to become our target mapping file.
Here is an example where I Map a specified network request to a Local modified file using the Map Local function.
A potential problem with Map Local is that it returns a different Http Response Header from a normal request. If the client validates part of the Http Response Header, the function is invalidated. The solution is to use Map Local as well, with the Rewrite functionality mentioned below, to Rewrite the relevant Http headers into what we want.
Rewrite the function
The Rewrite function is a good way to modify the results of a particular type of network request with some regular substitutions.
For example, our client has an API request to get a user nickname, and my current nickname is “Tangqiaoboy”, as shown below:
We want to try modifying the network return value directly by changing tangqiaoboy to iosboy. So we turned on the Rewrite function and set the following rule:
Once set up, we can see from Charles that the nicknames obtained by the subsequent API were automatically Rewrite to iosboy, as shown below:
Their context function
The Rewrite function is best for batch and long-term replacements, but most of the time, we just want to change the result of a network request temporarily. Using the Rewrite function will do the trick, but it is too cumbersome.
Breakpoints function is similar to the Breakpoints we set in Xcode. Charles will intercept a specified network request when it occurs, and we can temporarily modify the returned content of the network request in Charles.
The following figure shows the API we temporarily modified to obtain user information. We changed the user’s nickname. After the modification, click “Execute” to continue the network request.
Note that during the interception and modification of network requests using the Breakpoints function, the timing of the entire network request is not suspended. Therefore, a long pause may cause client requests to time out.
The reverse proxy
Charles’s reverse proxy feature allows us to map a port locally to another port remotely. For example, in the figure below, I have mapped port 61234 from the native to port 80 from the remote (www.yuantiku.com). So, when I visit the local port 61234, the content of the actual return will be provided by www.yuantiku.com.yuantiku.com port 80.
Set up external agents to resolve conflicts with wall climbing software
The principle of Charles is to set himself as the proxy server of the system. However, in China, due to work needs, we often need to use Google to search, so most programmers have their own wall-climbing software, and the basic principle of these software is to set himself as the proxy server of the system to achieve transparent wall-climbing.
In order to make them coexist peacefully, we can set the Proxy port and related information in Charles’ External Proxy Settings. At the same time, we should also turn off the automatic setting of the relevant wall climbing software, so that it will not actively modify the system agent, so as to avoid the failure of Charles.
conclusion
With Charles software, we can easily intercept and debug network request content, analyze packet protocol and simulate slow network in daily development. Good use of Charles can greatly facilitate the development and debugging of apps with network requests.
May this article help you become an expert on Charles, and have fun
Author: Kitchen knife