top of page
  • Writer's pictureSudo Jvck

Exploring Web Applications

As a penetration tester, your primary role is to discover features that could potentially be vulnerable and attempt to exploit them to assess their importance. These features are usually parts of a website or application that require interaction from a user.


Finding these interaction points of interest can be as simple as finding a login form to manually reviewing a website's source code. Its good practice to start this process by simply using the application like any other user would; Exploring every feature while notating their importance or functionality.


Example:


​Feature

URL

Summary

Home Page

/

​This page contains a business summary with a company photo of their staff.

​Latest News

​/news

​This page contains a list of recently published news articles by the company, and each news article has a link with an id number, i.e. /news/article?id=1

​News Article

​/news/article?id=1

​Displays the individual news article. Some articles seem to be blocked and reserved for premium customers only.

Page Source Code


The page source is the human-readable code returned to our browser/client from the web server each time we make a request. The returned code is made up of HTML (HyperText Markup Language), CSS (Cascading Style Sheets) and JavaScript, and it's what tells our browser what content to display, how to show it and adds an element of interactivity with JavaScript. Viewing the page code can reveal how the application/site functions as well as other useful information we can use during our engagement.



How do I view the Page Source?


  1. While viewing a website, you can right-click on the page, and you'll see an option on the menu that says View Page Source.

  2. Most browsers support putting view-source: in front of the URL for example, view-source:https://www.google.com/

  3. In your browser menu, you'll find an option to view the page source. This option can sometimes be in submenus such as developer tools or more tools.


Example:




Many websites use what's called a framework. A framework is a collection of premade code that easily allows a developer to include common features that a website would require, such as blogs, user management, form processing, and much more, saving the developers hours or days of development.


Viewing the page source can give us clues into whether a framework is in use and, if so, which framework and even what version. Knowing the framework and version can be a powerful find as there may be public vulnerabilities in the framework, and the website might not be using the most up to date version.



Developer Tools


Every modern browser includes developer tools; this is a tool kit used to aid web developers in debugging web applications and gives you a peek under the hood of a website to see what is going on. As a penetration tester, we can leverage these tools to provide us with a much better understanding of the web application. We're specifically focusing on three features of the developer tool kit, Inspector, Debugger and Network.




Inspector


The page source doesn't always represent what's shown on a webpage; this is because CSS, JavaScript and user interaction can change the content and style of the page, which means we need a way to view what's been displayed in the browser window at this exact time. Element inspector assists us with this by providing us with a live representation of what is currently on the website.




Debugger


This panel in the developer tools is intended for debugging JavaScript, and is an excellent feature for web developers wanting to work out why something might not be working. But as penetration testers, it gives us the option of digging deep into the JavaScript code. In Firefox and Safari, this feature is called Debugger, but in Google Chrome, it's called Sources.


***Many times when viewing JavaScript files, you'll notice that everything is on one line, which is because it has been minimized, which means all formatting ( tabs, spacing and newlines ) have been removed to make the file smaller.


We can return some of the formatting's by using the "Pretty Print" option, which looks like two braces { } to make it a little more readable, although due to the obfuscation, it's still difficult to comprehend what is going on with the file.






Network


The network tab on the developer tools can be used to keep track of every external request a webpage makes. If you click on the Network tab and then refresh the page, you'll see all the files the page is requesting.



Tune in next week where I'll go more into detail on how to use these tools to your advantage.


L8r!






Comentarios


bottom of page