Charles Proxy Tutorial for Mobile Developers and Testers

Can you imagine at least one day without using your mobile phone? It’s hardly possible. Those days when a phone was just something that supposed to ring have passed long ago. Currently, calling someone seems just a little part of a broad functional any smartphone has. And with a huge variety of applications, developers and entrepreneurs manage to embody new ideas to make a mobile device even closer to users.

But before an app product appears in the store, it should overcome a long way. Since now we want to get the best from the market and we trust new apps with tons of private information, testing (and double testing) is a guarantee that everything was done right.

One of the aspects you deal with while testing an application is data traffic. Today, we’ll tell you more about emerging bugs and how to cope with them in the tutorial below!

Packet Sniffers and Their Magic Skills

No matter what memories and associations you have on sniffing, it’s better to get used to the fact that this can be a professional term. Any tester should have an excellent nose or... have an appropriate tool to sniff any traffic problem on the way. These tools are called “packet sniffers”.

Packet sniffing is a testing activity connected with capturing packets of information while it’s traveling all over the computer network. A tool gathers a raw data, and its next task is converting it in a form easily understandable by a technician. This way, a person can see so-called “conversations”, which appear between network nodes. Sounds kind of fun and useful! But every medal has to sides.

When good testers fight on the light side of the network, there are plenty of Darth they meet on the way. The thing is, panel sniffers can be used also by hackers who are hunting for pieces of private information. Passwords and authentication tokens, beware, guys! And while this problem exists, testers should be always armed with their lightsabers. Sorry, with good panel sniffers.

Charles Proxy Tutorial, or How to Poison Bugs in Your Application

Welcome! If you’ve read till these lines and decided to stay, you might be very interested in the efficient debugging. Charles will gladly help you with that. Ready, set...

Simple installation - and we’re ready to work

First of all, you need to install Charles Proxy on your computer. To do this, visit the tool’s official website.

When it’s done, you need to check the IP of your PC. In our example, we used macOS: open terminal => type “ifconfig” and tap Enter.

Setting Charles from iOS devices

Settings for sniffing HTTP traffic from iOS devices

Step 1

On your iPhone, get to the Wi-Fi section. That would be easy: open Settings => Wi-Fi.

Sniffing HTTP traffic with Charles from iOS

Step 2

Here we go! When you’re there, tap on the connected Wi-Fi network. Now, you can see a screen with the information about this wireless network. You should scroll down till the very end and meet HTTP PROXY section there. After saying hi,  set Server and Port values.

In this case, the proxy server will be your PC, then you need set your IP address. We discovered it after installing Charles Proxy - “10.0.1.126”. The default port for Charles is “8888”.

Sniffing HTTP traffic with Charles step Proxy

Step 3

Leave your iPhone and turn to your PC again. Time to meet Charles tete-a-tete. Open installed Charles Proxy and click Allow on the pop-up.

Installed Charles Proxy

With this one click, you’ve just started to sniff all traffic from your iOS device.

Testing HTTP proxy connection

For checking, open Safari browser on the mobile device and go to any website. For example, tecsynt.com.

When the website is opened, go back to Charles. Look! Now, you might see this Request/Response:

Testing HTTP proxy connection

Step 4

