Skip to content

Configure Charles Proxy in mac OS

Florian Renaud edited this page Jan 19, 2022 · 3 revisions

This wiki explains how to configure Charles Proxy in a mac OS setup.

Who is Charles?

In this wiki, Charles is not a person, it's an application.

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

It can also be used to observe the traffic from a device (eg. an Android phone or emulator) requiring some configurations.

Mac OS setup

After installing the Charles Proxy's client in your machine, open Proxy -> Proxy settings and set the HTTP Proxy port to 8888. You may also have to check the Support HTTP/2 and Enable transparent HTTP proxying fields. Validate your changes by clicking on the OK button.

Enable the SSL Proxying in Proxy -> SSL Proxying Settings -> SSL Proxying to be able to add a location. You can add a location of *.*as a wildcard to enable SSL proxying for all domains. Save by clicking on the OK button.

Then, you will have to whitelist your IP address in Proxy -> Access Control Settings, select Add and enter your IP address which you can take from your System preferences -> Network. Do not forget to press the enter key to validate the field, otherwise, the change will be erased after pressing the OK button.

At some step, you may be prompted by the macOS system to trust the Charles certificate and add it to your keychain. To prevent any trouble in the future when running Charles, you can edit the policy for this certificate in your keychain to always trust it.

Android emulator setup

Note that I tested with an Android 12 emulator (API 31).

The next step is to configure the emulator to share its traffic through the computer.

Define a proxy in the emulator settings by clicking on the three dots in the emulator action buttons. Then go to Settings -> Proxy and select Manual proxy configuration. Enter your IP address in the Host name field with 8888 in the Port number field as defined previously. Click on apply to validate the configuration, the proxy status should display a Success value.

Note that this proxy configuration is not available with the embedded emulator, you may have to configure it inside the emulator wifi settings (not tested).

After that, Charles will prompt you to allow or deny the network traffic to intercept. Click on the Allow button to add that emulator in Charles settings.

Optional?

I don't know why, but I didn't have to do the following steps to see the emulator traffic in Charles, but they may be necessary depending on your configuration:

Other documentations request to add the Charles root certificate inside the emulator. You can export it by clicking on Charles -> Help -> SSL Proxying -> Save Charles Root Certificate..., select a location and .cer format, then upload it from your machine to the emulator (save it the downloads folder to find it easily).

Manually install the certificate in the Android settings of the emulator, Security -> Encryption & credentials -> Install a certificate -> CA certificate, click on Install Anyway and select the Charles Certificate.

Finally, add this code in network-security-config.xml file to trust the Charles certificate while debugging your app.

    <debug-overrides>
        <trust-anchors>
            <!-- Trust user added CAs while debuggable only -->
            <certificates src="user" />
        </trust-anchors>
    </debug-overrides>

Working

First, deactivate the macOS traffic (if it is activated) which is not necessary and may perturb the recording by unchecking the option in Charles -> Proxy -> macOS Proxy.

You should not view all the internet traffic coming from your emulator left panel of Charles. Click on a request to see more details.

Some useful documentation

https://www.charlesproxy.com/documentation/configuration/browser-and-system-configuration/ https://www.charlesproxy.com/documentation/using-charles/ssl-certificates/ https://mdapp.medium.com/the-android-emulator-and-charles-proxy-a-love-story-595c23484e02 https://medium.com/@navyab_66433/setting-up-charles-proxy-for-android-emulator-in-mac-e8f2c4e15713 https://community.tealiumiq.com/t5/Tealium-for-Android/Setting-up-Charles-to-Proxy-your-Android-Device/ta-p/5121