This room teaches how to manually test a web application for security vulnerabilities using only the built-in tools available in a web browser. Manual testing is important because automated tools and scripts can miss hidden vulnerabilities and valuable information.

The room covers four main browser tools:

• View Source — Allows you to see the website’s human-readable HTML source code.
• Inspector — Helps inspect and modify webpage elements to access hidden or restricted content.
• Debugger — Used to analyze and control the execution of JavaScript on a webpage.
• Network — Displays all network requests made by the website, helping identify data transfers and backend interactions.

Task2 -exploiting the website

As a penetration tester, the main goal when reviewing a website or web application is to identify interactive features that could contain security vulnerabilities and test whether they can be exploited. These interactive areas may include login forms, signup pages, file uploads, password reset functions, dashboards, and other user-input sections.

A good starting point for web application testing is manually exploring the website using a browser and documenting each discovered page, feature, and its functionality. Reviewing JavaScript files and application behavior can also help uncover hidden or sensitive functionality.

The example review of the Acme IT Support website demonstrates how testers document application components, including:

• Home page and news sections
• News articles with URL parameters (id=1)
• Contact forms
• Customer login, signup, and password reset pages
• User dashboard and account management
• Ticket creation forms with file upload functionality
• Logout functionality

This structured mapping of website features helps penetration testers understand the application’s attack surface and prepares them for deeper security analysis in later stages.

Task3-viewing the page source

Page Source refers to the human-readable code returned by a web server to the browser whenever a webpage is loaded. This code mainly consists of:

• HTML — Defines the structure and content of the webpage.
• CSS — Controls the styling and appearance of the webpage.
• JavaScript — Adds interactivity and dynamic behavior.

Viewing the page source is an important skill in web application security testing because it can reveal hidden information that is not directly visible on the webpage.

Ways to view page source include:

• Right-clicking a webpage and selecting View Page Source
• Adding view-source: before a URL
• Using browser developer tools or menu options

The lesson highlights several important findings that can be discovered through source code analysis:

• Developer Comments:
  HTML comments (<!-- -->) may contain notes, reminders, hidden URLs, or sensitive information left by developers.
• Hidden Links:
  Anchor tags (<a>) and their href attributes can reveal pages or directories not visible in the website navigation.
• Directory Listing Misconfiguration:
  Sometimes web servers allow directory browsing, exposing files such as backups, configuration files, source code, or confidential documents.
• Framework Identification:
  Page source can reveal which web framework and version a website is using. Outdated frameworks may contain publicly known vulnerabilities that attackers can exploit.

Overall, reviewing page source helps penetration testers gather valuable information about the website structure, hidden content, technologies in use, and potential security weaknesses.

1. What is the flag from the HTML comment?

according to the hint which is given to us we should go the link which is specified in the source code of the main page

main page:

in the above code first line is eye catching telling us to go to the /new-home-beta page

then we go to the http://mechine-ip/new-home-beta

we will get first flag

THM{HTML_COMMENTS_ARE_DANGEROUS}

2. What is the flag from the secret link?

from the source code of the main page we can see

after opening that link we will find the flag

THM{NOT_A_SECRET_ANYMORE}

3. What is the directory listing flag?

for the third question we should Try to access the URL where all of the static files (CSS, JS and Images) are stored.

THM{INVALID_DIRECTORY_PERMISSIONS}

4. What is the framework flag?

the hint you’re looking for: https://LAB_WEB_URL.p.thmlabs.com/<file.zip> — Find the file on the framework changelog page

go to the page /tmp.zip

task4 -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. We’re specifically focusing on three features of the developer tool kit, Inspector, Debugger and Network.

Opening Developer Tools

The way to access developer tools is different for every browser. If you’re not sure how to access it, click the “View Site” button on the top right of this task to get instructions to how to access the tools for your browser.

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.

On the Acme IT Support website, click into the news section, where you’ll see three news articles.

The first two articles are readable, but the third has been blocked with a floating notice above the content stating you have to be a premium customer to view the article. These floating boxes blocking the page contents are often referred to as paywalls as they put up a metaphorical wall in front of the content you wish to see until you pay.

Right-clicking on the premium notice ( paywall ), you should be able to select the Inspect option from the menu, which opens the developer tools either on the bottom or right-hand side depending on your browser or preferences. You’ll now see the elements/HTML that make up the website ( similar to the screenshots below ).

Locate the DIV element with the class premium-customer-blocker and click on it. You'll see all the CSS styles in the styles box that apply to this element, such as margin-top: 60px and text-align: center. The style we're interested in is the display: block. If you click on the word block, you can type a value of your own choice. Try typing none, and this will make the box disappear, revealing the content underneath it and a flag. If the element didn't have a display field, you could click below the last style and add in your own. Have a play with the element inspector, and you'll see you can change any of the information on the website, including the content. Remember this is only edited on your browser window, and when you press refresh, everything will be back to normal.

5)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.

On the Acme IT Support website, click on the contact page, each time the page is loaded, you might notice a rapid flash of red on the screen. We’re going to use the Debugger to work out what this red flash is and if it contains anything interesting. Debugging a red dot wouldn’t be something you’d do in the real world as a penetration tester, but it does allow us to use this feature and get used to the Debugger.

In both browsers, on the left-hand side, you see a list of all the resources the current webpage is using. If you click into the assets folder, you’ll see a file named flash.min.js. Clicking on this file displays the contents of the JavaScript file.

Many times when viewing javascript files, you’ll notice that everything is on one line, which is because it has been minimised, which means all formatting ( tabs, spacing and newlines ) have been removed to make the file smaller. This file is no exception to this, and it has also been obfusticated, which makes it purposely difficult to read, so it can’t be copied as easily by other developers.

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.

If you click the line number that contains the above code, you’ll notice it turns blue; you’ve now inserted a breakpoint on this line. Now try refreshing the page, and you’ll notice the red box stays on the page instead of disappearing, and it contains a flag.

task5 -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.

Try doing this on the contact page; you can press the trash can icon to delete the list if it gets a bit overpopulated.

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.

Examine the new entry on the network tab that the contact form created and view the page the data was sent to in order to reveal a flag.

What is the flag shown on the contact-msg network request?

This is the hint you’re looking for: When you find the contact-msg request, make sure you click on it to reveal the response of the request (there might be a response tab shown when you click it).

THM{GOT_AJAX_FLAG}

Conclusion

The Walking an Application room from TryHackMe provides a practical introduction to manual web application security testing using only the tools available inside a web browser. Throughout the room, we explored how penetration testers analyze websites by inspecting page source code, interacting with webpage elements through Developer Tools, debugging JavaScript, and monitoring network requests.

The room demonstrated how small mistakes such as exposed HTML comments, hidden links, insecure directory permissions, and weak client-side protections can reveal sensitive information to attackers. It also showed the importance of understanding how modern web applications function internally, especially how browsers process HTML, CSS, JavaScript, and AJAX requests.

By manually exploring the Acme IT Support website, we learned how to map application functionality, identify potential attack surfaces, and uncover hidden content without relying on automated tools. This highlights an important principle in web security testing: manual analysis often reveals issues that automated scanners may overlook.

Overall, this room serves as an excellent foundation for beginners entering the field of web application penetration testing and helps build essential skills required for deeper security analysis in future labs and real-world assessments.