MOBILE APP LOG VERIFICATION USING CHARLES PROXY

INFOSTRETCH
MOBILE APP LOG VERIFICATION USING CHARLES PROXY
SOLUTIONS

Written by:
Vidit Gohil
Enterprise QA | InfoStretch

[AUTHOR NAME] 1
MOBILE APP LOG VERIFICATION USING CHARLES PROXY

Introduction

Charles Proxy is exactly what its name implies a proxy. This proxy is special however, as it is specifically aimed at
giving functionality that developers will need. It allows you to view, change and replay the traffic that passes
through, and can handle SSL.

Problem Definition

There are some scenarios from Non Functional testing, we need a help from third party application which can be
used to resolve the issues like:

1. How tester can test a network latency?

2. How to test mobile app in various network conditions, think that you don’t have control no network
device and still want to perform the test like real time scenario.
3. Think how a tester can test what is being sent server upon logging into an app.
4. How to catch a network issue that happens for a while and can’t be reproduced most of the time.
5. Is my user credentials secure while logging into my Gmail account? How tester can assure this?
6. How to test customer’s promotional videos on mobile app are being streamed in real-time conditions?
7. How can tester assure that mobile app doesn’t have any vulnerabilities?
8. How tester can assure that the data variables configured for an Online Business Optimization tool are
correct?

[AUTHOR NAME] 2
MOBILE APP LOG VERIFICATION USING CHARLES PROXY

About Charles Proxy (Web debugging proxy application):

Charles is a web proxy (HTTP Proxy / HTTP Monitor) that runs on your own computer. Your web browser (or any
other Internet application) is then configured to access the Internet through Charles, and Charles is then able to
record and display for you all of the data that is sent and received.

In Web and Internet development you are unable to see what is being sent and received between your web
browser / client and the server. Without this visibility it is difficult and time-consuming to determine exactly
where the fault is. Charles makes it easy to see what is happening, so you can quickly diagnose and fix problems.

[AUTHOR NAME] 3
MOBILE APP LOG VERIFICATION USING CHARLES PROXY

Solutions by Charles Proxy

1. Debugging HTTP Connection and Sessions
2. Debugging Network Issues That Only Occur On Devices
3. Testing Mobile App In Various Network Conditions
4. Debugging Video Streaming Issues
5. Discovering Vulnerabilities In Mobile App
6. Omniture testing
7. Password security concerns

System OS supported by Charles Proxy:

1. Windows (64/32 bit) Compatible with Windows XP/7/8.
2. Mac OS X - Compatible with Mac OS X 10.3 - 10.9
3. Linux

[AUTHOR NAME] 4
MOBILE APP LOG VERIFICATION USING CHARLES PROXY

Set up a Charles environment between windows/MAC system and iOS/Android

devices:
Pre-requisite: Device and System must be on the same Wi-Fi network.

Windows/MAC OS System:

1. Download and Install the Charles Proxy application from web URL: http://www.charlesproxy.com/download/
2. Launch the Charles into system.
3. Go to Help Menu and click on LOCAL IP -> Enter the IP Address of the system on which the Charles is running -
>Enter the Port as 8888.

Android/iOS Device:

1. Install Charles SSL Certificate on your device, visit below URLs on your device and accept the security warning:
http://charlesproxy.com/charles.crt

2. Go to Settings -> Wi-Fi -> Tap and hold Wi-Fi SSID -> Modify Network -> Show advanced Options -> Proxy
Settings -> Manual-> Proxy host Name: IP Address of the system on which Charles is running and Proxy Port:
8888

3. Turn off cellular data to ensure all traffic is run through Wi-Fi/Charles Proxy.

Go to computer system and Launch Charles and switch to the “sequence” tab in the top window to see each call
and status as they are made in real-time, including response size and duration. Click on a request to view details
in the bottom pane including: Overview, Request, and Response & Summary.

[AUTHOR NAME] 5
MOBILE APP LOG VERIFICATION USING CHARLES PROXY

