Charles proxy with AndroidTv
What is Charles Proxy?
A proxy server is a server that acts as intermediary between clients and other servers from which data traffic is requested and received.
Why we need Charles Proxy?
There are different kind of functions a proxy server can perform but the most interesting are:
- The ability to monitor and manipulate the incoming and outgoing network traffic.
- Enables the user to view all HTTP and SSL/HTTPS traffic between their machine and the internet.
- Simulate a variety of failures by manipulating the network traffic between app and back-end.
What’s so special with AndroidTv?
For android the setup is mentioned in the official documentation.
TLDR; You open http://chls.pro/ssl on your device, it downloads a certificate for you and you install that on the phone or manual do it from settings. This is on top of updating proxy settings of your network connection.
….but on AndroidTv, there is no way to download certificate and also there is no UI to manually install a certificate from storage.
Luckily there is a way of doing it. Which is opposite to what we do for mobile. I will explain it below.
TLDR:
We use one of Charles proxy root certificate and make it part of our app. We share that certificate across users who then install that certificate in the Charles proxy app as root certificate.
1- Download and install Charles Proxy.
2- Export Charles Certificate and Private Key:
- Help > SSL Proxying > Export Charles Certificate and Private Key
- Enter a strong password (…and obviously save it somewhere)
- Save the file.
3- Install exported certificate as root certificate:
The above generated certificate will be shared across users who would like to use the tool with your app. Each user should install that certificate as root certificate by:
Proxy > SSL Proxying Settings > Root Certificate > Import P12 (Enter the password you used above).
4- Generate a Charles SSL .pem certificate:
Help > SSL Proxying > Save Charles Root Certificate… and save it as charles_ssl_cert.pem file.
5- Add certificate to project:
Now we need to make root certificate part of our project. This is where it makes it possible to use the certificate on AndriodTv.
- Move the charles_ssl_cert.pem file to res/raw directory ( create raw directory if you don’t have one already)
- Create a new network_security_config.xml under res/xml (create ml directory if you don’t have one already) and add following:
<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
<debug-overrides>
<trust-anchors>
<certificates src="system" />
<certificates src="@raw/charles_ssl_cert" />
<certificates src="user" />
</trust-anchors>
</debug-overrides>
</network-security-config>
<debug-overrides>
make sure that it only works with debuggable=true
builds.
6- Add the configuration to the Android Manifest
Add the following networkSecurityConfig entry to the Android Manifest application xml node.
<application
android:networkSecurityConfig="@xml/network_security_config
...
7- Update Proxy settings on device:
On your AndroidTv:
Go to Settings > Network & Internet > Connected Network > Proxy Settings > Manual > Enter IP here (you can get this from Help > Local IP Address in Charles Proxy application) > Proxy Port (Normally 8888 but confirm from Proxy > Proxy Settings) > By pass proxy (optional).
On Emulator:
Go to Emulator settings > Settings > Proxy > Un check ‘Use Android Studio HTTP proxy settings > Check Manual proxy configuration > Enter details (Don not check proxy authentication)> Apply.
8- Enable SSL Proxying in Charles:
- Enable SSL proxying in Charles by navigating to
Proxy -> SSL Proxy Settings
and checking the “Enable SSL Proxy” checkbox. - Enter Location under include for domains you want to observe. If you are not sure you can press ‘Add’ and enter * into both fields. Or you can right click on a request in Structure window and Enable SSL Proxy (You might need to restart the session).
If done correctly you should now be able to see the unencrypted request/responses of HTTPS calls.