The other day I came across an article called Hacking Web 2.0 Applications with Firefox. This is a fantastic article for two reasons:
- It emphasizes just how little you should be trusting any client-side validation for ensuring the security of your web application. In other words, don’t be trusting anything that is submitted to your server-side just because you are doing it in a hidden ajax method or something.
- It highlights what I consider to be pretty much the most important tool in my web application toolbox: the Firebug Extension for Firefox.
This tool is not only a debugger for javascript; it also allows you to completely dissect a page’s html structure, css and javascript in seconds. No more combing through View Source in order to figure out how a page is laid out, or trying to find what css is acting on what. Just hit F12 in firefox to open the Firebug panel and click the Inspect button.
There’s a tonne of things you can do with this extension, but go install it and come back here and I’ll show you a fun little trick.
Are you back? Ok, try this: click F12 to open the firebug panel and hit the inspect button. With this you can see the shape of all the DOM elements on this page. Actually click on an element and you can do things like browse through the html tree, view any css styles acting on it etc etc.
Now you know what the html structure of the page looks like. Note the id for the top header of this page is called ‘header’. Now we’ll take advantage of the fact that this blog uses the scriptaculous library in order to make the header on this page disappear right in front of you. Click the Console tab in Firebug. At the bottom, you can enter in arbitrary javascript and it will run in the context of your page. This is very useful for testing out javascript you are working on. Enter new Effect.BlindUp(”header”); here. You’ll see the whole header on the page slide up into nonexistence.
In order to get it back, you can enter new Effect.BlindDown(”header”);.
This command wouldn’t work for other pages, because it relies on the scriptaculous library being linked on the page you are viewing. However you can easily do something like document.getElementById(”dom-id-of-irritating-flashing-gif”).style.display= “none” on any page as a way to nuke any irritating ads.
I was playing around with the firebug ext. just the otherday, i cant remember how i came accross it, its an awsome ext. tho! good work.