Category Archives: Web

Capture Android Mobile Web Traffic With Fiddler

Example screenshot of Android mobile browser and Fiddler proxy

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.

In this post I’ll walk through setting up an Android 4.x device with Fiddler 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’s free. (Mac users could use similar steps with the Charles web debugging proxy; it’s not free but does have a free trial and is relatively inexpensive.)

Once we have this set up, some typical use cases include:

  • Mobile web development or performance measurement
  • Mobile app development or debugging
  • Observing other apps on your phone to understand network connections being made or for security analysis

Prerequisites

As prerequisite, you should install Fiddler and be somewhat familiar with how to use it. If you haven’t used it before, check out the features tour on the Fiddler website.

The Android device should be on the same network as the Windows PC. The PC doesn’t 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.)

Android device and Windows PC on same network

Android device (on Wi-Fi) and the Windows PC on the same network

Set up Fiddler

After Fiddler is installed, configure it to allow remote connections and to decrypt HTTPS traffic:

  1. Click menu Tools | Fiddler Options, then select the Connections tab
  2. Make note of the “Fiddler listens on” port (normally it’s 8888)
  3. Make sure the check box for “Allow remote computer to connect” is checked
  4. Switch to the HTTPS tab
  5. Make sure the check boxes for “Capture HTTPS Connects” and “Decrypt HTTPS traffic” are both checked
  6. Restart Fiddler
  7. Make note of the PC’s IP address
  8. Close non essential apps on the Windows PC (to minimize web traffic being routed through Fiddler)
Fiddler connection options

Fiddler connection options (click to enlarge)

Set up Android Networking

Now we’ll 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’t work or needs slightly different steps, you can search Google for your-phone-model http proxy.)

  1. Tap on Settings, then Wi-Fi
  2. Find the network on which you’re connected (normally the first one listed), then tap and hold
  3. Choose Modify network from the pop-up
  4. Scroll down and enable “Show advanced options”
  5. Change “Proxy settings” to Manual
  6. Under “Proxy host name” enter the Windows PC IP address from above
  7. Under “Proxy port” enter the Fiddler port from above (usually 8888)
  8. Tap Save and wait a moment for the network to reconnect
Android network proxy settings

Android proxy settings (click to enlarge)

Google Chrome Settings

Added 2014-06-06: Thanks to Stack Overflow user comfreek who pointed out this issue with Chrome proxy settings.

On newer versions of Google Chrome for Android, there are new settings for Bandwidth Management. 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.

You’ll need to make sure bandwidth management is turned off:

  1. Launch Google Chrome
  2. Go to Settings, then under Advanced tap on Bandwidth management
  3. Turn off Preload webpages and Reduce data usage

Set up Android Networking

Now we’ll 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’t work or needs slightly different steps, you can search Google for your-phone-model http proxy.)

  1. Tap on Settings, then Wi-Fi
  2. Find the network on which you’re connected (normally the first one listed), then tap and hold
  3. Choose Modify network from the pop-up
  4. Scroll down and enable “Show advanced options”
  5. Change “Proxy settings” to Manual
  6. Under “Proxy host name” enter the Windows PC IP address from above
  7. Under “Proxy port” enter the Fiddler port from above (usually 8888)
  8. Tap Save and wait a moment for the network to reconnect
Android network proxy settings

Android proxy settings (click to enlarge)

Web Browsing

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.

Fiddler Bing.com capture example

Example capture of Bing mobile website through Fiddler

Now let’s try a website that forces HTTPS, for example https://wellsfargo.com. In this case the mobile browser is complaining that it can’t validate the SSL certificate from the server. This is accurate because we’re using Fiddler as a proxy and it’s generating its own SSL certificates for us on the fly. (This is what allows Fiddler to decrypt and inspect these HTTPS connections.) We’ll come back to this in a bit.

Caution: I recommend not choosing the “proceed anyway” option here. Mobile browsers tend to cache that choice for a long team, meaning that you won’t be warned about it again in the future.

Android Chrome browser warning about SSL certificate

Chrome browser warning about unverified SSL certificate

Install Fiddler Certificate to Android

As a final step to improve the debugging of secure HTTPS connections, we can install a Fiddler “root” 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.)

