Shulou(Shulou.com)06/03 Report--

This article introduces the relevant knowledge of "the use of charles tools". Many people will encounter such a dilemma in the operation of actual cases, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

1. Brief introduction to Charles

Many people call it a bag grabbing tool, and there seems to be nothing wrong with it. But officially it is defined as an Proxy. Let's see what the authorities say:

Charles is a HTTP proxy (or HTTP monitor, or reverse proxy) that allows developers to observe all HTTP and SSL/HTTPS traffic between their machines and the Internet. This includes request, response, and HTTP headers (including cookie and cache information).

Charles is developed with Java and supports Windows, macOS and Linux operating systems:

And, fortunately for Windows and macOS users, it supports system proxy settings, that is, using it as a system proxy, so you no longer have to set up browser proxies. Old ape I am more sad, using Ubuntu will not have this benefit, after starting Charles, there is an agent to set up Chrome. Fortunately, I use SwitchyOmega (you know), and it's not hard to add a new proxy to point to Charles.

2. Download and install Charles

We go to the official website to download a free trial version with a trial period of 30 days, but we can't use it for half an hour each time. We need to rerun charles.

Just choose the version that suits your system to download and install. The installation process is stupid, just click the next step along the way.

3. Configuration of Charles: http proxy

Take Windows as an example (macOS is similar)

Run Charles, which has been set to the system agent by default on Windows, and you can see the recorded http requests (if any) in the left column. Click the menu "Proxy" to see the default system settings. As shown in the following figure:

The green box in the figure shows that the Windows Proxy (system agent) has been selected, and the orange box is the http request that it records. Click "Proxy Settings …" in the red box. Menu, you can modify the proxy port. The default is 8888:

The Chrome browser under Windows uses the system proxy by default, so you can see the request recorded by Charles when you open the web page with Chrome.

Configure Chrome browser under Ubuntu (Linux)

Under Ubuntu, there is no choice like the "Linux Proxy" in the green box in the previous figure. We need to go to the Chrome browser to set up the proxy, but Chrome uses the system proxy. Therefore, we have two options to set up Chrome's proxy that uses Charles:

(1) go to system setup and set the system proxy to port 8888 of Charles

Open System Settings-> Network, and select Network proxy, as shown below:

(2) use the SwitchyOmega plugin as I did with the old ape.

Open the configuration page of the plug-in, click the New profile button on the left, fill in the name and create:

Fill in the address of the agent is 127.0.0.1 and the port is 8888:

After filling in, the Apply changes button on the left turns green and click it to save the configuration.

When you need to use Charles and Chrome to analyze your website in the future, you only need to select this agent for SwitchyOmega.

Configure Firefox browser under Ubuntu (Linux)

Open Preference-> General-> Network Settings of Firefox to configure the proxy:

Looking at the figure above, there are also two ways to use proxies for Firefox:

Use system proxy settings: using system agents

Manual proxy configuration: setting proxies manually

4. Configuration of Charles: HTTPS/SSL proxy

The above configuration is for HTTP, that is, the setting of non-encrypted requests, but the current network environment is encrypted transmission (HTTPS) has been quite popular, so we need to configure SSL/HTTPS accordingly, so that Charles can also capture and parse HTTPS transmissions.

If not configured, the captured HTTPS content will be garbled, as shown in the figure:

We can see that everything transmitted by HTTPS is, and the content on the right is also a lot of garbled code.

You should already know that HTTPS encrypted transmission relies on CA certificates, and configuring Charles to support HTTPS means importing Charles's own CA certificates into the system or browser.

(1) enable and configure SSL proxy for Charles

Click the menu Proxy-> SSL Proxying Settings, select "Enable SSL Proxying", click "Add", Host fill in * (that is, use agents for all sites), Port fill in 443, click OK to save. As shown in the figure:

(2) Windows imports the root certificate of Charles

Click the menu Help-> SSL Proxying-> Install Charles Root Certificate

Will jump out of the window to import the certificate, click "install Certificate" and install it step by step.

The certificate imported in this way is only valid for the IE browser that comes with Windows, while for third-party browsers such as Firefox and Chrome, you have to import the certificate from the browser yourself. If a third-party browser does not import the root certificate of Charles, it will look like this when you visit the HTTPS website:

Similarly, certificates imported in this way on macOS systems are valid only for Safari browsers that come with macOS.

(3) Chrome imports the root certificate of Charles

There are two ways to obtain a Charles certificate:

One is to Save the file from the software and click the menu Help-> SSL Proxying-> Save Charles Root Certificate. Save as a file.

Alternatively, Chrome enables the Charles agent, and the certificate can be downloaded by visiting chls.pro/ssl.

After getting the certificate file, open the certificate management window from the menu: settings-> Advanced-> manage certificates, click trusted Root Certificate Authority, and then click Import. " Button, and select the certificate you just got to import, as shown in the figure:

After successfully importing the certificate, remember to restart the Chrome browser to allow the certificate to take effect.

In this way, Charles can decrypt the HTTPS transmission of Chrome. Firefox imports certificates in a similar way and will not go into detail. Apes who use Firefox can try it for themselves.

This is the end of the content of "how to use charles tools". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.