Wikipedia tells us that:
Charles is a cross-platform HTTP debugging proxy application written in Java. It allows the user to view HTTP, HTTPS and enabled TCP port traffic that is accessed from, to, or through the local computer. This includes requests and responses, including HTTP headers and metadata (for example, cookies, caching and encoding information), with features designed to help developers and testers analyze connections and exchange messages.
A little explanation
Sniffing is the process of monitoring and intercepting all packets passing through the network using sniffing tools (Charles Proxy).
The first steps
1. Installation and Launch
First you need to download and install the application.
If you have not purchased a license, a 30-day trial version with restrictions will be available (functionality is not blocked, but windows will appear with a timeout of 5-10 seconds before resuming use, and after 30 minutes the application will exit).
2. We start sniffing traffic
Start Charles Proxy, go to the menu Help → SSL Proxying → Install Charles Root Certificate (see 1) → Install certificate → Import the certificate .
Now you see requests, but they are encrypted, and nothing is visible except for the hieroglyphs. To see the Request / Response in its normal form, you need to enable SSL Proxying and configure the domains whose packets we want to intercept. And we want to receive requests from all sites. To do this, go to Proxy → SSL Proxying Settings .
In the dialog box that opens, check the Enable SSL Proxying checkbox , select the Enclude section and click Add .
Next, fill in the Host field with * (as shown in the screenshot) and click OK .
In the SSL Proxying Settings dialog box, click OK .
Now you can watch requests sent to the server and server responses.
3. Proxying Web Browser Traffic
When you restart Charles, you just need to activate Windows Proxy (if you have Windows) or Mac Proxy.
4. Configuring a proxy on Android
To display Android application requests, you must have a corresponding Android application assembly with the permission set in the manifest. Let's pretend we have such an application and we want to start getting traffic from it.
To do this, we find out the IP address of the PC: in Charles Proxy, go to Help → Local IP Address . We see that your the IP:
192.168.1.50.
Next, pick up the phone, openNetwork Properties -> WiFi Network Name -> Proxy Server -> Manual -> Hostname: * your IP * / Port: * 8888 * -> Save the changed network properties.
Now you need to follow the link chls.pro/ssl or charlesproxy.com/getssl , and then the automatic download of the certificate will start. Open it, set a name for the certificate, and now you have access to Android app traffic.
5. Configuring a proxy on iOS
Take your iPhone in hand, open Network Properties → WiFi Network Name → Proxy Server → Manual → Hostname: * Our IP * / Port: * 8888 * → Save the changed network properties.
Now you need to follow the link chls.pro/ssl or charlesproxy.com/getssl, "Allow" loading of the configuration profile. Next, go to Settings → Profile loaded → Install . Then go to Settings → General → About this device → Trust certificates → find the installed certificate and make it "Trusted".
Charles Proxy functionality
- Data substitution:
- 1.1 Breakpoint
- 1.2 Rewrite
- 1.3 Map Local
- Proxy:
- 2.1 Throttle Settings
- 2.2 Reverse Proxies
- 2.3 Port Forwarding
- 2.4 MacOS Proxy / Windows Proxy
- Tools:
- 3.1 No Caching
- 3.2 Block Cookies
- 3.3 Map Remote
- 3.4 Block List
- 3.5 DNS Spoofing
- 3.6 Mirror
- 3.7 Compose
- Recording Settings
- Focus
- Repeat
- Repeat Advanced
1. Data substitution
Let's imagine that we need to test the layout on the client. You need to check how a large number of user bonuses will be displayed. One of the options that many will offer: change the number of bonuses in the database and check on the client. Yes, you will be right! However, the server may have a cache, and you need to wait a while until the number of bonuses is updated, or just connect to the database itself and execute the request - this takes a certain amount of time. There is an easier option: change the response from the server! Charles Proxy has three ways to spoof data:
1.1 Breakpoint
Breakpoint is a kind of breakpoint for a request. When a request from the specified list is found, a separate window opens for further manual interaction with the request parameters. In it, go to manually changing the requests and responses. It is convenient to use this function when testing API or different server responses.
We have an application and a user profile who currently has 0 bonuses on their account:
The request in which this amount of bonuses comes:
https://api.youla.io/api/v1/user/5e6222bbbedcc5975d2375f8
To "hang" Breakpoint on the request, go to the Proxy → Breakpoint Settings section . Next, check the Enable Breakpoints → Add checkbox , and in the "Edit Breakpoint" dialog box that opens, paste the request URL as shown in the screenshot:
For example, check the "Request" and "Response" boxes. Then click OK , and OK again in the Breakpoint Settings window. Now run the request again, that is, the client will re-open the screen with the user profile.
In Charles Proxy, we can see that the request is paused:
Here you can change the request parameters. But now you do not need to do this, click “Execute”. Next, we pause the already received response from the server. This is where we need to edit the "Response". Find the required parameter -
bonus_cnt»: 45.
Then change the value of the parameter
bonus_cnt, for example, to 1,000,000 bonuses, and click "Execute".
The client displays the new amount of bonuses. We are rich!
1.2 Rewrite
Rewrite is a tool that allows you to create rules that modify requests and responses as they go through the Charles Proxy. For example, you can add and change a title, search and replace text in the body of a response or request, etc.
Let's try using Rewrite to change the number of our user's bonuses. To do this, open Tools → Rewrite → check the box “ Enable Rewrite “ → Add . In the Name field, you can enter any name for the substitution, for example, "Change bonus", or leave the default "Untitled Set".
The next step is to add the request path to "Location". To do this, in the Location → Add sectionfill in the following fields and save:
Host:
https://api.youla.io
Path:
/api/v1/user/5e6222bbbedcc5975d2375f8
After you have added the request path, you need to change the parameter itself and its value. To do this, you need to create a Rewrite Rule :
Type: Body (because the parameter is in the body);
Where: Response (because the parameter is in the response from the server);
Match section: in "Value" specify the value and the parameter that the server returns;
Replace section: In "Value" specify the value and parameter that you want to see on the client.
Next, save the "Rewrite Rule" and click OK on the "Rewrite Settings" tab. On the client, re-request the user profile again. You have automatically changed the number of user bonuses. We are rich again!
1.3 Map Local
Map Local is a tool that allows you to use local files as if they were part of a server.
Go to Tools → Map Local.
Next, in the Map Local Settings window, click Add → Host:
https://api.youla.io/api/v1/user/5e6222bbbedcc5975d2375f8→ Local path: the path on the computer to the file. You can use ready-made media files, HTML, CSS, JSON, XML. It is more suitable, of course, for developers so as not to upload data to the server for its subsequent testing, but a tester can also find a competent application. We have prepared the answer that we will need in advance and saved it to the change_bonus.json file:
Save the entered values in the "Edit Mapping" tab and on the "Map Local Settings" tab.
On the client, re-request the user profile again. You have automatically changed the number of user bonuses. We are rich again!
Let's take a look at other features of the Charles Proxy tool. And let's start from the very beginning, with the "Proxy" tab.
2.1 Throttle Settings
Throttle Settings is a function that allows you to set different parameters of the connection speed with the selected domain.
A function for those who like to test in the elevator, in the subway, in the underpass. Let's go to Proxy → Throttle Settings → the Enable Throttling checkbox . If you do not understand all of the above points, you can use the Throttle preset and select the appropriate speed for the test, and the system will automatically fill in the rest of the fields.
If you select "Only for selected hosts", then you can set a specific host to which your settings will apply. Here you can use ready-made presets with settings for various types (4G, 3G, etc.). And you can also set various parameters, I will briefly list some of them:
Bandwidth is the maximum amount of data that can be transferred over time.
Utilization is the fraction of the total bandwidth that can be provided to the user at any given time.
Latency - latency in milliseconds on firts request between client and remote server.
MTU is the maximum transmit unit for the current preset.
Reliability - A measure of the likelihood that a connection will fail. Used to simulate unreliable network conditions.
Stability is a measure of the likelihood that a connection will be unstable and, therefore, decrease in quality. Useful for simulating networks in which the quality of communication periodically drops, for example, mobile.
2.2 Reverse Proxies
Reverse proxy is a reverse proxy server. Typically used to receive requests from the Internet and redirect them to one of the web servers.
2.3 Port Forwarding
Port Forwarding , sometimes referred to as port forwarding, or tunneling, is the process of forwarding traffic addressed to a specific network port from one network node to another. This method allows an outside user to reach a port within the local network.
2.4 MacOS Proxy / Windows Proxy
MacOS Proxy or Windows Proxy (depending on your OS) - proxies traffic from your web browser.
Having dealt with the Proxy section, let's move on to the Tools section.
3.1 No Caching
The No Caching tool prevents caching by manipulating the HTTP headers that control response caching. Headers
If-Modified-Sinceand If-None-Matchare removed from requests, Pragma: no-cacheand are added Cache-control: no-cache. Headers Expires, Last-Modifiedand ETagare removed from the answer and added Expires: 0, and Cache-Control: no-cache.
3.2 Block Cookies
Block Cookies - The cookie header is removed from requests, preventing file values from being sent from a client application (such as a web browser) to a remote server. Also, the Set-Cookie header is removed from responses, preventing the client application from receiving requests to set cookies from the remote server. In the settings, you can enable cookie removal both for all hosts and for selected ones. The example below enables cookie deletion for all requests.
3.3 Map Remote
Map Remote - Allows you to redirect requests from one Map From URL to another Map To. Replaces the host, the entire path, or only the parameters, depending on your task. In the example below, the request from the prod server to the dev server is replaced.
3.4 Block List
Block List - allows you to block specific domain names. When a web browser tries to request any page from a blocked domain name, it will be blocked. You can choose either "Drop connection" or return 403 error.
3.5 DNS Spoofing
Shared hosting is when you have multiple sites on the same IP address, and the web server determines which site you are requesting based on the name entered into the browser. More precisely, the server looks at the host header sent in the request. For example, when you need to replace hosts so that when you enter an address in the browser (say, api.youla.ru), requests go to another address (for example, to a test site).
DNS Spoofing - redirects a domain name to a specific IP address.
3.6 Mirror
Mirror - This feature allows you to automatically save all responses returned to Charles Proxy. They are laid out locally in the same hierarchy as on the server. If suddenly there was a downtime on the backend, the test environment fell off, etc., you already have ready-made mocks for Map Local. You can activate the function like this: Tools → Mirror or Tools → Auto Save .
3.7 Compose
Compose is a function to edit the queries you caught.
For example, you add a product to your favorites, but for some reason it is not added. You can edit an already submitted request and send it again. To do this, select the required request from the list, right-click on it and select Compose . The request icon will change, and now you can safely edit it.
After you have changed the required values in the request, click on the "Execute" below to send the request to the server.
4. Recording Settings
Recording Settings - settings for displaying the lists of allowed and blocked domains.
In the "Options" tab, you can configure the limit, that is, the number of requests that Charles Proxy can record.
In the "Include" tab, you can select a specific domain to display packages.
In the "Exclude" tab, we can select those domains that need to be hidden during sniffing.
5. Focus
Focus - this function moves the domain to the first positions in the list.
6. Repeat
Repeat - sends a request to the server that is identical to the selected one.
7. Repeat Advanced
Repeat Advanced - identical to Repeat, only you can select the number of sent requests and the delay between them. This feature is useful when checking the server's response to flooding.
Here Concurrency is the number of users and Iterations is the number of times each request is repeated. You can also check the "Show results in new Session" box, in which case a new window will open where requests will be executed.
Summary
In this article, we tried to describe the Charles Proxy features that are used by mobile application testers. That's all, and do not forget to attach the session from the sniffer to the bug report.