Charles proxy android emulator

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.

Источник

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.

Источник

The Android Emulator and Charles Proxy: A Love Story

Oct 20, 2017 · 6 min read

Android Emulators have come a long way over the years. Once they were the bane of every developer’s life, representing the most basic failure of the Android development environment; a painfully slow tool that had the maddeningly unrealized potential to make developer lives infinitely easier. But over the last couple years, Google has wised-up and made the emulator one of the best things about developing for Android — a fast, fluid, and endlessly useful tool for exercising and debugging apps.

The Android Emulator can also be made into a super-tool for testing API edge and failure cases by employing an http proxy — a go between that can intercept, display and even re-map your API calls. My personal choice for this job is Charles Proxy. It has slick interface, easy to use mapping options and great support, with new releases being published all the time. Today I’ll show you how to set up your Emulator to proxy calls, and later, what you can do with it.

Setup

The first thing you want to do is download and run Charles Proxy. Start it up and you’ll see all the network traffic from your machine start to show up in the side bar. Charles, by default, has local proxying turned on, but since we’re going to use it to proxy an emulator, you can go to the Proxy menu and uncheck the OS proxy option:

Then click the little yellow broom icon to clear out all the traffic. You can also modify Charles’ preferences so that this option is not enabled by default.

Setup your Emulator to Proxy

Next, start up your emulator. Any old emulator will do, but depending on the Android version, your emulator’s settings might be different then mine. For this tutorial, I’m using a Pixel XL emulator running running Android 8.0, Oreo. The first thing we need to do is set up the emulator’s proxy settings, so that all the network traffic goes through Charles. To do that, we need your machine’s IP address. Charles actually has a little utility in the Help menu for this:

Click that, and then copy the IP address from the dialog that comes up.

Next, in your emulator, in the Setting bar, click the three little dots:

And then in the resulting dialog, click Settings, and then select the Proxy tab.

Paste in your IP address, and set the port to 8888. Charles will now prompt you that a device is trying to connect to the proxy, and ask you to allow it. Just click allow and you’ll start seeing IP addresses show up in the side bar

Don’t worry, we’re going to make that a whole lot prettier.

Install the Charles SSL Cert

Charles does some specific SSL magic, which we won’t go over here, but the bottom line it that you need to install the Charles SSL Certificate on your emulator. To do that, just open up a browser on the emulator, and navigate to http://chls.pro/ssl. The browser may prompt you to allow it to save the cert to disk, and then you can click to install it.

To Proxy your application on Android N or above, you also need to install a config file in your app’s resources. From the Charles Website:

“Android

As of Android N, you need to add configuration to your app in order to have it trust the SSL certificates generated by Charles SSL Proxying. This means that you can only use SSL Proxying with apps that you control.

In order to configure your app to trust Charles, you need to add a Network Security Configuration File to your app. This file can override the system default, enabling your app to trust user installed CA certificates (e.g. the Charles Root Certificate). You can specify that this only applies in debug builds of your application, so that production builds use the default trust profile.

Add a file res/xml/network_security_config.xml to your app:

Then add a reference to this file in your app’s manifest, as follows:

Phew. Your setup is now complete. Almost.

Urls instead of IP Addresses***

NOTE: THESE INSTRUCTIONS ARE OUT OF DATE. See the asterisked (***) section below for more current instructions.

Remember how we said we were gonna make Charles look all pretty? This is how we do it. In the setup, you probably noticed that all we get in the sidebar are IP addresses. But we can do better. To see the actual URLs those IPs represent, we can tweak our emulators settings to play nice with Charles.

To do this, go to your Emulator’s device settings, then go to (on Android 8.0, anyway) Network & Internet → Mobile network → Access Point Names. There should only be one, click on it. Now you should see this:

Now you can edit the Proxy and Port settings to match what we entered earlier in the Emulator’s settings. When you’re done that, don’t forget to click the three dots in the toolbar and Save your changes. Now, take a look at Charles again. If you’ve set up your app to trust the Charles cert, you should start to see some api urls in there.

Wow, that was a ton of work. But now it’s done, and you never have to do it ever again (unless your machines IP address changes, womp). In the next article, we’ll discover all the magical things you can do with Charles, including mapping responses to remote and local resources.

***UPDATE:

As with all things, setting up an HTTP proxy with your Android Emulator has changed a bit. Here’s is an amended guide to setting up URLs with Charles Proxy:

The built-in APN settings are now read-only, so you can’t change them as I instructed above. Instead, you need to create a new APN, so that you can change it. To do this, navigate to Settings → Network and Internet → Mobile Network and expand the Advanced section, then select Access Point Names. Now click the plus sign in the toolbar.

Basically what we’re going to do is add a new APN that copies the old one, and then edit that. Give your shiny new APN any name you want. Now set the APN field to epc.tmobile.com, set the MMSC field to http://mms.msg.eng.t-mobile.com/mms/wapenc, and make sure APN Type is set to Not Set. Also, don’t forget to set the Proxy field to your IP address for Charles, and the Port to 8888.

Finally, click the toolbar menu icon and select Save.

Now just back out to the previous screen and select your new Access Point, and you should be all set. Happy Charles-ing.

Источник