Debugging HTTP Connection and Sessions:

Basic use of Charles will be just having it running in the background while you test your application in the device.
In this way, you can actually capture the network calls that your app is making and what responses it is getting
back.

Here are some scenarios where using Charles can be useful to debug:

1. If you see an empty screen in your app when it’s supposed to fetch some data and display it, then the first
thing I would check is if the data is actually being returned from the network request.

2. If you app is sending some data to a server to be saved or processed and you’re not getting the expected
result.

3. Your app is making a call to some API and you’re not receiving the expected results.

4. And anything else that relates to your app making/receiving network calls/responses.

For any of the scenarios above and more, the first thing I would do is double-check that my app is sending the
request and parameters that I’m expecting it to, and secondly, that my app is receiving the responses that it is
expecting.

Monitoring that network traffic coming in and out of your app is as simple as having Charles Proxy open while
you’re testing your application in the iOS Simulator/device. When you open Charles Proxy, don’t be shocked if it
starts logging things that your app isn’t connecting to. The proxy is monitoring all the network traffic from any
app that you’re running.

Below is a screenshot of what Charles Proxy looks like.

[AUTHOR NAME] 6
MOBILE APP LOG VERIFICATION USING CHARLES PROXY

On the left hand side, you can see the top level domains that your app is making requests to. You can expand
the tree nodes to see the actual requests. Select a request to see the detail on the pane on the right hand side.

On the right hand side, you can see an overview of that specific network call such as latency, time elapsed etc.
You’ll notice tabs near the top of the right hand side. Click “Request” or “Response” to view the actual data of
the network request or response.

By inspecting the requests that your app is making and the data that is coming back, you’ll be able to identify
issues that may end up causing you hours of headaches down the road.

[AUTHOR NAME] 7
MOBILE APP LOG VERIFICATION USING CHARLES PROXY

Debugging Network Issues That Only Occur On Devices

Have you ever encountered a bug that you weren’t able to reproduce in the iOS Simulator but only later
discovered that it is only reproducible on the actual device?

For network related issues that are only reproducible on the actual iOS/Android device, Charles Proxy can help
you identify the cause of the bug (On a side note, there’ve been many cases where what I thought was NOT a
network bug turned out to be indirectly caused by a network issue). You can test your app on your actual device
and see the network calls that it’s making and the responses that your app is receiving right from Charles on
your laptop.

Here are the quick and easy steps to set this up for an iOS device:

Step 1: Make sure that your iOS device and your laptop are connected to the same wireless network.

Step 2: On system go into System Preferences -> Network to find your IP Address.

Step 3: on device, go into Settings, Wi-Fi

Step 4: Hold the button your connection Wi-Fi hotspot name to see the details of the network

[AUTHOR NAME] 8
MOBILE APP LOG VERIFICATION USING CHARLES PROXY

Step 5: For the proxy settings, select “Manual” and enter the IP Address you found on step 2 and the default
port that Charles Proxy listens to is 8888.

Step 6: Now your device will be connecting to the internet through your laptop on the port that Charles is
monitoring. All your network requests from your device will be viewable in your Charles window

Now you can test your application and see what network calls your app is making, and what responses it is
getting back to help you troubleshoot all of those hard-to-resolve network related bugs.

[AUTHOR NAME] 9
MOBILE APP LOG VERIFICATION USING CHARLES PROXY

Testing Mobile App in Various Network Conditions

Charles can be really helpful in testing your app in various network conditions. When app uses a strong internet
connection, all of those cases in the real-time that users will be experiencing such as Wi-Fi cutting in and out,
slow 3G connections or internet connections dropping completely.

App will be really slick and polished if it handles all of these scenarios gracefully and doesn’t leave the user
staring at a frozen UI or worst yet, having the app crash all together.

Within Charles, we have tools to either throttle the connection or stop it completely. The feature of it, is that
you can control this on a per host level so you can throttle only certain connections app is making requests to
and debug situations where the app never gets a response or gets a connection timeout.

