Today’s websites are basically https, and charles is a commonly used http packet grabbing tool, so debugging https requests with charles is a common need.

Today I will share how to debug https requests with charles and how to interrupt points.

First install charles, click on start recording:

The browser visits some pages, and the left side displays the http/https request that was caught:

But at this time, what is caught is the encrypted content, which is caused by the https mechanism:

The server will issue a certificate that has been authenticated by the CA, which contains the public key, and the server retains the private key itself, through this mechanism to complete the transmission of the symmetric key and the authentication of the identity, and then encrypt the transmitted data.

The data obtained by the middleman is naturally encrypted, that is, the garbled characters in the above figure:

So how can the bag grabbing tool get the plaintext data?

Wouldn’t it be enough to use the server’s certificate and server-side docking?

And that’s it:

Charles himself uses the server’s certificate to communicate with the server, and then gives the browser his own certificate, so that he can decrypt the transmitted content and get the plaintext data.

Click SSL Proxy Setting for Proxy:

Add an https proxy for juejin:

This is the certificate before juejin:

The agent is then replaced by Charles’s certificate, but will indicate that it is not safe:

This is because the system has a place where all the root certificates are stored, and the certificates that exist there and are trusted are secure.

Click help > SSL Proxying > Install Charles Root Certificate to install it in your system’s keychain:

Change to Always Trust:

At this point, the browser will be marked as safe:

And in charles you will see the plaintext http request and response content:

The principle of this process is this diagram:

Now we can grab the https package, but it is not enough, now we can only see, in many cases we hope to modify the request and response content, then we have to use the breakpoint function:

Right-click the request and tick breakpoints:

Then turn on the breakpoint:

Refresh the page and you’ll see it breaks:

The following three buttons are the meaning of canceling, terminating, and executing the modified request.

Above you can change url, add header, and change the request content and cookies:

Click execute and the request will be sent.

After that, the response will be broken, and the response can be modified in the same way:

For example, I modified the title, and after clicking execute, the web page I saw was modified:

This allows us to debug https requests by breakpoints.

Why is breakpoint functionality possible?

This is easy to understand, how to request, how to respond is controlled by Charles, then want to implement a breakpoint and editing function, isn’t it easy?

Some students may ask, how to debug the mobile terminal?

In fact, it is the same, except that the mobile terminal also needs to install the Charles certificate into its own system, and you need to click to install the charles certificate to the mobile device:

He will prompt you to set up a proxy server on your phone and then download the Charles certificate:

The principle is the same as when we download the Charles certificate on the PC, and the subsequent process is the same.

In addition, chrome has a browser plugin that can control agents with more granular control, called SwitchyOmega:

You can configure several proxy servers, such as charles’ proxy server:

This can be configured in Charles’s Proxy > Proxy Setting:

You can then configure what URLs use what proxy, or connect directly without proxies:

When you have multiple proxy servers, or want to control some pages to go proxy and some do not go, you can use this plugin to control.

Debugging https requests with Charles is a common requirement, which requires installing Charles’s certificate to the local system, then trusting it, and then you can grab the plaintext data.

The principle is that Charles will use the server’s certificate to communicate with the server and then issue a certificate of his own to the browser.

Charles also has breakpoint debugging capabilities that allow you to modify the data for requests and responses.

The same principle applies to mobile https debugging, except that you need to configure the proxy and certificate.

If you want to switch proxy servers or set some pages not to go to the proxy, you can use the Chrome plug-in SwitchyOmega to control.

It is still very meaningful to debug https requests with breakpoints, such as changing the header and changing the body to see what effect it will have, and there are many usage scenarios.