As a hacker, your role reviewing a website or web application is to discover features that could potentially be vulnerable and attempt to exploit them. These features are usually parts of the website that require some interactivity with the user. Make sure that you’re noting down the individual pages/features with a summary for each one.

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, CSS 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.

For our purposes, viewing the page source can help us discover more information about the web application.

Let’s view some Page Source!

Try viewing the page source of the home page google.com. Unfortunately, explaining everything here isn’t possible, you’ll need to look into website design/development courses to understand it fully. What we can do, is pick out bits of information that are of importance to us.

So what do you need to look for?

You’ll notice some code starting with these are comments. Comments are messages left by the website developer, usually to explain something in the code to other programmers or even notes/reminders for themselves. These comments don't get displayed on the actual webpage. This comment describes how the homepage is temporary while a new one is in development. These comments can be useful in certain cases.

Look at the following code

<!-- Username: admin Password:kasablanka1 -->

This innocent mistake, can cost website owners significantly. As naive as this sounds, This actually happens when web developers are inexperienced.

Secondly, look out for links to different pages in HTML. They are written in anchor tags ( these are HTML elements that start with <a ), and the link that you'll be directed to is stored in the href attribute. You may discover some private area used by the business for storing company/staff/customer information.

Sounds easy? Think again, These links might be your way to get your hands on sensitive files but some times, external files such as CSS, JavaScript and Images are access controlled.

This means, You might encounter configuration error. You’ll be displayed either a blank page or a 403 Forbidden page with an error stating you don’t have access to the directory. Unless, the directory listing feature has been enabled, which in fact, lists every file in the directory.

Sometimes this isn’t an issue, and all the files in the directory are safe to be viewed by the public, but in some instances, backup files, source code or other confidential information could be stored here.

Sounds like website developers need to undertake huge responsibility to write such complex looking code, right? Well, yes but no. Many websites these days aren’t made from scratch and 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.

This is a double edged sword, the source code is open-sourced. This means, it’s easier to find vulnerabilities for older frameworks. Even though, frameworks might be frequently updated, this doesn’t necessarily mean that the website is using the most up-to-date frameworks

Viewing the page source can often 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

Familiarizing yourself with DevTools

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 hacker, you can leverage these tools to provide us with a much better understanding of the web application. I highly recommend you watch Traversy Media’s video on DevTools to get a solid understanding on how they work.