{"id":466,"date":"2016-08-17T02:03:19","date_gmt":"2016-08-17T02:03:19","guid":{"rendered":"https:\/\/samwebman.wordpress.com\/?p=466"},"modified":"2016-08-17T02:03:19","modified_gmt":"2016-08-17T02:03:19","slug":"capture-android-mobile-web-traffic-with-fiddler","status":"publish","type":"post","link":"https:\/\/www.intentrust.com\/?p=466","title":{"rendered":"Capture Android Mobile Web Traffic With Fiddler"},"content":{"rendered":"<p><!-- .entry-header --><\/p>\n<div class=\"entry-content\">\n<blockquote>\n<div class=\"mt-image-center\"><img loading=\"lazy\" src=\"http:\/\/cdn.scooterlabs.com\/images\/android-fiddler-example.png\" alt=\"Example screenshot of Android mobile browser and Fiddler proxy\" width=\"500\" height=\"475\" \/><\/div>\n<p>When doing web development on the desktop, you have the benefit of inspection and debugging tools available in modern browsers like Chrome, Firefox, Safari and Internet Explorer. Inspecting web traffic for page requests and API calls is relatively straightforward. Once you move over to mobile development, you miss a lot of those built-in tools. Luckily there are some good desktop network proxy tools which can make mobile traffic inspection possible again.<\/p>\n<p>In this post I\u2019ll walk through setting up an Android 4.x device with <a href=\"http:\/\/fiddler2.com\/\">Fiddler<\/a> running on a Windows PC. Fiddler is a powerful HTTP\/HTTPS proxy utility that is pretty easy to set up and use for this type of analysis. And it\u2019s free. (Mac users could use similar steps with the <a title=\"Charles Web Debugging Proxy Application\" href=\"http:\/\/www.charlesproxy.com\/\">Charles<\/a> web debugging proxy; it\u2019s not free but does have a free trial and is relatively inexpensive.)<\/p>\n<p>Once we have this set up, some typical use cases include:<\/p>\n<ul>\n<li>Mobile web development or performance measurement<\/li>\n<li>Mobile app development or debugging<\/li>\n<li>Observing other apps on your phone to understand network connections being made or for security analysis<\/li>\n<\/ul>\n<h3>Prerequisites<\/h3>\n<p>As prerequisite, you should install Fiddler and be somewhat familiar with how to use it. If you haven\u2019t used it before, check out the <a title=\"Fiddler Features Tour\" href=\"http:\/\/fiddler2.com\/features\">features tour<\/a> on the Fiddler website.<\/p>\n<p>The Android device should be on the same network as the Windows PC. The PC doesn\u2019t have to be on Wi-Fi, as long as they can connect to each other. (If in doubt, trying pinging from the Windows PC to the Android device to verify the local network connection.)<\/p>\n<div class=\"mt-image-center\"><img loading=\"lazy\" src=\"http:\/\/cdn.scooterlabs.com\/images\/android-pc-wifi.png\" alt=\"Android device and Windows PC on same network\" width=\"276\" height=\"249\" \/><\/p>\n<div class=\"image-caption\">Android device (on Wi-Fi) and the Windows PC on the same network<\/div>\n<\/div>\n<h3>Set up Fiddler<\/h3>\n<p>After Fiddler is installed, configure it to allow remote connections and to decrypt HTTPS traffic:<\/p>\n<ol>\n<li>Click menu Tools | Fiddler Options, then select the Connections tab<\/li>\n<li>Make note of the \u201cFiddler listens on\u201d port (normally it\u2019s 8888)<\/li>\n<li>Make sure the check box for \u201cAllow remote computer to connect\u201d is checked<\/li>\n<li>Switch to the HTTPS tab<\/li>\n<li>Make sure the check boxes for \u201cCapture HTTPS Connects\u201d and \u201cDecrypt HTTPS traffic\u201d are both checked<\/li>\n<li>Restart Fiddler<\/li>\n<li>Make note of the PC\u2019s IP address<\/li>\n<li>Close non essential apps on the Windows PC (to minimize web traffic being routed through Fiddler)<\/li>\n<\/ol>\n<div class=\"mt-image-center\"><a href=\"http:\/\/cdn.scooterlabs.com\/images\/fiddler-connection-options.png\"><img loading=\"lazy\" src=\"http:\/\/cdn.scooterlabs.com\/images\/fiddler-connection-options_tn.png\" alt=\"Fiddler connection options\" width=\"385\" height=\"195\" \/><\/a><\/p>\n<div class=\"image-caption\">Fiddler connection options (click to enlarge)<\/div>\n<\/div>\n<h3>Set up Android Networking<\/h3>\n<p>Now we\u2019ll set up the Android device to connect to the Fiddler proxy. These instructions should work for most Android phones or tablets on OS 4.0 and newer. (If your device doesn\u2019t work or needs slightly different steps, you can search Google for <em>your-phone-model http proxy<\/em>.)<\/p>\n<ol>\n<li>Tap on Settings, then Wi-Fi<\/li>\n<li>Find the network on which you\u2019re connected (normally the first one listed), then tap and hold<\/li>\n<li>Choose Modify network from the pop-up<\/li>\n<li>Scroll down and enable \u201cShow advanced options\u201d<\/li>\n<li>Change \u201cProxy settings\u201d to Manual<\/li>\n<li>Under \u201cProxy host name\u201d enter the Windows PC IP address from above<\/li>\n<li>Under \u201cProxy port\u201d enter the Fiddler port from above (usually 8888)<\/li>\n<li>Tap Save and wait a moment for the network to reconnect<\/li>\n<\/ol>\n<div class=\"mt-image-center\"><a href=\"http:\/\/cdn.scooterlabs.com\/images\/android-proxy-settings.png\"><img loading=\"lazy\" src=\"http:\/\/cdn.scooterlabs.com\/images\/android-proxy-settings_tn.png\" alt=\"Android network proxy settings\" width=\"384\" height=\"343\" \/><\/a><\/p>\n<div class=\"image-caption\">Android proxy settings (click to enlarge)<\/div>\n<\/div>\n<h3>Google Chrome Settings<\/h3>\n<p><strong>Added 2014-06-06:<\/strong> Thanks to Stack Overflow user <a href=\"http:\/\/stackoverflow.com\/users\/603003\/comfreek\">comfreek<\/a> who pointed out this issue with Chrome proxy settings.<\/p>\n<p>On newer versions of Google Chrome for Android, there are new settings for <a href=\"https:\/\/support.google.com\/chrome\/answer\/2392284?hl=en\">Bandwidth Management<\/a>. When bandwidth management is enabled (which I believe is the default), HTTP traffic will go through Google proxy servers rather than the customer HTTP proxy we are setting up here.<\/p>\n<p>You\u2019ll need to make sure bandwidth management is turned off:<\/p>\n<ol>\n<li>Launch Google Chrome<\/li>\n<li>Go to Settings, then under Advanced tap on Bandwidth management<\/li>\n<li>Turn off Preload webpages and Reduce data usage<\/li>\n<\/ol>\n<h3>Set up Android Networking<\/h3>\n<p>Now we\u2019ll set up the Android device to connect to the Fiddler proxy. These instructions should work for most Android phones or tablets on OS 4.0 and newer. (If your device doesn\u2019t work or needs slightly different steps, you can search Google for <em>your-phone-model http proxy<\/em>.)<\/p>\n<ol>\n<li>Tap on Settings, then Wi-Fi<\/li>\n<li>Find the network on which you\u2019re connected (normally the first one listed), then tap and hold<\/li>\n<li>Choose Modify network from the pop-up<\/li>\n<li>Scroll down and enable \u201cShow advanced options\u201d<\/li>\n<li>Change \u201cProxy settings\u201d to Manual<\/li>\n<li>Under \u201cProxy host name\u201d enter the Windows PC IP address from above<\/li>\n<li>Under \u201cProxy port\u201d enter the Fiddler port from above (usually 8888)<\/li>\n<li>Tap Save and wait a moment for the network to reconnect<\/li>\n<\/ol>\n<div class=\"mt-image-center\"><a href=\"http:\/\/cdn.scooterlabs.com\/images\/android-proxy-settings.png\"><img loading=\"lazy\" src=\"http:\/\/cdn.scooterlabs.com\/images\/android-proxy-settings_tn.png\" alt=\"Android network proxy settings\" width=\"384\" height=\"383\" \/><\/a><\/p>\n<div class=\"image-caption\">Android proxy settings (click to enlarge)<\/div>\n<\/div>\n<h3>Web Browsing<\/h3>\n<p>On the Android device, bring up a browser like Chrome and visit a website like http:\/\/bing.com. If everything has been set up correctly, you should see the HTTP traffic flowing through Fiddler. You can click and inspect each of the network requests, for example the HTML page, CSS, JavaScript, and images.<\/p>\n<div class=\"mt-image-center\"><img loading=\"lazy\" src=\"http:\/\/cdn.scooterlabs.com\/images\/fiddler-bing-capture.png\" alt=\"Fiddler Bing.com capture example\" width=\"499\" height=\"355\" \/><\/p>\n<div class=\"image-caption\">Example capture of Bing mobile website through Fiddler<\/div>\n<\/div>\n<p>Now let\u2019s try a website that forces HTTPS, for example https:\/\/wellsfargo.com. In this case the mobile browser is complaining that it can\u2019t validate the SSL certificate from the server. This is accurate because we\u2019re using Fiddler as a proxy and it\u2019s generating its own SSL certificates for us on the fly. (This is what allows Fiddler to decrypt and inspect these HTTPS connections.) We\u2019ll come back to this in a bit.<\/p>\n<p><strong>Caution<\/strong>: I recommend not choosing the \u201cproceed anyway\u201d option here. Mobile browsers tend to cache that choice for a long team, meaning that you won\u2019t be warned about it again in the future.<\/p>\n<div class=\"mt-image-center\"><img loading=\"lazy\" src=\"http:\/\/cdn.scooterlabs.com\/images\/chrome-ssl-warning.png\" alt=\"Android Chrome browser warning about SSL certificate\" width=\"384\" height=\"364\" \/><\/p>\n<div class=\"image-caption\">Chrome browser warning about unverified SSL certificate<\/div>\n<\/div>\n<h3>Install Fiddler Certificate to Android<\/h3>\n<p>As a final step to improve the debugging of secure HTTPS connections, we can install a Fiddler \u201croot\u201d certificate on the Android device. (Note: If your device does not already have a PIN or password, you will need to set one up before installing the certificate.)<\/p>\n<p>Steps:<\/p>\n<ol>\n<li>On Android start the Chrome browser<\/li>\n<li>Navigate to <a href=\"http:\/\/ipv4.fiddler:8888\/\">http:\/\/ipv4.fiddler:8888\/<\/a><\/li>\n<li>Tap on the link for the \u201cFiddler Root Certificate\u201d<\/li>\n<li>Name the certificate \u201cFiddler\u201d and install it (entering your PIN or password if prompted)<\/li>\n<\/ol>\n<p>With this test certificate installed, you should now be able to visit SSL sites from the Android Chrome browser and not receive any certificate warnings. The network traffic should also be viewable in Fiddler. Good test sites are those which always force secure HTTPS connections, like the Wells Fargo mobile site at <a href=\"https:\/\/wellsfargo.com\/\">https:\/\/wellsfargo.com\/<\/a>.<\/p>\n<h3>Return to Normal Android Networking<\/h3>\n<p>When you\u2019re done with your Android\u2192Fiddler testing, remember to restore your normal Android network settings. Otherwise you may be confused later when none of your apps work \ud83d\ude42<\/p>\n<ol>\n<li>Tap on Settings, then Wi-Fi<\/li>\n<li>Find the network on which you\u2019re connected (should be the first one listed), then tap and hold<\/li>\n<li>Choose Modify network from the pop-up<\/li>\n<li>Scroll down and select (enable) \u201cShow advanced options\u201d<\/li>\n<li>Change \u201cProxy settings\u201d to None<\/li>\n<li>Tap Save and wait a moment for the network to reconnect<\/li>\n<li>Go up a level in settings to Security<\/li>\n<li>Tap Trusted credentials, then select the User tab<\/li>\n<li>Tap on the Fiddler \u201cDo not trust\u201d certificate, then scroll down to remove it<\/li>\n<li>You may need to power cycle your device to get all apps to forget about the Fiddler certificate (e.g., the Chrome browser will continue to try to use it for a while<\/li>\n<\/ol>\n<\/blockquote>\n<p>Referance from: http:\/\/www.cantoni.org\/2013\/11\/06\/capture-android-web-traffic-fiddler<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>When doing web development on the desktop, you have the &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/www.intentrust.com\/?p=466\" class=\"more-link\">\u95b1\u8b80\u5168\u6587<span class=\"screen-reader-text\">\u3008Capture Android Mobile Web Traffic With Fiddler\u3009<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[65],"_links":{"self":[{"href":"https:\/\/www.intentrust.com\/index.php?rest_route=\/wp\/v2\/posts\/466"}],"collection":[{"href":"https:\/\/www.intentrust.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.intentrust.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.intentrust.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.intentrust.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=466"}],"version-history":[{"count":0,"href":"https:\/\/www.intentrust.com\/index.php?rest_route=\/wp\/v2\/posts\/466\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.intentrust.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=466"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.intentrust.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=466"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.intentrust.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=466"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}