(Continued from Secure Web Interfaces)

OK, I had a tremendous urge to call this post “Hacking Web Interfaces”. But due to some uneducated folks who believe hacking is a bad word, I think I will stick to its euphemism.

The most direct way to feed random data to a web-service is in a raw format. Use telnet for absolute low level communications or tools like Fiddler, for communications at a higher level like HTTP. But with sites hosting hundreds of script files and html pages on their server, this approach has become more and more impractical. But there are other means to mess with the client side code.

DOM Inspector

If you use Firefox, you will notice there’s a utility called DOM Inspector that is included with it. As the name suggests, it allows you to see the DOM of the rendered HTML page. But, it also allows you to modify that DOM. You can modify the values of the properties of different DOM objects in the tree and even insert new objects.

Let’s try this technique on a product of one of the largest software companies, Google Calendar. I will use no other software than Firefox and DOM inspector.

Let’s go to the Settings screen. They have a setting for the “Custom View” property for the calendar.

Google Calendar Settings

Now I am a guy who wants to know what he would be doing in next 2 months but there is no option for that kind of view. Hmm, lets see if the DOM can help us. Firing the DOM Inspector, we see that the logic is quite simple.

Firefox DOM Inspector

The value of the ComboBox determines how the duration for which the custom view display the calendar. The value in the ComboBox is simply translated to the number of days. So I change the value to 42 (which is 6 weeks) and save my Settings. Et voilà, I get a custom view with 6 weeks 🙂 Cool!

Customized Google Calendar

Using Visual Studio with IE

IE has a script debugger built in, but it is worthwhile to go in for Visual Studio as the debugger of choice. There’s a free version of the Visual Studio suite called the Express edition available which you can download and use.

Now to make it work:

  1. Enable Script debugging in Internet Explorer.

    Internet Explorer Settings

  2. Create a New Solution with an Empty Website (File > New > Web Site…)

    New WebSite Project

  3. Go to Property Pages for the new Website in Solution Explorer and enter the URL you want to debug. Don’t worry if you don’t know the URL, just enter any URL and fire the breakpoints only when you hit the required URL.

    Property Pages

  4. You might get a dialog asking you to include the web.config file. Answer Yes and continue. Now you will be surfing with the debugger attached to Internet Explorer. You can hit pause, set breakpoints and even skip those functions that don’t interest you 😉

Using Venkman with Firefox

Venkman Firefox shortcut

I would have loved it if Visual Studio also worked with Firefox. There’s a solution called Venkman. I won’t go through the complete detail of how to go about using it, you can read it up here.

Venkman Firefox

I haven’t found a way to skip code (a la Visual Studio) using this yet.

You can change variable values by directly typing the JavaScript code for it.

The interface doesn’t have all the bells and whistles but should be able to get most of your work done.