One of the most important characteristics of Dynamic Hypertext Markup Language
(DHTML) and AJAX is that they both perform dynamic modifications on the Web applica-tion HTML structure.This makes Web applicaapplica-tions a lot faster, and thus more efficient, because only parts of the Web page are updated, as compared to all of the content. Knowing about how the HTML structure (the DOM) changes is the first step when performing a security audit.This is when we use the DOM Inspector Firefox Extension.
Since 2003, the DOM Inspector is a default component of the Firefox browser.You can access the extension from Tools | DOM Inspector. Figure 2.7 shows the default screen of DOM Inspector.
Figure 2.7 DOM Inspector Main Window
If you cannot find DOM Inspector in your Tools menu, it is probably not enabled. In order to enable it, you need to download the latest Firefox Installation executable and install it again. When you are asked about the type of setup, choose Custom.The Custom setup window configuration dialog looks like that in Figure 2.8
Select the DOM Inspectorcheck box if not selected and press Next.You can continue with the rest of the installation using default settings.
The “DOM Inspector” dialog box is divided into four main sections (see Figure 2.9).
The top part contains information about the resource that is being inspected.The middle of the dialog is occupied by two inspection trees from where you can select the type of struc-ture you want to explore: CSS, DOM, JavaScript object, and so forth.The bottom of the dialog box contains the actual page that is under inspection. We use Gmail in this example.
Figure 2.8 Mozilla Custom Setup Wizard
The middle part of the dialog box, where the inspection trees are located, is also the most interesting.You can navigate through the DOM structure by expanding and collapsing the tree on the left side, which then updates the content on the right side and allows you to narrow your search.The left and right side have several views that you can choose
depending on the purpose of your inspection. If you are a graphic designer you might be interested in inspecting the various CSS properties, or if you are Web developer or security researcher you might be interested in examining the actual DOM JavaScript representation.
Each of the inspection trees has a button to allow you to choose between the different views, as shown in Figure 2.9.
Figure 2.9 DOM Inspector View Selection
By switching between different views you can explore the HTML structure of the appli-cation that you are testing in the most precise manner.You don’t have to examine messy HTML, CSS or JavaScript code. If you select a node from the DOM Inspector you can copy and paste it to a different place.You can read the XML code that composes the node or highlight the element on the HTML page. All of these operations are performed from DOM Inspector contextual menus. Figure 2.10 shows the selected node contextual menu in action.
Figure 2.10 DOM Inspector Contextual Menu
It will take awhile to learn how to navigate through the DOM structure via the DOM Inspector, but it is well worth the time. It is particularly important to know how to explore a JavaScript DOM structure.This is because developers often attach custom events, methods, and variables to these elements, which can reveal how the application works. With DOM Inspector we can look into how function calls are structured and the event flow of the application that we are testing. Figure 2.11 illustrates several DOM methods that are avail-able on one of the inner iframes of GMail.
Figure 2.11 GMail Inner iframe Object Model
All of the functions visible on Figure 2.11 are standard for most DOM representations. If this iframe is important for the application workflow, we can replace some of these functions with our own and essentially hack into GMail internal structure. For example, a modified function can be used to sniff for certain events and then trigger actions when they occur.
This could alternately be done by manually modifying the response data with any of the Web application testing proxies that we discuss in the book (e.g. Burp), but DOM Inspector helps to automate this process. As a result, you no longer have to manually intercept, change, and pass every Web request to the target function.
DOM Inspector has a facility called “Evaluate Expression,” which can be used to tap into the DOM Structure with some JavaScript expressions. Figure 2.12 shows the “Evaluate Expression” dialog box.
Figure 2.12 Evaluate Expression Dialog Box
If we want to replace the referrerobject parameter from one of the GMail’s inner iframes, type the following code inside the “Evaluate Expression” dialog box:
target.referrer = 'http://evil/?<script>alert(\'xss\')</script>'
This expression will successfully replace the referrerof the inner iframe with your own value. After this expression is applied, all future calls that occur inside the targeted iframe will supply the value of the referrer as http://evil?<script>alert(‘xss’)</script>.This quick fix may cause XSS inside the server logs or any other part where the referrer field is used without any sanitizations applied. In our case, GMail is not vulnerable but you never know what the situation is from the inside of GMail.
DOM Inspector is an extremely powerful extension for Firefox that gives the power of examining complex Web applications with a few mouse clicks. It comes by default with Firefox, and you can use it without the need for installing additional components. However, we will learn later in this chapter that there is another Firefox extension created by the developers of DOM Inspector that allows us to do even more.