Firebug Introduction to the Web Hack toolkit

Firefox extension Firebug is a full-featured Web application debugger that helps web hackers gain insight into the internal mechanics of complex web applications. It is available in two versions: a component that can be used across browsers Firebug Lite, and an extension firebug dedicated to Firefox. This article will focus on the use of the former to the reader.

First, Introduction

Browser extension Firebug provides an integrated environment in which we can perform a comprehensive analysis of the Web applications of interest (see Figure 1). It provides many features to explore the DOM structure, dynamically modify HTML code, track and debug JavaScript code, monitor network requests and responses, and more.

Second, using Firebug console hijacking function

The Firebug console can be used to evaluate an expression. Acts like a command-line JavaScript interpreter. In the console, we can not only enter JavaScript expressions (for example, Alert (' Message ');), but also receive error messages. As shown in the following:

You can also insert code dynamically, for example, if you are testing a Web application that has a method, called Performrequest, that is exported from a Window object. The application uses this method to send requests from the client to the server. We are more interested in the information requested by this function, so we will be able to hijack the method by providing the following command in the console:

Window._oldperformrequest = Window.performrequest; Window.performrequest = function () {console.log (arguments); window._oldperformrequest.apply (window, arguments)}

The above code will actually replace the original performrequest function with our own function, and all parameters will be listed in the console when our function executes. At the end of the function call, we redirect the code flow to the original performrequest of the oldperformrequest definition, which executes the requested action. Now, we've learned how to hijack a function without rewriting the methods of the Web application.

Second, using Firebug to browse and dynamically modify HTML elements

Many web developers and designers often ignore the readability of HTML source code, especially the pages produced by WYSIWYG editors. This can exacerbate the difficulty of reviewing its source code, and we need to use some other tools to reorganize the parts of the page. Of course, we can use DOM inspector to explore these poorly structured HTML source code, and Firebug can do the same, and here's the HTML view of Firebug.

As seen in 3, you can select and expand each HTML element in the current view. When the mouse pauses over an element, the browser highlights the corresponding element. In the right-hand window, information about the style, layout, and Dom features is displayed. Dom information is extremely useful when you want to query the various types of properties available, almost like Dom inspector. In addition, we can use it to explore application operating mechanisms. For example, AJAX application developers often add additional attributes to images, links, and other types of HTML elements that may be a critical part of the application logic.

HTML views can also be used to dynamically modify the structure of application documents. We can either delete the selected element by pressing the DELETE key on the keyboard, or modify the properties of each element by double-clicking on the element property and setting its value. Note that changes to the HTML structure may not work for page update events. If you want the changes to be fixed, you can use the Greasemonkey script.

Third, debug JavaScript script with Firebug

Ajax applications typically involve JavaScript, XML, and on-demand information retrieval. They are often larger than normal applications and run like desktop applications. Because of the heavy use of JavaScript, you will find that the standard vulnerability estimator will not overwrite all possible attack modes. Just like a binary program test, we need to use the debugger to keep track of the code, analyze the program structure, and investigate potential problems, Firebug gives us all of these features and shows us the Firebug Script Debugger view.

In Figure 4 we can see a breakpoint, which is on line 2nd. Breakpoints are pseudo-directives that inform the JavaScript interpreter to stop/abort the process when the code arrives at those breakpoints. Once the program is paused, we can view current data stored in global, local variables, and even update them. Not only will we be able to understand what the program is doing, but we can also get full control of the application.

On the right side of Figure 4, you can see a list of watches and breakpoints. The breakpoint list contains all of the breakpoints we set in the code we are currently debugging. You can quickly disable and enable breakpoints, but you don't need to know the exact location of the breakpoint.

The monitoring list provides a mechanism to monitor changes in the DOM structure. For example, if you want to know how a value changes during a program's operation, simply create a corresponding monitoring entry.

Iv. manipulating DOM objects with Firebug

The DOM is where the content of the Web application is stored. The DOM structure provides all the necessary functions for dynamically editing a page, such as removing and inserting HTML elements, initializing timers, creating and deleting cookies, and so on. The DOM is the most complex component of all Web applications, so checking it is also the hardest. However, Firebug can provide a useful DOM view, which is used just like Dom inspector. Figure 5 shows the Dom view of the Firebug.

As shown, the DOM contains a long table of elements. We can see some of the functions that are currently available. By using the DOM view of Firebug, we can examine the various parts of the currently open application. We can view all the currently available properties and objects in a tree structure, and you can expand the elements and objects to see their child properties.

V. Use of Firebug to monitor the network

One of the most powerful features of Firebug is the network traffic monitoring feature. This view is extremely useful when we want to monitor Web requests made within an application. Of course, the livehttpheaders extension can also be used to monitor the network, but it will display all requests in a single list, while Firebug can view each character of each request in detail.

At the top of the network view, we can select different types of network activity, in which we want to view all requests. However, you can list only requests made by specific objects. A more interesting feature of Firebug is that the extension will log all network activity, regardless of whether it is open or not. This feature differs from the extended livehttpheaders, which only logs network events when it is open. However, unlike the livehttpheaders extension, Firebug cannot replay network activity, but it will be able to observe the network traffic more carefully. Shows the firebug is checking the request and response headers and the parameters sent.

Six, Firebug Lite introduction

Firebug Lite is a cross-browser component that can easily be embedded in applications that need to be tested it is designed for developers rather than security researchers, and is not as versatile as the Firefox extension version. However, it can be very helpful in some cases, such as when you need to debug an application in Internet Explorer, opera, and other browsers that do not support cross-platform installation (XPI) files of the Mozilla platform.

Before using Firebug Lite, you must embed some script tags within the application you need to debug. We must put the following script tags in the application page using Firebug:

language= "JavaScript" type= "Text/javascript" src= "/path/to/firebug/firebug.js" >

To track a variable in your application, you can use a console object. For example, if we want to track the change of the variable item in the following loop, you can use the following code:

function (var item in document) Console.log (item);

Vii. concluding remarks

The

Firefox extension Firebug is a full-featured Web application debugger that helps web hackers gain insight into the internal mechanics of complex web applications. This article details how to use the security testing process, such as hijacking functions, browsing and dynamically modifying HTML elements, manipulating the DOM, monitoring the network, debugging scripts, and so on. Finally, we also gave a brief introduction to Firebug Lite.