Inspecting Mobile App Traffic Using Charles Proxy

There are many reasons you may want to inspect mobile app traffic using Charles Proxy. You may want to change the responses which come from your server during testing. You may want to see how your favourite app works. In this tutorial I am going to show you how you can use Charles Proxy to inspect mobile traffic.

Charles is an HTTP proxy / HTTP monitor / 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).

Getting Started

There are several steps you will want to complete to successfully inspect mobile app traffic using Charles Proxy:

  1. Connect your device to Charles Proxy;
  2. Generate a self-signed SSL Certificate;
  3. Add a self-signed certificate to Charles Proxy.

Connecting your device to Charles Proxy

You first need to make sure that your device is on the same network as your computer. You need to be able to access your computer from your device for this to work. Once you have both your computer and your mobile device on the same network. On your computer (assuming you are on a Mac), go to System Preferences and click on Network. Within the left-pane select the connected network and in the right-hand pane take note of the IP Address.

Network Settings

On your iOS device open the Settings App and tap Wi-Fi. Tap on the ‘information’ icon for the connected Wi-Fi network and in the settings screen which is open change the HTTP PROXY to Manual and tap on the Server and enter the IP Address you noted early. Repeat the process for Port this time entering the value 8888.

Go ahead and open Charles Proxy on your computer, now open up Safari on your iOS device and go to any page you want. If everything worked correctly you will see a dialog similar to the following.

Charles Proxy Allow Dialog

Click Allow and you should see the traffic from your iOS device in Charles Proxy.

For demonstration purposes I am going to inspect traffic from the iOS App TrainerRoad. Upon opening the app on my phone I see this in Charles Proxy.

TraineRoad Charles Proxy No SSL

TrainerRoad has made calls to ‘xappi.xamarin.com’, ‘api.trainerroad.com’ and ‘trainerroadcdn1.blob.core.net’. When inspecting ‘trainerroadcdn1.blob.core.net’ I can see it has made a call to ‘/avatars/8b4189bf-3778-4d36-af4f-a0ecab0b1fd4/225×225.png’ and I can also see the returned image.

TrainerRoad Avatar

Doing the same thing to any of the HTTPS requests doesn’t work out as well and I am unable to see the details of the request.

Obscured Request

Generating a self-signed SSL Certificate

If the mobile app communicates over SSL you are going to need an SSL Certificate to see the traffic. There a number of ways of getting the SSL Certificate. If you have a copy you can just upload this to Charles Proxy and you are all set. It is possible to download an SSL Certificate from a server but you won’t have the password and when you try and upload to Charles Proxy it won’t work correctly. If you want to download from a server though you can do it like this:

openssl s_client -showcerts -connect api.trainerroad.com:443 </dev/null 2>/dev/null|openssl x509 -outform PEM > trainerroad.pem
openssl pkcs12 -export -in trainerroad.pem -out trainerroad.p12

For use in Charles Proxy you can generate a self-signed SSL Certificate, when generating a self-signed certificate you just need to set the Common Name to the host you want the self-signed SSL Certificate for. For example in our example the following hosts are communicated with over SSL: ‘xaapi.xamarin.com’ and ‘api.trainerroad.com’. To generate your own SSL certificates for these two domains follow the following steps:

Open a terminal window and type the following:

openssl req -x509 -newkey rsa:2048 -keyout xaapi.xamarin.com.pem -out xaapi.xamarin.com.pem

PEM Pass phrase: password
Country Name: Hit enter
State or Province Name: Hit enter
Locality Name: Hit enter
Organization Name: Hit enter
Organization Unit Name: Hit enter
Common Name: xaapi.xamarin.com
Email Address: Hit enter

Now type the following command:

openssl pkcs12 -export -in xaapi.xamarin.com.pem -out xaapi.xamarin.com.p12

Pass phrase: password
Export Password: password

We now need to repeat the process for ‘api.trainerroad.com’, again in the terminal window type the following:

openssl req -x509 -newkey rsa:2048 -keyout api.trainerroad.com.pem -out api.trainerroad.com.pem

PEM Pass phrase: password
Country Name: Hit enter
State or Province Name: Hit enter
Locality Name: Hit enter
Organization Name: Hit enter
Organization Unit Name: Hit enter
Common Name: xaapi.xamarin.com
Email Address: Hit enter

Now type the following command:

openssl pkcs12 -export -in api.trainerroad.com.pem -out api.trainerroad.com.p12

Pass phrase: password
Export Password: password

Adding Charles Proxy Certificate to your iOS Device

With your iOS Device connected to Charles Proxy as detailed early, visit the address ‘www.charlesproxy.com/getssl’ in Safari. You will see an option to install the Charles Proxy SSL Certificate, tap Install to add to your phone.

Charles Certificate

Add a self-signed SSL Certificate to Charles Proxy

Within Charles Proxy, right-click on the ‘https://xaapi.xamarin.com’ in the Structure window and click ‘Enable SSL Proxying’. Repeat this process for ‘https://api.trainerroad.com’, with both hosts set to inspect SSL traffic we just need to upload the relevant SSL certificates. Within the Proxy menu click SSL Proxy Settings… and select the Client Certificates tab. Click Add and enter the host xaapi.xamarin.com and click the Choose button and select the certificate ‘xaapi.xamarin.com.p12’. We now need to repeat this process for api.trainerroad.com, click Add again and enter the host api.trainerroad.com and click the Choose button and select the certificate ‘api.trainerroad.com.p12’, and click OK.

Now open up the TrainerRoad app and you will see a prompt within Charles Proxy asking for the certificate password, within this dialog type ‘password’ and hit OK.

Certificate Password
This time when the app connects to Charles Proxy we can see the SSL traffic and its data.

SSL Traffic

Where to go from here?

In this tutorial you’ve learnt how to: connect your device to Charles Proxy, Generate a self-signed SSL Certificate and add that self-signed SSL certificate to Charles Proxy. Charles Proxy is capable of much more, you can amend responses, throttle bandwidth, map calls locally or remotely, add breakpoints, and much much more. So why not give it a go and amend some responses from the app and see how it behaves, try throwing a 500 HTTP Status Code from some API calls.

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *