Context
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). Ever since I started using Charles my testing life has become much easier.
In this guide I will help you set up the Charles in macOS to view the iOS application’s traffic.
You can download a free trail from the Charles website. Make sure to download the macOS dmg file.
Installation
Double click on the dmg file. (In my case the version was charles-proxy-4.5.1.dmg)
Click on the Agree button
Move the Charles app to the Application Folder
Open Charles from the Application folder
On your browser open ‘google.com’, probably you are going to see some error like this one below.
Check the network calls under the www.google.com
This is because we have not configured the Charles Root Certificates in your machine.
Follow the images.
After installing the Charles Root Certificate, Open your Keychain Access. Search for Charles, now you may see something like this i.e. Certificate icon with (X) mark. It indicates that we have not trusted the certificate yet. We need to trust the certificate first.
Double click to open the Certificate. User Trust settings choose Always Trust.
Now you should see the certificate icon turns blue with a (+) mark on it. If that’s the case you have trusted the Certificate.
Now go to SSL Proxying Settings
You need to add wild cards, so that you can get network calls from all the connected hosts. Add the following . and choose OK.
Now we need to install the Root Certificate on the Test Mobile Device. We need to make sure the Device under test and your Mac should be on the same network. Follow the screen.
You should see the IP address along with the port address. Please note this one.
Now go to the Wi-Fi settings, Tap on the info icon. and configure the proxy as follows. Please note this IP address and Port number will be used for configuring the Proxy.
Tap on the info icon
Tap on the Configure Proxy
Select the Manual Option
Now enter the IP and Port number shown in the Charles.
Now go to the Safari and enter the following url
chls.pro/ssl
You should see a connection request at Charles now, Click on Allow.
At the moment if you see the Safari browser, you should see something similar. Tap on Allow. Once the configuration profile is downloaded, you will get an indication. After that go to Settings > General > Profiles. User the Downloaded profile you should see the one we are looking for. Open the Profile.
Tap on the install.
You may need to enter the Phones unlock code to install the profile. Once the Profile is installed successfully, you should see the verified tick ✅ mark.
Go to the following location and enable the full trust for the root certificate. Follow the screenshot reference below.
Settings > General > About > Certificate Settings >
That’s all you need to do. You may open your test application and see the network calls at Charles. For the demo purpose, I have used the Flipkart application and searched for an ‘iphone’
You can see the network call and its contents.
