Every once in a while it becomes useful to be able to actually look at the network request that is leaving your device to understand why things aren’t working, or to gain insight into how other people’s things work. While tools for network debugging such as Wireshark are great and have existed since forever, Charles web debugging proxy was built specifically to make http requests very easy to debug.
How it works:
You —> Charles —> Internet
By sitting in between you and the Internet, Charles is able to pick up on every single network request that you send and receive. Once it picks up on some http requests, it shows you everything you need to know about it such as the headers in the request and the body of the response. It looks something like this:
This works great for http or unencrypted content, but what about https? Luckily there’s ways around that as well. Without going into the details, by installing a certificate on the device you want to debug, Charles can provide the same functionality for encrypted connections as well. Let’s use the Shopkick app as an example.
Trying to analyze the calls to https://app.shopkick.com doesn’t show any useful information because they’re encrypted over SSL. Let’s enable SSL Proxying.
And now we can see all that traffic in the clear.
Charles also allows us to copy the cURL command for a particular request. Let’s use this to simulate a login from the command line.
|
1 2 |
[email protected] Fraudkick (master) $ curl -H "Host: app.shopkick.com" -H "X-Sts: 1459834233364" -H "X-Screen: 320,480" -H "X-App: shopkick/4.8.5" -H "X-Device: Apple/Unknown: iPhone4,1" -H "X-Device-Id: enhjbisq9flt3g37hegoctwf1s7gvkhtxks2lzry" -H "X-Sys: iPhone OS/9.0" -H "Proxy-Connection: keep-alive" -H "X-Client-Capabilities: 2" -H "Accept: */*" -H "Accept-Language: en-ca" -H "User-Agent: shopkick/1177 CFNetwork/758.0.2 Darwin/15.0.0" -H "X-Adv-Id: CD5B8AAC-32D4-4988-B217-349F3EDB6887" -H "X-Mac: 3DjMFoLY3Alb1HT-_aizd7FTyBU=" -H "X-API-Key: 0e8450ff-351e-406d-a365-03f735f87d9f" -H "Cookie: app_version=4.8.5; device=Apple/Unknown%3A%20iPhone4%2C1; device_id=enhjbisq9flt3g37hegoctwf1s7gvkhtxks2lzry; device_os=iPhone%20OS/9.0; device_type=Apple/Unknown%3A%20iPhone4%2C1" --data "password=<notmypassword>&device_id=enhjbisq9flt3g37hegoctwf1s7gvkhtxks2lzry&email=raz10%40razb.me&device_model=Unknown%3A+iPhone4%2C1&kcid=6Xl4mn7rEpgHUfmrIwdE203H3iKarm6Gf4%2FVaGH2LyU%3D-6Xl4mn7rEpgHUfmrIwdE203H3iKarm6Gf4%2FVaGH2LyU%3D-6Xl4mn7rEpgHUfmrIwdE203H3iKarm6Gf4%2FVaGH2LyU%3D" --compressed https://app.shopkick.com/shopkick/v1/user/login {"status": 0, "user_id": 16836985655, "user_info": {"first_name": "razzle", "is_google_plus_connected": false, "is_facebook_connected": false, "country": 1, "created_ts_utc": 1459823387000, "is_registered": true, "enrolled_loyalty_program_ids": [], "email": "[email protected]", "is_buy_and_collect_enrolled": false}, "client_app_ui_flags": {"aggregate_deals_enabled": true, "tab_navigation_enabled": true, "preselect_all_recommended_friends": false, "allowed_invite_media": "1,2,3", "show_kicks_center": true, "use_combined_store_and_deals_tab": false, "max_number_invalid_email_logs": 3, "saving_deals_enabled": true, "default_tab_context_override": "store", "show_new_card_linking_screen": false, "tab_context_order_override": ["store", "deals", "browse"], "number_of_recommendations": 10}, "session_key_base64_enc": "JRtCoHkdBjx6lA7xU+oUa3mgDmoltqNaj6YYvNPSNgbmYR6T49gzHEx6WWIkXUzoRcKgCP/FMmmmvLxtFZYfRg==", "common": {"popups_response": {"force_display": true, "popups": [{"type": 6, "layered_popup_details": {"text_views": [{"text": "Thanks for all your shopkick love - you've logged in on an additional device. Just remember that you can only do walk-ins and scans with one device at a time and can't share devices with your friends.", "frame": {"y": 155, "x": 20, "height": 200, "width": 280}, "style": {"color": "FFFFFF", "font_size": 14, "font_name": "HelveticaNeue"}, "android_style": {"color": "FFFFFF", "font_size": 14, "font_face": "Roboto"}}, {"text": "Did you know?", "frame": {"y": 80, "x": 0, "height": 100, "width": 320}, "style": {"color": "FFFFFF", "font_size": 40, "font_name": "HelveticaNeue-Light"}, "android_style": {"color": "FFFFFF", "font_size": 40, "font_face": "Roboto"}}], "buttons": [{"action": {"type": 1}, "image_view_info": {"frame": {"y": 0, "x": 0, "height": 460, "width": 320}, "image_url": "https://app2.shopkick.com/shopkick/images/generic_buttons/transparent_dismiss.png#2x&1_5x"}}], "image_views": [{"frame": {"y": 0, "x": 0, "height": 50, "width": 50}, "image_url": "https://app2.shopkick.com/shopkick/images/generic_buttons/close_button.png#2x&1_5x"}]}}]}, "request_id": "ChPAjAAAz1wABS+2TB5dSA"}} |
Charles is great for debugging mobile apps which mostly only make use of http connections, however in order for this to work on a mobile device we need to configure the device to use our computer as a proxy. On iOS you can do this by going to the wifi settings and scrolling down to the HTTP Proxy section. Fill in the details to match your computer where Charles is running.
Once that is done, open safari and navigate to http://charlesproxy.com/getssl That will prompt you to install the Charles certificate and allow you to debug SSL connections coming from your device.
Happy debugging!
