Charles proxy android ssl

Using Charles Proxy to Debug Android SSL Traffic

Jun 20, 2017 · 5 min read

I’ve been a longtime user of Charles for checking requests and responses from the web applications I write.

Charles as described on its site:

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).

Lately, however, I’ve been doing a lot more work on Android apps than I have on server-side applications. I figured it would be similarly helpful to debug some of the requests we were making from our apps without logging out to Logcat and cluttering our app code.

The requests I wanted to check happened to be protected by SSL, so in addition to adding the proxy information to my device’s networking configuration, I also needed to install Charles’ root certificate. It turns out that this is possible, but requires a bit of work. Luckily I have now done this enough times to feel good about writing it up.

First off, this setup will not work on an emulator without an additional step (see below). I admittedly haven’t needed to do any proxy debugging without a test device, though.

Also, as of this post, we are targeting Android SDK version 25 in our applications, but this specific setup should work with all versions. If not, feel free to correct me so that I can update this post.

Now on with the show.

Setting Up Your Project

If your test device is running Android 7.0 or newer, there are a few extra steps to ensure that you are able to trust the Charles CA Certificate. To ensure Android trusts the certificate, you’ll need to specify a Network Security Configuration for your application. There are a few different ways of adding your certificate to the application’s trusted configuration, but I found that the easiest was not to include Charles’ certificate within my application code, but to simply trust the user-installed CA certificates (like previous versions of Android used to do).

Specifying the android:networkSecurityConfig property within your AndroidManifest.xml file:

Specifying the res/xml/network_security_config.xml file:

Setting Up Charles

Open up Charles on your Mac and then open Proxy > Proxy Settings from the toolbar. You’ll need to make note of the HTTP Proxy Port that is specified.

Then open up Proxy > SSL Proxying Settings from the toolbar and add the appropriate Locations (host/port) for the requests you wish to debug. I usually just add a wildcard route like *.myapidomain.com but specific domains like whatever-app.herokuapp.com work fine as well.

Setting Up Your Android device

First, make note of your Mac’s IP address within your local network. You’ll need it in the next step.

Also make sure Charles is open and that the Mac is on the same wifi network as the Android device you’ll be setting up.

Go to your device’s settings and wifi configuration.

Press and hold on the network you’re going to use and select Modify network from the alert modal.

Then check Advanced Options and scroll until you see Proxy .

Tap the Proxy dropdown and select Manual .

For the Proxy hostname input your Mac’s IP address that you noted above.

Then for the Proxy port use the HTTP Proxy Port that you noted from Charles’ Proxy Settings from above.

After saving, you may notice a pop-up on your mac like this:

You should now click Allow to let your Android device connect to Charles via the proxy it has set up.

If you don’t see this prompt, you can ensure that your device can use the proxy from within Charles by going to Proxy > Access Control Settings and adding your Android device’s IP address on the wifi network.

Now on your Android device, open up the browser and go to the following URL chls.pro/ssl . You can also see these instructions from within the Charles app — go to Help > SSL Proxying > Install Charles Root Certificate on a Mobile Device or Remote Browser .

The browser should download the cert and once finished, tap to open the file. Then Android should prompt you to install the file.

After you’ve named the certificate and tapped “OK”, you will either be prompted to input your device’s pin/password or prompted to set up your device’s pin/password. Once that process is complete, you should be ready to debug some requests.

Note Until you remove the manual proxy from this device’s wifi configuration, whenever you use this network again you will need to have Charles open and running on the same IP address. You can always set the network configuration back to “Proxy: None” once you’re done debugging.

Using An Emulator

According to Charles’ site you can start the emulator with a flag in order to use the proxy.

In the Android emulator run configuration add an Additional Emulator Command Line Option: -http-proxy http://LOCAL_IP:8888

Where LOCAL_IP is the IP address of your computer, not 127.0.0.1 as that is the IP address of the emulated phone.

EDIT: Thanks to Brandon Davis for pointing out that the full command would be

In addition, Android Studio 3.0 will now allow managing proxy settings for your emulator images. Read all about the new features here and if you can’t wait for a stable release, 3.0 is currently available in the dev channel .

Debugging requests

Now that you’re set up, you should see Charles recording traffic from your device. As long as you’re configured properly, you should see those SSL request details from the domains you specified in Charles’ SSL Proxying Settings.

Feel free to discuss your results and let me know if I missed anything obvious.

Источник

Android 11 devices and Charles

This tutorial will show you how to configure Charles and your Android 11 device so you can view your app’s network traffic in plain text. FYI, the root certificate installation steps are slightly different to older Android versions

NOTE: Since Android Nougat (7.1), Google have blocked tools like Charles from intercepting/decrypting network traffic from Play Store apps

NOTE: To proceed with this tutorial, you will need to be able to build your own Android app. Make sure the “Network Security Config File” has been added to your app’s repo (see more details here and here).

Be able to build your own Android app

Make sure you have setup the Charles Root certificate on your Mac

Check Wi-fi networks

Make sure your Mac and Android device are on the same Wi-Fi network

Find your Mac’s local IP address

Open Charles -> Help -> Local IP address.

Make note of the IP address as you will need to enter it into your device later

Navigate to device’s Wi-Fi proxy screen

Settings -> Wi-fi -> long press the connected Wi-Fi network to bring up the menu -> Modify -> Advanced options -> select “Manual” from the proxy drop down

NOTE: there are slight navigation differences between OS versions in how to get to your Wifi proxy settings but they should be fairly similar to these screenshots

Configure device’s proxy settings

This step will proxy all your device’s internet traffic through your laptop

• Proxy hostname: this is your Mac’s local IP address
• Proxy Port: 8888

Accept incoming network traffic from your device