To continue our work with sniffing SSL (https://) traffic, you need to install Charles Proxy certificate.

We use Charles’ website again: open Safari and browse to http://www.charlesproxy.com/getssl.

On the opened screen, you need to tap on Install button.

Install Charles Proxy certificate to Sniffing SSL traffic

And we continue with installation - tap Install on the next screen too.

Install Charles Proxy certificate to Sniffing SSL

It’s Done on the third screen. Yay!

Charles Proxy certificate to Sniffing SSL - Done

Step 5

Now, you should change SSL Proxying settings in Charles.

Go to Proxy section => Proxy Settings... => press on Add button.

Should change SSL Proxying settings in Charles

In the pop-up, you’ll see a port and a host. In our example, “tecsynt.com” is in the Host cell and “443” is its Port.

SSL Proxying Example

Step 6

That’s all for iOS. Let’s check how Charles is sniffing SSL traffic after installing CA. To see the final result, open Safari and browse tecsynt.com. This is what you should discover with Charles:

Charles is sniffing SSL traffic after installing CA

Using Charles with iOS simulator

Firstly, quit your iOS Simulator. Launch Charles and go to the Help section. Choose SSL Proxying => then Install Charles Root Certificate in iOS Simulators. With this step, you install your Charles Root Certificate into all of your iOS Simulators. Now when you start the iOS Simulator, you should be able to access SSL websites with Charles using SSL Proxying.

Install Charles Root Certificate into iOS Simulators

Settings for sniffing HTTP traffic from Android devices

Charles’ installation process is the same here as it was at the beginning of the tutorial. See Simple installation - and we’re ready to work - there we’ve already explained the installation process and checking the IP address of the PC.

Step 1

Now, work with your Android smartphone. Go to the Settings section => Wi-Fi.  When you got there, make a long tap on the connected network. After long tap, you should be able to see a pop-up as it shown below. Tap on Modify network here.

Sniffing HTTP traffic from Android devices

Step 2

After it’s done, you should tap on Advanced options on the next pop-up:

Sniffing HTTP traffic from Android devices Advanced Options

Among these options, you need Proxy settings. Change them from None to Manual.

Sniffing HTTP traffic from Android - Proxy Settings

Manual settings mean typing the Proxy hostname and Proxy port. In the hostname cell, set the IP of your PC and in Proxy port set “8888”. When the data is ready, press Save button.

Sniffing HTTP traffic from Android - Manual Settings

Step 3

Leave your mobile device and turn to your PC again. Time to meet Charles tete-a-tete. Open installed Charles Proxy and click Allow on the pop-up.

Meet Charles tete-a-tete

With this one click, you’ve just started to sniff all traffic from your Android device.

Testing HTTP proxy connection

For checking, open an Internet browser on the mobile device and go to any website. For example, tecsynt.com.

When the website is opened, go back to Charles. Look! Now, you might see this Request/Response:

Testing HTTP proxy connection step Request/Response

Step 4

To continue our work with sniffing SSL (https://) traffic, you need to install Charles Proxy certificate.

First of all, you should open Charles Proxy and save Charles proxy CA. In the opened Charles window, follow next steps: the Help section => SSL Proxying => Save Charles Root Certificate…

Save Charles Root Sertificate

Step 5

When Charles cert is saved, you should send it to your Android device via email. When you get the letter, save Charles root certificate on your Android device as any other document.

Step 6

When the Certificate is on your Android device, you should go this way: Settings => Security => Install from storage. On the opened screen, tap on the saved Charles cert:

Install from storage

In the appeared pop-up, set the Certificate name and tap OK.

Certificate name

Step 7

When Charles Certificate installed, you should be able sniffing SSL (https://) traffic. Let’s check. Open a browser on your phone and go to any https:// site (for example, tecsynt.com). You might see a window very similar to this one:

Sniffing SSL when Charles Certificate installed

We did it, congrats! And it didn’t hurt, right? From this day, both iOS and Android operating systems will obediently reveal their proxy secrets to you.

Burp Suite as Another Proficient Sniffer

There is one more skillful Java-based bloodhound that will help you to sniff out all bugs in your traffic. Actually, Burp Suite looks like a well-organized security system where network connections are only a part of the concept.

How exactly can you get the most out of this tool? Make sure you know all its broad functionality. For example, there is a feature called the Proxy history, which helps to record all necessary details about requests and responses flying around the Internet. You may also need to manipulate individual messages (view them, edit, or drop) - so you could operate client-side or server-side components.

Burp Suite

With Burp, you’ll probably want to use invisible proxying. Thick client applications and some other mobile products surely need this feature. Besides, configuring specific interception rules, you’ll be able to focus only on the interactions of the biggest interest. It looks like Burp Suite have all chances to become a new sniffing James Bond.

Smash That Bug!

There are some issues in our everyday lives we can’t completely get rid of. It’s like you can’t get rid of all bugs in the world, but fortunately, you have some instruments, with which you won’t meet them for some time. Developers, on their turn, have also invented some tools that allow them to see those quiet nooks where bugs hide.

Today, we’ve met a program named Charles. Hopefully, you’ll have only positive associations with this name from now on, as you won’t have to worry about app traffic anymore. We bet debugging is far easier for you now without extra anxiety and time spending. Enjoy!

Charles Tutorial by Tecsynt Solutions

Read Next

5 Best Ways to Prototype your Mobile Project
5 Best Ways to Prototype your Mobile Project
Tutorial: How to Send Push Notifications to Android Device
Tutorial: How to Send Push Notifications to Android Device
AWS vs. Azure vs. Google Cloud Platform: Comparison for 2017
AWS vs. Azure vs. Google Cloud Platform: Comparison for 2017
PostgreSQL vs MySQL. How to Choose Database for Your Project?
PostgreSQL vs MySQL. How to Choose Database for Your Project?
Don’t leave us hanging!
[email protected]
Get in Touch