Charles Proxy Tutorial for iOS
Learn how to use Charles for iOS and macOS to inspect encrypted and unencrypted network traffic for both your own apps and third-party apps. By Irina Galata.
Sign up/Sign in
With a free Kodeco account you can download source code, track your progress, bookmark, personalise your learner profile and more!
Create accountAlready a member of Kodeco? Sign in
Sign up/Sign in
With a free Kodeco account you can download source code, track your progress, bookmark, personalise your learner profile and more!
Create accountAlready a member of Kodeco? Sign in
Sign up/Sign in
With a free Kodeco account you can download source code, track your progress, bookmark, personalise your learner profile and more!
Create accountAlready a member of Kodeco? Sign in
Contents
Charles Proxy Tutorial for iOS
25 mins
- Getting Started
- Exploring the App
- More About Proxies
- Charles Proxy and Your iOS Device
- Installing Charles’ Certificate
- Trusting Charles’ Certificate
- Proxying iOS Traffic Using Charles Proxy for macOS
- Setting Up Your Device
- Installing a Certificate on Your Device
- Snooping on Someone Else’s App
- Modifying the Response
- Simulating Slow Networking
- Troubleshooting Your Own Apps
- Removing Charles’ Certificate
- Where to Go From Here?
Installing Charles’ Certificate
Still within the Charles Proxy app, navigate back to the initial screen by tapping the back arrow at the top left of your screen twice. With the proxy still active, tap the Settings gear at the top left of the screen. Select SSL Proxying.
Now, at the bottom of this screen, you’ll find detailed instructions for installing and trusting the Charles Proxy CA Certificate. First, install the certificate using the button in the app. Your device will app switch to Safari and ask for permission to install the profile.
Once the profile is installed, open the Settings app. You’ll see a new Profile Downloaded option. Tap it and choose the Install option in the top-right corner.
You’ll be prompted for your device passcode, if you have one, followed by a confirmation screen warning you that this certificate is unverified. Tap Install again. Finally, an action screen will appear from the bottom of the screen with a final confirmation. Apple really wants to make sure you want to install this. :]
Again, don’t install just any random certificate, or else you may comprise your network security!
At the end of this Charles Proxy tutorial, you’ll also remove this certificate.
Trusting Charles’ Certificate
You’ll get a confirmation screen that the profile is installed. Next, you need to trust that certificate. Still in the Settings app, navigate to General ▸ About ▸ Certificate Trust Settings. Find the Charles Proxy certificate and toggle the switch to on. A warning dialog will appear. Select Continue.
Switch back to the Charles Proxy app and the certificate status will now say Trusted. Toggle the Enabled switch at the top of the screen to on.
In Charles, navigate back to the main Settings page and save your changes. Open the current session and clear all the traffic using the broom icon in the bottom-left corner of the screen. Navigate to Safari and reload a webpage. Then, navigate back to Charles Proxy. Tap one of the requests and tap Enable SSL Proxying.
Go back to the current session and clear the session once again. Re-open Safari and reload the page a final time. Now, if you navigate back to Charles Proxy, the URL for which you enabled SSL proxying will have a blue network icon rather than a lock icon.
First, tap the URL to see the full detail of each request.
Next, tap into a request for more detail.
Then, tap View body to view the full response body. Hurrah! :]
This example used Safari, but the following process will work when opening any app on your device, including your own, when wanting to debug your app’s networking.
Next, tap back to the request page and disable SSL proxying. Tap back to the initial view and set the Charles Proxy status to Inactive to stop proxying traffic.
Proxying iOS Traffic Using Charles Proxy for macOS
What happens if you want to inspect traffic on a simulator, or you don’t have the Charles Proxy iOS app? No problem! It’s simple to set up Charles to proxy traffic from any computer or device on your network, including your iOS devices.
Setting Up Your Device
Open Charles Proxy on your Mac and turn off macOS proxying by clicking Proxy (drop-down menu) ▸ macOS Proxy to uncheck it. This way, you’ll only see traffic from your iOS device.
Next, click Proxy ▸ Proxy Settings, click the Proxies tab and make note of the port number, which by default should be 8888.
Then, click Help ▸ Local IP Address and make note of your computer’s IP address. If there’s more than one IP address, pick en0.
Now, grab your iOS device. Open Settings, tap Wi-Fi and verify you’re connected to the same network as your computer. Then, tap the ⓘ button next to your Wi-Fi network. Scroll down to the HTTP Proxy section, select Configure Proxy and then tap Manual.
Enter your Mac’s IP address for Server and the Charles HTTP Proxy port number for Port. Tap Save.
Head back to the Charles macOS app. Tap the Record/Pause button if you’re not already recording traffic.
You should get a pop-up warning from Charles on your Mac asking to allow your iOS device to connect. Click Allow. If you don’t see this immediately, that’s OK. It may take a minute or two for it to show up.
Now you should start to see activity from your device in Charles! But note that you can’t view SSL traffic just yet. As with the iOS app, you’ll need to install a certificate from Charles.
Installing a Certificate on Your Device
Still on your iOS device, open Safari and navigate to http://www.charlesproxy.com/getssl. On the pop-up, tap Allow.
In what should now be a familiar journey for you, switch to Settings and install the profile. Tap Install, enter your passcode (if set up) and tap Install again after the warning appears. Then, tap Install one more time. Finally, tap Done.
As before, open the Settings app and navigate to General ▸ About ▸ Certificate Trust Settings. Trust the certificate you just installed.
Next, in the macOS Charles app, select Proxy ▸ SSL Proxying Settings. Ensure Enable SSL Proxying is checked, and add a value for the traffic you want to inspect.
You’ll now see the full request and response bodies for that connection.