Set up your proxy as described in the section above. In Charles, open up the menu “Proxy” -> Throttling Settings
and you’ll see the menu below. As you can see, you can turn on throttling on a global level, for all hosts. Or you
can enable it only for select hosts. The way I’ve got it set up below, throttling will be on for only the
www.google.com domain and it will throttle it to a point where it simulates bandwidth over 3G.

[AUTHOR NAME] 10
MOBILE APP LOG VERIFICATION USING CHARLES PROXY

Here’s a screenshot of the bandwidth presets you can set for your selected host or you can specify custom to set
your own. A good way to test connection timeouts is if you throttle it to something really low like 0.01 kbps.

If you want to prevent your app from connecting to a host at all, such as simulating a situation where the server
is completely unreachable, then you can blacklist a host. Just right click the host in the left pane and select
“Blacklist” as shown in the screenshot below. To see the list of currently blacklisted hosts and to modify the list,
go to the menu item “Tools” -> “Black list…”

[AUTHOR NAME] 11
MOBILE APP LOG VERIFICATION USING CHARLES PROXY

[AUTHOR NAME] 12
MOBILE APP LOG VERIFICATION USING CHARLES PROXY

Debugging Video Streaming Issues

Charles is a good way to debug video streaming issues, especially authenticated streams like www.youtube.com.

If your Charles Proxy is hooked up and you monitor your video playback on your application you can see the
video chunks being downloaded.

Combined with the throttling tips in the section above, you can test your video playback under a variety of low
bandwidth and high bandwidth situations.

Other situations that may occur during video playback are concurrency restriction limits being hit or being
unable to authenticate after idling on the playback screen for a long time. These are some of the common
situations that may occur for video playback applications and Charles Proxy can help save you a lot of time in
debugging them.

[AUTHOR NAME] 13
MOBILE APP LOG VERIFICATION USING CHARLES PROXY

Discovering Vulnerabilities in Mobile App

A really nifty feature of Charles Proxy is called Breakpoints. This allows you to specify any host (you can get as
granular as indicating a certain URL with specific parameters) as a breakpoint and when your app makes a
request or receives a response from something that matches your breakpoint, it will pause request/response to
give you an opportunity to analyze and edit the request/response before it continues to its destination.

This is something that a malicious user could attempt to do to your application and try to trick your app into
unlocking features, gaining unauthorized access and inducing other undesired behavior.

Using Charles Proxy with Breakpoints will give you the ability to put on the “hacker” hat and try to break your
own app.

Set breakpoints on those resources/servers that your app relies on to get configuration information, receive
data and submit data. Then use your application as a normal user would and when Charles Proxy breaks on the
breakpoints, modify the request/response values to try to break your app and find security vulnerabilities.

How to do it:

Below, the red hexagonal button is the toggle to turn breakpoints on or off. If you don’t have any specific hosts
set up in your breakpoints list then toggling breakpoints on will do nothing. Read further below to see how to
put specific hosts into your breakpoints list.

To add something to your breakpoints list, you can right click on a specific request in the left pane of Charles and
simply choose “Breakpoints”. When you do this, it will automatically toggle Breakpoints to be ON.

[AUTHOR NAME] 14
MOBILE APP LOG VERIFICATION USING CHARLES PROXY

You can see in the lower right hand corner of your Charles window whether Breakpoints are on or off.

In the menu “Proxy”, if you click the menu item, “Breakpoints”, you’ll see the window below which lists the
current locations that you’ll break on. You can even add or remove locations from this menu as well.

[AUTHOR NAME] 15
MOBILE APP LOG VERIFICATION USING CHARLES PROXY

Apps that do client side processing and then sends the results to a server are especially susceptible because the
server expects to receive accurate information from the client side app. If someone is able to intercept the
request before it gets to the server and change its values first, then you’ve got yourself a security concern!

As to how to resolve those vulnerabilities, that’s a different discussion altogether but the point here is that
Charles Proxy can help you identify those security holes.

