Debugging Page Content
A good place to start our web application information mapping
is with a URL address.
File extensions, which are sometimes part of a URL,
can reveal the programming language the application was written in.
Some extensions, like .php, are straightforward,
but others are more cryptic and vary based on the frameworks in use.
File extensions on web pages are becoming less common,
however,
since many languages and frameworks now support the concept of routes,
which allow developers to map a URI to a section of code.
Applications leveraging routes use logic to determine
what content is returned to the user,
making URI extensions largely irrelevant.
Although URL inspection can provide some clues about the target web application,
most context clues can be found in the source of the web page.
The Firefox Debugger tool, found in the Web Developer menu,
displays the page’s resources and content,
which varies by application.
The Debugger tool may display JavaScript frameworks,
hidden input fields,
comments,
client-side controls within HTML,
JavaScript, and much more.
Let’s test this out by opening Debugger while browsing the offsecwp app:
We’ll notice that the application uses jQuery, a common JavaScript library.
In this case, the developer minified the code,
making it more compact and conserving resources,
which also makes it somewhat difficult to read.
Fortunately, we can “prettify” code within Firefox
by clicking on the Pretty print source button with the double curly braces:
After clicking the icon,
Firefox will display the code in a format that is easier to read and follow:
We can also use the Inspector tool to drill down into specific page content.
Let’s use it to examine the search input element
from the WordPress home page by scrolling,
right-clicking the search field on the page,
and selecting Inspect.
This will open the Inspector tool
and highlight the HTML for the element we right-clicked on.
This tool can be especially useful
for quickly finding hidden form fields in the HTML source.
Now that we have some familiarity with how to use the built-in browser debugger,
we’ll learn how to use the Network Tool and Burp Proxy
to inspect HTTP response headers.