This is my notes from the Junior Pentesting course at TryHackMe. This course takes you through the basics and some advanced topics regarding penetration testing.

---

Introduction

• View Source – Use your browser to view the human-readable source code of a website.
• Inspector – Learn how to inspect page elements and make changes to view usually blocked content.
• Debugger – Inspect and control the flow of a page’s JavaScript
• Network – See all the network requests a page makes.

Exploring The Website

An excellent place to start is just with your browser exploring the website and noting down the individual pages/areas/features with a summary for each one.

An example site review for the Acme IT Support website would look something like this:

Feature	URL	Summary
Home Page	/	This page contains a summary of what Acme IT Support does 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.
Contact Page	/contact	This page contains a form for customers to contact the company. It contains name, email and message input fields and a send button.
Customers	/customers	This link redirects to /customers/login.
Customer Login	/customers/login	This page contains a login form with username and password fields.
Customer Signup	/customers/signup	This page contains a user-signup form that consists of a username, email, password and password confirmation input fields.
Customer Reset Password	/customers/reset	Password reset form with an email address input field.
Customer Dashboard	/customers	This page contains a list of the user’s tickets submitted to the IT support company and a “Create Ticket” button.
Create Ticket	/customers/ticket/new	This page contains a form with a textbox for entering the IT issue and a file upload option to create an IT support ticket.
Customer Account	/customers/account	This page allows the user to edit their username, email and password.
Customer Logout	/customers/logout	This link logs the user out of the customer area.

Viewing the Page Source

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.

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.

Let’s view some Page Source!

Code starting with <!– and ending with –> 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. View the webpage in the comment to get your first flag.

Links to different pages in HTML 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.

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.

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, and the website might not be using the most up to date version. 

Developer Tools – Inspector

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 pentester, we can leverage these tools to provide us with a much better understanding of the web application.

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.

As well as viewing this live view, we can also edit and interact with the page elements, which is helpful for web developers to debug issues.

Developer Tools – Debugger

Developer Tools – Debugger

This panel in the developer tools is intended for debugging JavaScript, and again 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.

We can return some of the formattings by using the “Pretty Print” option, which looks like two braces { } to make it a little more readable, although due to the obfustication, it’s still difficult to comprehend what is going on with the file. If you scroll to the bottom of the flash.min.js file, you’ll see the line: flash[‘remove’]();

This little bit of JavaScript is what is removing the red popup from the page. We can utilise another feature of debugger called breakpoints. These are points in the code that we can force the browser to stop processing the JavaScript and pause the current execution.

Developer Tools – Network

Developer Tools – 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. 

With the network tab open, try filling in the contact form and pressing the Send Message button. You’ll notice an event in the network tab, and this is the form being submitted in the background using a method called AJAX. AJAX is a method for sending and receiving network data in a web application background without interfering by changing the current web page.