IOS development-use Charles for http packet capture

IOS development-use Charles for http packet capture

In my previous blog "introduction and use of the network packet capture tool Charles", I briefly introduced the installation and cracking of Charles and the introduction of Charles packet capture configuration. Today we will introduce in detail how to use Charles to capture http packets. for https packet capture, I will introduce it in another blog.

(1) For http packet capture configuration, refer to the introduction and use of the network packet capture tool Charles.

(2) In order to make the packet capture result clear and easy to debug, I wrote a simple network request and clicked the button to request the number to be located. The Code is as follows:

 

# Import "ViewController. h "@ interface ViewController () @ end @ implementation ViewController-(void) viewDidLoad {[super viewDidLoad];}-(IBAction) networkRequestPressed :( id) sender {NSString * urlAsString = [@ "http://webservice.webxml.com.cn/WebServices/MobileCodeWS.asmx/getMobileCodeInfo? MobileCode = 18888888888 & userId = "Scheme: [NSCharacterSet Scheme]; NSURL * url = [NSURL URLWithString: urlAsString]; optional * urlRequest = [NSMutableURLRequest requestWithURL: url]; [urlRequest setTimeoutInterval: 30]; [urlRequest setHTTPMethod: @ "GET"]; // This request method is recommended; NSURLSession * session = [NSURLSession sharedSession]; _ block NSString * result = @ ""; optional * dataTask = [session dataTaskWithRequest: urlRequest completionHandler: ^ (NSData * _ Nullable data, NSURLResponse * _ Nullable response, NSError * _ Nullable error) {if (! Error) {// no error. The returned result is correct. result = [[NSString alloc] initWithData: data encoding: NSUTF8StringEncoding]; NSLog (@ "the returned result is correct: % @", result);} else {// error; NSLog (@ "error message: % @", error) ;}}]; [dataTask resume] ;}@ end

(3) After you click the button to request a network, the following result is returned:

 

.

 

(4) The following describes how to configure the packet capture tool Charles ). Note: You need to test it on a real machine! After making a network request, Charles outputs the following:

.

 

I will explain the above http packet capture results.

[1]

The left side shows the Structure: Structure shows the tree Structure, and Sequence shows the horizontal Structure. The two are similar. I will introduce them in a tree structure. The tree structure on the left is the url link for my network request. Each level represents the subdomain names separated. Through the code above, we can also see that the url link of my GET request is: http://webservice.webxml.com.cn/WebServices/MobileCodeWS.asmx/getMobileCodeInfo? MobileCode = 18888888888 & userId =; consistent with that shown in the tree structure.

[2]

.

 

The right side is the details page, where the first Overview is the Overview. I will introduce some fields:

(1) URL: the link to my network request;

(2) Status: The Current Status. complete indicates that the request is completed;

(3) Responce Code: return Code. Different interfaces and different request results have different return codes;

(4) Protocol: used Protocol;

(5) Method: Request Method, such as GET request and POST request;

(6) Kept Alive: determines whether the link is currently active );

(7) Content-Type: the Type of the Content to be sent. For example, XML text is used for sending in UTF8 mode;

(8) Client Address: the IP Address of the Client;

(9) Remote Address: IP Address of the Remote server;

 

Timing:

(10) Request Start Time: the Request Start Time;

(11) Request End Time: the End Time of the Request;

(12) Response Start Time: return the Start Time;

(13) Response End Time: return the End Time;

 

Size:

(14) Request Header: size of the Request Header;

(15) Request Header: size of the returned Header;

(16) Request: Request size;

(17) Response: the returned data size;

(18) Total: All data sizes;

(19) Request Compression: Request Compression;

(20) Response Compression: Return Compression;

 

[3]

.

 

The second page is about request sending. The following Headers, Query String, Raw.

(1) Headers: the header information of the request;

(2) Query String: List of sending parameters;

(3) Raw: Native data sent, including the header and parameters;

 

[4]

.

 

The Response on the right is about all returned information.

(1) Headers: The returned header information;

(2) Text: the Text after the returned information (excluding the header;

(3) Hex: hexadecimal representation of the returned information;

(4) XML: the data I return is XML. If JSON is returned, JSON is displayed;

(5) XML Text: If you return JSON, JSON Text is displayed;

(6) Raw: All the returned native data, including the header;

 

[5]

.

 

It contains some brief information about sending data.

 

[6]

.

Is a chart representation of some brief information.

Now I will introduce some frequently used tool bars on top of Charles:

(1) New Session: Creates a New Session. That is, you can view the network conditions on a New Charles interface;

.

(2) Open Session: Open a previously saved Session;

.

(3) Close the current Session: Close the current Session;

.

(4) Save the current Session: Save the current Session;

.

(5) Clear the current Session: Clear the current Session (convenient and commonly used );

.

(6) Find Text in the current session: equivalent to the search function;

.

 

In summary, using Charles to capture packet network requests gives us a rough idea of the project process, which is helpful for starting a complicated project. This also helps us test network conditions, debug programs, and monitor performance. At the same time, network packet capture is not limited to iOS development, but can also be used in other development fields. Of course, some apps may have so-called Backdoors that steal the privacy of your mobile phone. Can you also identify them by capturing packets? In the next blog, I will introduce how to perform Charles's https packet capture.