Steps:

  1. On Android start the Chrome browser
  2. Navigate to http://ipv4.fiddler:8888/
  3. Tap on the link for the “Fiddler Root Certificate”
  4. Name the certificate “Fiddler” and install it (entering your PIN or password if prompted)

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 https://wellsfargo.com/.

Return to Normal Android Networking

When you’re done with your Android→Fiddler testing, remember to restore your normal Android network settings. Otherwise you may be confused later when none of your apps work :)

  1. Tap on Settings, then Wi-Fi
  2. Find the network on which you’re connected (should be the first one listed), then tap and hold
  3. Choose Modify network from the pop-up
  4. Scroll down and select (enable) “Show advanced options”
  5. Change “Proxy settings” to None
  6. Tap Save and wait a moment for the network to reconnect
  7. Go up a level in settings to Security
  8. Tap Trusted credentials, then select the User tab
  9. Tap on the Fiddler “Do not trust” certificate, then scroll down to remove it
  10. 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)

Find Largest Files in Dropbox

File hosting services like Dropbox, SkyDrive, Google Drive, and Box all have very generous free storage levels (2 GB and up). Even so, it’s easy to quickly reach the free limit, especially as you start backing up photos, movies, and other large files.

If you’re getting close to your service’s free limit, here’s a solution for quickly finding the largest of your files, so you can clean them out or back up elsewhere. This works best when you’ve set up your service to sync everything to your local Mac or Windows computer. In my case I’m using Dropbox which defaults to this mode.

The solution involves a free (open-source) software application, depending on which platform you’re using:

The steps are pretty straightforward:

  1. Install the utility and start it
  2. Point to your local storage path (in my case, the Dropbox home dir)
  3. Run the analysis
  4. From the results, find the large files and do something with them (back up, move, delete, etc.)

Both utilities show a “treemap” view which helps quickly spot the biggest individual files (e.g., movies), and groups of similar files that collectively take a lot of space (e.g., MP3).

Here are screenshots of the two apps run against my Dropbox path:

WinDirStat Screenshot

WinDirStat results point to the biggest files in my Dropbox account

Disk Inventory X Screenshot

Disk Inventory X results are patterned after WinDirStat

In my case I’m primarily using Dropbox and have used about half of my 5GB account. I use the WinDirStat utility regularly to find large files that are better saved elsewhere, and to keep my Dropbox backups somewhat manageable.

Domain Names and Web Hosting by Pair Networks

For the past 10+ years I have hosted this website and my other side projects through pair Networks. I’m also managing all of my domain names through the sister company pairNIC.

As of today (2 more domains registered!) I have 17 domain names, 7 of which have live websites. The rest are on my “todo” project list.

I’ve been very happy with pair, both on price and support.

If you have a need for either web hosting or domain name registration, you should consider pair. If you use these links I’ll get a small referral which helps pay the bills.

Preventing Scam or Fraud Warnings for Email Newsletters

Some email clients like Thunderbird will sometimes show a scam warning message on emails which appear to be normal and not suspicious. The Thunderbird warning is two-part: first an inline message “This message may be a scam, and second a modal dialog which appears when you click on any link in the email. Combined this could be worrisome for users who aren’t sure what the warning means.

I’ve been seeing this more frequently lately with email newsletters. The most common cause is link tracking added by the newsletter delivery vendor (MailChimp, Tinyletter, etc.). The scam warning will come up whenever the displayed text link does not match the embedded hyperlink. It’s mean to detect phishing attacks where the displayed text may say “paypal.com”, but the link actually goes to “evilsite.com”.

For example, this link will cause the warning:

<p>Visit our home page: <a href="http://mailchimp.com/track/xyz...">http://example.com</a></p>

Instead the problem can be avoided by using text instead of a URL for the link:

<p>Visit our <a href="http://mailchimp.com/track/xyz...">home page</a></p>

Here’s an example of Thunderbird complaining about a few links in Scott Hanselman’s Newsletter of Wonderful Things. (By the way I don’t mean to pick on this excellent newsletter, just using it as an example.)

Thunderbird screenshot showing scam warning message

An example of the Email Scam warning message in the Thunderbird email client

To learn more, I recommend these two resources which explain the Thunderbird behavior and how to prevent it for most cases: