Using Firebug to analyze and alter basic behavior

Firebug is a browser add-on that allows us to analyze the inner components of a web page, such as table elements, cascading style sheets (CSS) classes, frames, and so on. It also has the ability to show us DOM objects, error codes, and request-response communication between the browser and server.

In the previous recipe, we saw how to look into a web page's HTML source code and found a hidden input field that established some default values for the maximum size of a file. In this recipe, we will see how to use the browser's debugging extensions, in this particular case, Firebug for Firefox or OWASP-Mantra.

Getting ready

With vulnerable_vm running, browse to http://192.168.56.102/WackoPicko.

How to do it...

1. Right-click on Check this file and then select Inspect Element with Firebug.
   
2. There is a type="hidden" parameter on the first input of the form; double-click on hidden.
3. Replace hidden by text and hit Enter.
   
4. Now double-click on the 30000 of the parameter value.
5. Replace the value by 500000.
   
6. Now, we see a new text box in the page with 500000 as the value. We have just changed the file size limit and added a form field to change it.
   

How it works...

Once a web page is received by the browser, all its elements can be modified to alter the way the browser interprets it. If the page is reloaded, the version generated by the server is shown again.

Firebug allows us to modify almost every aspect of how the page is shown in the browser; so, if there is a control-established client-side, we can manipulate it with this tool.

There's more...

Firebug is not only a tool to unhide inputs or change values, it also has some other very useful tools:

• The Console tab shows errors, warnings, and some other messages generated when loading the page.
• HTML is the tab we just used. It presents the HTML source in a hierarchical way thus allowing us to modify its contents.
• The CSS tab is used to view and modify the CSS styles used by the page.
• Within Script we can see the full HTML source, set breakpoints that will interrupt the page load when the process reaches them, and check variable values when running scripts.
• The DOM tab shows us the DOM (Document Object Model) objects, their values, and the hierarchy.
• Net displays the requests made to the server and its responses, their types, size, response time, and its order in a timeline.
• Cookies contain, as the name says, the cookies set by the server and their values and parameters.