[AUTHOR NAME] 16
MOBILE APP LOG VERIFICATION USING CHARLES PROXY

Omniture Testing using Charles web proxy:

What is it? Omniture is an Online Business Optimization tool. It is a complex tool that allows a marketer to
streamline an online business to appeal to the widest audience possible.

The Omniture product suite provides an integrated set of services: advanced web analytics and segmentation
(SiteCatalyst, Discover and Data Warehouse), search marketing (SearchCenter), optimization (Advanced Testing
and Targeting -- Offermatica and TouchClarity), and the marketing integration platform (Genesis).

They also have an iPhone application that allows customers to sign into their Omniture account and view
statistics from anywhere.

How to test Omniture using Charles Proxy?

Remind yourself about web-service calls in the section of “Debugging HTTP Connection and Sessions”.

Tester can use Charles Proxy tool to verify Omniture Call/variable/data value/pagename
Is being sent to server appropriately.

By using Charles Proxy we can investigate the network traffic.

Here is an example of device orientation changes for a mobile app.

Example:
Requirement - When the device changes orientation anywhere in the app capture Omniture event. Only
applicable to those screens that allow rotation.

Below table contains the Omniture configuration details:

Screen Name
/ App Activity Event Trigger Call Type Requirement Variable State Context Data Variable Data Value(s)
When the device
changes orientation
anywhere in the app
capture omniture event.
Only applicable to those
Baseline Device screens that allow
entire app Orientation trackState rotation. deviceOrientation ww.DeviceOrientation landscape,portrait

[AUTHOR NAME] 17
MOBILE APP LOG VERIFICATION USING CHARLES PROXY

Here are the steps to test that data being sent to server as per requirement:

1. Install mobile app on your device.

2. Configure Charles Environment between device & your machine.
3. Launch the app on mobile device.
4. Make sure that device screen rotation is enable in your device.
5. Now change the device orientation from Landscape to Portrait and vice-versa.
6. Observe the recorded Charles session & verify the data values for configured variables.

Below screen-shots describes the data values for variable DeviceOrientation :

[AUTHOR NAME] 18
MOBILE APP LOG VERIFICATION USING CHARLES PROXY

Password security concerns

As a user I am logging into my bank/email/e-commerce web-site account, still there is a threat for password
hacking through intermediate medium.

Here is a solution by Charles Proxy to ensure that data being sent to host is encrypted or not:
Tester can connect device to machine to setup Charles Proxy, We can verify that in the login request web service
calls doesn’t reveal user information such as user id, password, account information.

Example:

Test password security for Gmail login using Charles Proxy.

Test Steps:
1. Configure Charles environment between your device & Machine.
2. Navigate to internet browser.
3. Open Wen URL : www.google.com
4. Tap on Gmail option from upper right most of the screen.
5. Enter user credentials on Gmail login page.
6. Wait for the logging to Gmail account.
7. Now save the recorded Charles Session.
8. Explore the saved Charles Session to find our user information such as user id, password, and account
information.

Here below screen-shot describes the details recorded while logging into Gmail account.

[AUTHOR NAME] 19
MOBILE APP LOG VERIFICATION USING CHARLES PROXY

See that all request to host mail.google.com is happening via SSL.

Data available on the right side of the screen is in encrypted format.

Advantages

Charles Proxy can be helpful to QA professional/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).

1. Network related issues can be identified quickly.

2. Varying Network conditions can be created using Charles Web Proxy tool, which is much helpful to
Tester.
3. Security concerns can be determined by easy way using Charles Proxy.
4. Issues related to Video streaming, app vulnerabilities can be tested in useful manner.
5. Charles is useful to test configuration of Online Digital Marketing tools like Omniture.

Conclusion
Charles Proxy is helpful to tester/developer to debug network issues, security issues, streaming issues, Omniture
testing, Web-service call related issues.

[AUTHOR NAME] 20
MOBILE APP LOG VERIFICATION USING CHARLES PROXY

References:

http://www.charlesproxy.com

[AUTHOR NAME] 21