Thursday, September 1, 2011

Modify Headers in IE

Modify Headers is a very useful Firefox plug-in for developers.  It allows you to setup mocking data in headers for testing.  However, sometime the problem we are trying to solve is browser specific.  In this case, using Firefox is not an option.  I happen to bump into such issue that I have to get my application working in IE.  So I googled it and finally came up with the solution using Fiddler 2.  And here is my note on how to set it up and get it to work:
  1. After installed Fiddler 2 from it's official site, start the application.
  2. On the right panel, select Filters tab.
  3. Check "Use Filters"
  4. If you only need to add one header, then check "Set Request Header" and fill in the key-value pair under the "Request Headers" section 
  5.  If you need to add more than one header, then go to Menu -> Rules -> Customize Rules... or hit Ctrl + R to open CustomRules.js,
  6. Search for function OnBeforeRequest(oSession: Session) in the file, and add your headers in the function, ie: oSession.oRequest["MY_HEADER"] = "HEADER_VALUE";
  7. Save the filterset configuration and CustomRules.js
  8. IE8 or below doesn’t send requests for localhost through any proxies, and as a proxy, Fiddler will not receive such traffic, thus modify headers won't work with localhost or 127.0.0.1 at all. You can refer to How-To guide to setup your local instance as you like.  Just make sure that whenever the header you added is asked, the request doesn't come for localhost or 127.0.0.1.
  9. Finally, it come to the most tricky part.  When testing, you should always start Fiddler first, then click on the "Browse" button from toolbar to open a new IE window and go to your testing site from there.