My goal with this article is to help the readers understand how to do HTTP debugging of a mobile app using an actual mobile phone or a tablet and making use of proxies like mitmproxy and Charles. I will also try to cover Wireshark (you can also read my earlier articles on Wireshark where i described how Wireshark can be used to capture passwords and capturing packets.)
By the end of this article, here is what you will learn
a. You will learn how to do HTTP level debugging of your mobile app, using an actual mobile phone. A sample use-case to help you understand would be – “hey, is the app actually making a call to my server or not”.
b. You will learn some stuff about tools like Charles as well as a bit about Wireshark.
and for this article am going to assume that you know about HTTP (and status codes) and you know how DNS resolution works, so am not going to dig into those topics. All am going to focus on is, how you can setup these tools and get started with debugging your mobile app using an actual device for any HTTP / DNS specific issues.
am also assuming that you have a wifi router at home or work which you will be connected to when following the instructions on this tutorial. You will need your computer and the phone to be connected to the same wifi network.
last admin note, before we get to the meat of the article – You can click on any image below to see a larger version of the image.
Getting started with iOS HTTP Debugging using Charles
1. First thing you need to do is download and install Charles (Download page link). Charles is a HTTP Proxy / Reverse Proxy that enables a developer to view all of the HTTP and SSL / HTTPS traffic between their machine and the Internet. This includes requests, responses and the HTTP headers (which contain the cookies and caching information).
Download Charles version specific to your Operating System. For the purpose of this tutorial, am going to download a Mac edition.
Just a note on licensing - Charles is available as a shareware and will work as you expect it to, for 30 days. After 30 days it will ask you to purchase a license, which is usually available for $50 at the time of writing this article (for upto 4 users). You can ignore purchasing the license, but then you will often see Charles stopping and delaying you for 30s before resuming.. not too pleasant an experience, if you are going to use the software very regularly.
2. Once you have downloaded and installed Charles, next step is to Launch the application on your computer.
Charles listens by default on 8888. For this tutorial, am not going to change the port – but in case if 8888 is busy on your computer (you might have a development webserver or an app server running on that port), then you can do a quick google search on how to change listening port of Charles.
If you are on a mac you can type ifconfig to get the ip address of the interface attached to your wireless network. (see screenshot below on how i have got the address on my mac)
for those on windows, you can get your “internal” ip address by typing iconfig at the command prompt
3. Next step is to make the iOS Device (it can either be an iPhone, iPad or an iPod Touch) and Charles (which is running on your computer) talk to each other. For the purpose of the tutorial, am configuring an iPad.
4. With the above step completed, now your iOS Device and Charles are able to talk to each other.
5. Open any app or a browser and all the HTTP traffic originating from the app should be proxied through Charles and therefore visible on Charles.
Let me walk you through an example here (check the pictures below)
Let’s say you are the developer of the NDTV app and you want to be sure that the ad call at the bottom of the page (see green arrow in the image below) is indeed happening. To confirm that you can open Charles and start browsing NDTV app. All the HTTP requests will get logged by Charles.
Screen below shows how Charles’ interface looks. You can note that there are two tabs
Structure and Sequence. Structure will log all the requests as per the domain and sequence will list them in a way that you can see the actual sequence in which the app fires the HTTP requests.
Structure is good if your goal is to ensure that the requests to a domain are indeed happening in the way that the domain / service expects, i.e. you are following the contract of the API / service or not.
Sequence is good if you wish to make an HTTP request only after a specific HTTP request has been processed.
The red arrow in the image below shows that the ad call is indeed happening to InMobi (mobile ad network).
On the right hand side, you can see that there are various tabs to help you with request and response details.
There is another way of capturing packets and that is something i have done with Android in the past (as there was no way in Android to specify proxies for the wifi network earlier. Its available with Android 4.0.3 onwards)
Using Wireshark to capture Packets flowing through your Mobile App (Hotspot Method)
Theory – This method requires you to turn your computer into a hotspot (a.k.a access point). The phone / tablet can then connect to this hotspot, which will allow all packets from the mobile device to be routed through the computer. Your computer will be at the same time, running Wireshark to capture the packets for analysis.
Now lets get started with making this setup work. I will be using a Macbook Pro running Mountain Lion to explain the entire process. For those of you on Windows, you can do a quick google search on converting your Windows computer into a Hotspot (also worth trying for Windows users is Connectify)
Turning a Macbook Pro running Mountain Lion into a Hotspot
a. In order to turn your Mac running Mountain Lion (i am specifying the instructions for Mountain Lion, but they are largely the same for Mac OS X in general), you first need to head to the System Preferences.
b. Under System Preferences, look for the setting called “Sharing” (see screenshot below). Sharing is the larger control panel to enable or disable all types of sharing (file sharing, printer sharing, internet sharing and many more) on your Mac OS X (Mountain Lion in my case).
c. Look for the control titled “Internet Sharing”. You need to specify the connection you wish to share and also the connection method with which you will share connections. In my case, am sharing my ethernet connection using the Wifi interface.
Do note that you would be alerted to start internet sharing, in case its not turned on. In my case as Internet Sharing was On, i didn’t get that alert.
At the end of the step, ensure that your screen looks similar to the image above. The core points to note are:
- you have selected internet sharing (checked the checkbox as shown by the red arrow)
- specified a connection to share (as shown in my case with the blue arrow)
- specified the interface that you would like to use to share the connection (as shown using green arrow).
d. Once you are done with the above step, you will be able to share your Mac’s internet connection with other computers using the interface you have specified (in my case Wifi). (see image below)
See the arrow has turned UP, indicating its acting as a host.
So now that your computer is acting as a Hotspot, the next step is to make the Android or iOS Phone (i usually follow this step for Android, but conceptually its the same for Android and iOS) connect to this hotspot and launch Wireshark.
I am assuming that you have connected your phone to the SSID broadcasted by your Mac and now your phone or tablet is sending all internet requests to the mac sharing its internet connection.
On this Mac, we will now run Wireshark. Wireshark is an amazing tool for packet sniffing and analysis which i have been using since a very long time (when it was called Ethereal) and it allows for capturing packets flowing through an interface. You can select the interface for which you wish to capture traffic and it will do so.
Do note that on Mac, you will need X11 to run Wireshark and X11 is not part of the Mountain Lion, so you should first download it from xQuartz page.
e. When you launch Wireshark and start the capture (Wireshark should also be part of your hacking toolkit, just in case you didn’t know) , it will ask you to select the interface to capture. This essentially means that Wireshark wants to know which network interface it should listen to and capture the packets flowing through the interface.
You can see that there are all the interface listed on the left (i have annotated it using a red rectangle) and on the right hand side, there is a Start button, which when clicked will start capturing traffic for that particular interface. Press the Start button for the interface relevant to you. If you are on the wireless network, it will be en1.
f. In parallel, we have also launched an app. I am browsing through the Flipboard app on my iPhone and will show you relevant requests flowing through Wireshark for this app.
g. Here in the screenshot below, you can see that we have specified a filter to be able to capture only the requests which match certain pattern and reduce the noise. The filter that i have specified will capture all requests which have flipboard in URL.
You can see that the host of the request was cdn.flipboard.com and the requesting method was a GET and then there are multiple other details, which i am not going to cover right now (possibly another post in future).
Similarly, you can capture different requests and then do a detailed packet level analysis of the request and response received from the server.
So this bring us to the end of this tutorial. Do comment and let me know if you liked it or not and if you have any other feedback.
Follow me on Twitter at @vaibhav1981 Charles, How-To, Mobile, mobile app debugging, Packet Sniffer, packet sniffing, Wireshark