Why would I want to investigate the traffic that is made from a native iOS application ?
There are several reasons for which you would like to be able to see which are the requests a native application is making to the server side:
– to debug an issue that is happening in the application when you don’t have access to the server logs
– to check how the application is built in terms of the APIs that they are calling
– to check the security of an application
– to retry and make the same requests manually or automatically from an automation framework
– more details on how to debug native and HTML5 apps
How can I debug the traffic coming from a native application ?
The answer is very simple. All you need for being able to inspect the traffic is:
– have access to a WiFi network where both a laptop and the device that has the application are connected
– install an application called “Charles Web Debugging Proxy”
How to configure the iPhone device so that the traffic appears in Charles ?
There are a few steps that you need to do to get to the point where you can see the traffic in Charles.
1. First find the IP address of the laptop where you installed Charles. You can find that pretty easily by using the
following commands from the terminal:
"ifconfig" for Linux/MacOS "ipconfig" for Windows
2. Go to the iPhone device to Settings -> Wi-Fi. Click on the blue disclosure arrow to configure the network.
3. Scroll down until you get to the HTTP Proxy session. In there enter the IP of the laptop in the Server section, port 8888 in the Port section and leave Authentication Off.
4. Now open an application from you iPhone, for example Instagram.
5. You should see a prompt in Charles when you first make a connection from the iPhone, asking you to allow the traffic.
6. Now you will be able to see the traffic that is coming from your iPhone in Charles.
7. Remember to disable the HTTP Proxy in your Settings when you stop using Charles, otherwise you’ll get random network failures in your applications!
How can I see what is sent in the request that are made over https ?
For being able to see the content of the requests made over Https you need to follow the below steps:
1. On your iPhone, after you have set up Charles as proxy, open Safari and browse to http://www.charlesproxy.com/getssl. Safari will prompt you to install the SSL certificate.
3. Now you should be able to access SSL websites with Charles using SSL Proxying.
4. Go into Charles at Proxy -> SSL Proxying Settings and add the host of the call that you want to see the content for.
In our case the host is i.instagram.com and the port is 443.
5. Now go back to the iPhone and open the application again, in our case Instagram.
Now the traffic that is coming from the application will be shown as decrypted in Charles.
Hope this will help you debug your native applications more easily.
Thanks for reading. I hope you learned something interesting about React!
If you found this article useful, please share it with others. Don’t forget to subscribe to get notified for the upcoming articles.