On your device, open Chrome and go to a website

Return to your Mac. You should now see this prompt from Charles. Click “Allow”

Encrypted traffic from the device should now appear in Charles

Download Root certificate for device

Return to the device, open Chrome and go to chls.pro/ssl.

Install root certificate

O pen the “Setting” app -> Security -> Encryption & Credentials -> Install a Certificat e -> CA certificate -> Install anyways -> tap on the certificate

Android may prompt you to enter pin, password or fingerprint before installing the root certificate

Verify root certificate has been “trusted”

Return to Encryption & Credentials. Tap Trusted credentials -> USER

You should now see a certificate from “XK72 Ltd” appear

Enable SSL proxying to view traffic in plain text

Return to Charles, right click the network request you are interested in and click the “Enable SSL Proxying” option

FYI, I am using an Android app a friend created to demonstrate decrypting Android app traffic

NOTE: As mentioned at the start of the article, you need the ability to build your own Android app to view decrypted traffic. This step will not work with an app downloaded from the Play Store

Kill and Reopen app

Kill and reopen the app. You should now see the network request details in plain text

Источник

How to set up Charles Proxy for mobile and web apps?

Ever wondered how to maintain quality of software even in worst-case scenarios be it network failures or server breakdown?

One of the solutions to the above scenario is replicating the possible failure environment by configuring Charles proxy.

Let’s understand how this tool helps in providing the solution to the mentioned cause in the various software apps.

Charles proxy is an interactive web debugging tool which acts as a middleware between the client (mobile or web app) and the internet. Using this tool we can configure client environment to pass all networking requests and responses through Charles proxy so that we can inspect and even change the data midstream to test how the app responds.

In Web and Internet development we are unable to see what is being sent and received between the 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 we can quickly diagnose and fix problems.

Basic Configuration

This is common for any type of app; mobile or web.

1. Download Charles from the below link:https://www.charlesproxy.com/ make sure that this tool is a paid one, however, we can make use of its trial version.

2. Install the app and have a note of your machine IP address for further configuration

3. Download and install Charles root certificate on the desired remote device where the tests need to be performed i.e, android, iOS device or web browser.

4. Remote device configuration based on the Charles root certificate to be installed on various devices as follows:

IOS Simulator

Open Charles and select the option to install a root certificate on iOS simulator from :

Help>SSL Proxying>Install Charles Root Certificate in iOS Simulator

Open iOS simulator and enable Charles proxy certificate from settings as:

Settings>General>About>Certificate Trust Settings

Open the app under test and validate the requests and response based on the action performed on the app. Experiment adding the breakpoints to API requests and responses.

Android Emulator

Open Emulator settings and configure the Charles proxy for a device with android version N, using either command line or from emulator settings as below:

The command for setting up manual IP on an emulator:

Configuring IP from emulator settings:

Open Charles and select the option to download the Root certificate either from mobile browser hitting chls.pro/ssl or via downloading the file on the system itself post which we can install the same to android device or emulator from:

Help>SSL Proxying>Save Charles Root Certificate…

Save the Charles root certificate to the system, copy to Emulator storage and install it as:

Emulator>Settings>Security>Trusted Credentials>Install from storage>open saved Charles Root certificate

Open the app now and validate the request and response on the Charles, Experiment adding the breakpoints to API requests and responses.

Web Browser (Chrome)

Charles proxy basic configuration remains same for web browsers as well where we install the Charles root certificate on the system and configure it for the browser on the Chrome settings as:

On macOS, please follow the instructions for the macOS above. These instructions only apply to Windows.

1. In Charles go to the Help menu and choose “SSL Proxying > Save Charles Root Certificate”. Save the root certificate as a Binary Certificate (.cer) to the desktop, or somewhere where we can easily access it in the next step.
2. In Chrome, open the Settings. At the bottom of the settings page, click “Advanced” to open the advanced section, then click the “Manage certificates…” button.
3. Go to the “Trusted Root Certification Authorities” tab and click “Import…”.
4. Find the certificate file saved from Charles in the previous step, then click Next and Finish, leaving the default options, until you complete the import. Chrome will now always trust certificates signed by Charles.
5. After importing we can delete the certificate file that has been saved.

IOS Devices

Even for the devices, the concept of configuring Charles remains same as simulators just have to configure the mobile network proxy with the system and open chls.pro/ssl to get the root certificate download and enable it from settings from below steps:

Settings>General>About>Certificate Trust Settings

Android Devices

For connecting android devices configure the network proxy for the device as mentioned below.

Settings>Wifi>Connected network>Advanced>Proxy>Manual>Set host & port

After configuring it download the root certificate by either downloading to the device and installing it or via navigating to chls.pro/ssl from local device browser to download Charles root certificate.

Installation of root certificate may ask to add further security measures to devices for protecting the credentials before root certificate installation, once done the device is ready to be under Charles proxy influence to debug the network traffic.

Let’s assume we have Charles proxy setup ready on our chosen device.

Now let’s discuss how does the debugging work.

Debugging using Charles

This section focus on actual debugging of the requests and responses inspected via Charles and intercepted according to our need to replicate any particular realtime scenario. For interception there are various of its tools performing their respective functionalities, I want to discuss below few which I found very useful in debugging and ensuring the quality of app under test behaving in various network circumstance.

Breakpoints Tool

The Breakpoints tool lets us intercept requests and responses before they are passed through Charles. We can examine and edit the request or response and then decide whether to allow it to proceed or to block it.

When a request or response trips a breakpoint the Breakpoints window automatically opens in Charles and comes to the front. The Breakpoints window contains a list of the requests and responses currently intercepted and waiting for our action. Select the request or response to view and edit the contents. Then decide to Execute, Abort or Cancel the breakpoint.

Источник