{"id":1143,"date":"2017-03-20T14:29:48","date_gmt":"2017-03-20T14:29:48","guid":{"rendered":"https:\/\/loadfocus.com\/blog\/?p=1143"},"modified":"2022-04-29T08:10:37","modified_gmt":"2022-04-29T08:10:37","slug":"debugging-the-traffic-from-a-native-iphone-application","status":"publish","type":"post","link":"https:\/\/loadfocus.com\/blog\/2017\/03\/debugging-the-traffic-from-a-native-iphone-application","title":{"rendered":"Debugging the Traffic from a Native iPhone Application"},"content":{"rendered":"<span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\"><\/span> <span class=\"rt-time\"> 4<\/span> <span class=\"rt-label rt-postfix\">minutes read<\/span><\/span><p class=\"lead\"><!-- pn-tldr --><\/p>\n<h2>Key takeaways<\/h2>\n<ul>\n<li>A proxy between the device and the network is the only reliable way to see native app traffic.<\/li>\n<li>You must install and trust the proxy certificate on the device or HTTPS calls stay opaque.<\/li>\n<li>Certificate pinning defeats this deliberately, so expect some apps to refuse to connect.<\/li>\n<\/ul>\n<p><!-- \/pn-tldr --><\/p>\n<h3>Why would I want to investigate the traffic that is made from a native iOS application ?<\/h3>\n<p>There are several reasons for which you would like to be able to see which are the requests a native application is making to the server side:<br \/>\n&#8211; to debug an issue that is happening in the application when you don&#8217;t have access to the server logs<br \/>\n&#8211; to check how the application is built in terms of the APIs that they are calling<br \/>\n&#8211; to check the security of an application<br \/>\n&#8211; to retry and make the same requests manually or automatically from an automation framework<br \/>\n&#8211; more details on <a href=\"https:\/\/loadfocus.com\/blog\/2013\/09\/16\/how-to-debug-mobile-html5-and-native-applications\/\">how to debug native and HTML5 apps<\/a><\/p>\n<h3>How can I debug the traffic coming from a native application ?<\/h3>\n<p>The answer is very simple. All you need for being able to inspect the traffic is:<br \/>\n&#8211; have access to a WiFi network where both a laptop and the device that has the application are connected<br \/>\n&#8211; install an application called &#8220;<a href=\"https:\/\/www.charlesproxy.com\/\">Charles Web Debugging Proxy<\/a>&#8221;<\/p>\n<h3>How to configure the iPhone device so that the traffic appears in Charles ?<\/h3>\n<p>There are a few steps that you need to do to get to the point where you can see the traffic in Charles.<br \/>\n1. First find the IP address of the laptop where you installed Charles. You can find that pretty easily by using the<br \/>\nfollowing commands from the terminal:<\/p>\n<pre class=\"lang-js\"><code>\n\"ifconfig\" for Linux\/MacOS\n\"ipconfig\" for Windows\n<\/code><\/pre>\n<p>2. Go to the iPhone device to Settings -&gt; Wi-Fi. Click on the blue disclosure arrow to configure the network.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1146 aligncenter\" src=\"https:\/\/loadfocus.com\/blog\/wp-content\/uploads\/Screen-Shot-2017-03-18-at-20.18.18.png\" alt=\"\" width=\"300\" height=\"532\"><\/p>\n<p>3. Scroll down until you get to the HTTP Proxy session. In there enter the IP of the laptop in the Server section, port 8888 in the Port section and leave Authentication Off.<br \/>\n4. Now open an application from you iPhone, for example Instagram.<br \/>\n5. You should see a prompt in Charles when you first make a connection from the iPhone, asking you to allow the traffic.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"2560\" height=\"1540\" class=\"aligncenter size-full wp-image-1147\" src=\"https:\/\/loadfocus.com\/blog\/wp-content\/uploads\/Screen-Shot-2017-03-18-at-19.44.17.png\" alt=\"\"><br \/>\n6. Now you will be able to see the traffic that is coming from your iPhone in Charles.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"2560\" height=\"1538\" class=\"aligncenter size-full wp-image-1148\" src=\"https:\/\/loadfocus.com\/blog\/wp-content\/uploads\/Screen-Shot-2017-03-18-at-19.44.41.png\" alt=\"\"><br \/>\n7. Remember to disable the HTTP Proxy in your Settings when you stop using Charles, otherwise you&#8217;ll get random network failures in your applications!<\/p>\n<h3>How can I see what is sent in the request that are made over https ?<\/h3>\n<p>For being able to see the content of the requests made over Https you need to follow the below steps:<br \/>\n1. On your iPhone, after you have set up Charles as proxy, open Safari and browse to https:\/\/www.charlesproxy.com\/getssl. Safari will prompt you to install the SSL certificate.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1149 aligncenter\" src=\"https:\/\/loadfocus.com\/blog\/wp-content\/uploads\/Screen-Shot-2017-03-18-at-20.26.31.png\" alt=\"\" width=\"300\" height=\"537\"><\/p>\n<p>3. Now you should be able to access SSL websites with Charles using SSL Proxying.<br \/>\n4. Go into Charles at Proxy -&gt; SSL Proxying Settings and add the host of the call that you want to see the content for.<br \/>\nIn our case the host is i.instagram.com and the port is 443.<br \/>\n<img loading=\"lazy\" decoding=\"async\" width=\"2560\" height=\"1536\" class=\"aligncenter size-full wp-image-1150\" src=\"https:\/\/loadfocus.com\/blog\/wp-content\/uploads\/Screen-Shot-2017-03-18-at-19.49.40.png\" alt=\"\"><br \/>\n5. Now go back to the iPhone and open the application again, in our case Instagram.<\/p>\n<p>Now the traffic that is coming from the application will be shown as decrypted in Charles.<br \/>\n<img loading=\"lazy\" decoding=\"async\" width=\"2558\" height=\"1528\" class=\"aligncenter size-full wp-image-1152\" src=\"https:\/\/loadfocus.com\/blog\/wp-content\/uploads\/Screen-Shot-2017-03-18-at-19.53.50.png\" alt=\"\"><\/p>\n<p>Hope this will help you debug your native applications more easily.<!-- pn-faq --><\/p>\n<h2>Frequently Asked Questions<\/h2>\n<h3>Why inspect a native app&#8217;s traffic at all?<\/h3>\n<p>To debug behaviour you cannot see from the server side, to learn which APIs the app calls, to check how it handles security, and to replay a request yourself.<\/p>\n<h3>What do I need to see HTTPS calls?<\/h3>\n<p>A proxy between the device and the network, plus its certificate installed and trusted on the device. Without that trust step the traffic stays encrypted and you see nothing useful.<\/p>\n<h3>Why do some apps refuse to work through the proxy?<\/h3>\n<p>Certificate pinning, which is doing its job. The app only accepts its own certificate, so an intercepting proxy is rejected by design and that app cannot be inspected this way.<\/p>\n<p><!-- \/pn-faq --><!-- pn-related-reading --><\/p>\n<h2>Related reading<\/h2>\n<ul>\n<li><a href=\"https:\/\/loadfocus.com\/blog\/2014\/06\/how-to-pass-traffic-through-a-proxy-with-selenium-webdriver\">How to Pass Traffic Through a Proxy with Selenium WebDriver<\/a><\/li>\n<li><a href=\"https:\/\/loadfocus.com\/blog\/2013\/09\/how-to-debug-mobile-html5-and-native-applications\">How to Debug Mobile HTML5 and Native Applications?<\/a><\/li>\n<li><a href=\"https:\/\/loadfocus.com\/blog\/2017\/04\/how-to-make-a-recording-of-your-native-application-for-demo-or-debugging-purposes\">Record a Native App for Demos or Debugging<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p><span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\"><\/span> <span class=\"rt-time\"> 4<\/span> <span class=\"rt-label rt-postfix\">minutes read<\/span><\/span>Key takeaways A proxy between the device and the network is the only reliable way to see native app traffic. You must install and trust the proxy certificate on the device or HTTPS calls stay opaque. Certificate pinning defeats this deliberately, so expect some apps to refuse to connect. Why would I want to investigate&#8230;  <a href=\"https:\/\/loadfocus.com\/blog\/2017\/03\/debugging-the-traffic-from-a-native-iphone-application\" class=\"more-link\" title=\"Read Debugging the Traffic from a Native iPhone Application\">Read more &raquo;<\/a><\/p>\n","protected":false},"author":1,"featured_media":3675,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[155,48],"tags":[209,210],"class_list":["post-1143","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-mobile-testing","category-test-automation","tag-debug-ios-traffic","tag-debug-traffic-to-an-iphone-app"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/loadfocus.com\/blog\/wp-json\/wp\/v2\/posts\/1143","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/loadfocus.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/loadfocus.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/loadfocus.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/loadfocus.com\/blog\/wp-json\/wp\/v2\/comments?post=1143"}],"version-history":[{"count":0,"href":"https:\/\/loadfocus.com\/blog\/wp-json\/wp\/v2\/posts\/1143\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/loadfocus.com\/blog\/wp-json\/wp\/v2\/media\/3675"}],"wp:attachment":[{"href":"https:\/\/loadfocus.com\/blog\/wp-json\/wp\/v2\/media?parent=1143"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/loadfocus.com\/blog\/wp-json\/wp\/v2\/categories?post=1143"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/loadfocus.com\/blog\/wp-json\/wp\/v2\/tags?post=1143"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}