4. Master the Basics, Break the Web: Browser Fundamentals

1. DOM (Document Object Model)

The DOM is a structured, tree-like representation of everything in a webpage — HTML elements, attributes, and text. When a browser loads a page, it converts HTML into DOM nodes that JavaScript can read, modify, or remove. This makes web pages dynamic, allowing scripts to change content, styles, and user interactions in real time.

DOM

Pentest Relevance:

• DOM-based XSS happens when JavaScript directly processes user input without sanitization.
• Any DOM element that reflects or uses attacker-controlled data becomes a potential injection point.
• Inspecting DOM changes helps identify client-side logic flaws and hidden parameters.

💡Example: If JavaScript does: document.write(location.hash)and the URL is /#<script>alert(1)</script> → this triggers DOM XSS.

2. JavaScript basics

JavaScript is the browser’s scripting language that controls interactivity, dynamic content, and client-side logic on web pages. It can read and modify the DOM, send HTTP requests, validate input, and handle user actions like clicks or form submissions. Because it runs directly in the browser, anything written in JavaScript is fully visible and modifiable by users.

Pentest Relevance:

• Client-side validation can always be bypassed — server-side validation is what matters.
• Unsafe JavaScript handling of user input leads to DOM XSS and other client-side vulnerabilities.
• Reviewing JavaScript helps find hidden endpoints, API keys, client-side logic leaks, and insecure workflows.

💡Example:

var user = getParameter(“name”);
document.getElementById(“welcome”).innerHTML = user;

If user comes from attacker input, which can lead to DOM XSS.

3. DevTools: Network tab, Storage, Console

Browser DevTools are essential for understanding how a web application behaves, making them a core tool for pentesters. They allow you to inspect requests, analyze stored data, debug JavaScript, and identify hidden behavior directly from the browser.

Network Tab

Shows every HTTP request and response the page makes. You can see methods, headers, cookies, status codes, timing, and request/response bodies. Helps track API endpoints, hidden requests, redirects, and data sent in the background.

Pentest Relevance:

• Reveals API calls not visible in the UI.
• Useful for analyzing request tampering points and watching how sessions work.
• Helps identify sensitive data being leaked in responses.

💡Example: Inspecting the Network tab may expose /api/admin/users endpoints are not visible on the website.

Storage Tab

Displays client-side stored data: cookies, localStorage, sessionStorage, IndexedDB, cache, etc. Shows what information the application keeps in the browser and how persistent it is.

Pentest Relevance:

• Helps find stored JWTs, tokens, API keys, or PII.
• Useful for checking cookie security flags (HttpOnly, Secure, SameSite).
• Great for spotting insecure client-side storage practices.

💡Example: Finding authToken stored in localStorage → vulnerable to XSS token theft.

Console Tab

Shows runtime logs, errors, and allows executing JavaScript in the page context. Useful for debugging or interacting directly with DOM elements and variables.

Pentest Relevance:

• Can test DOM injection points directly from the console.
• Helps view JavaScript errors or warnings that may reveal sensitive info.
• Allows executing payloads or inspecting variables for client-side vulnerabilities.

💡Example: Typing document.cookie in the console exposes accessible cookies (unless HttpOnly).

4. Understanding how browsers cache pages

Browsers cache pages to improve performance by storing static resources (HTML, CSS, JS, images) locally so they don’t need to be downloaded every time. When revisiting a page, the browser checks its cache and may load files directly from local storage instead of requesting them from the server. Caching behavior is controlled by response headers like Cache-Control, ETag, and Expires.

Pentest Relevance:

• Sensitive data accidentally stored in cache can be retrieved by attackers on shared devices.
• Weak Cache-Control headers can expose private pages (dashboard, profile, transactions).
• Pentesters verify whether authenticated pages are cached — even though they shouldn’t be.

💡Example: If a bank dashboard responds with: Cache-Control: public The page might be stored locally, allowing other users on the same system to view cached sensitive information.

5. SOP (Same Origin Policy)

The Same Origin Policy (SOP) is a core browser security rule that prevents one website from accessing data from another unless they share the same protocol, domain, and port. It ensures that scripts on one page can’t freely interact with sensitive data on another page, protecting users from malicious cross-site access. SOP is the main defense against cross-site attacks like unauthorized data reads.

Pentest Relevance:

• Understanding SOP helps identify how attackers might bypass it using CORS misconfigurations, postMessage abuse, or sandbox escapes.
• Weak CORS settings can effectively disable SOP and expose private data.
• Testing focuses on whether the application incorrectly trusts cross-origin requests.

💡Example: A script running on https://evil.com cannot read responses from https://bank.com because SOP blocks cross-origin access—unless CORS is misconfigured to allow it.

6. CORS basics

CORS (Cross-Origin Resource Sharing) is a browser mechanism that controls which external websites are allowed to access a server’s resources. It works by checking the Origin of a request and applying rules defined in response headers like Access-Control-Allow-Origin. CORS exists to safely relax the Same Origin Policy when needed — such as for APIs, CDNs, and frontend-backend integrations.

Pentest Relevance:

• Misconfigured CORS can allow attackers on another domain to read sensitive API responses.
• Setting Access-Control-Allow-Origin: * on sensitive endpoints is a major security risk.
• Pentesters check how the server handles pre-flight requests and whether credentials are incorrectly allowed.

💡Example: If an API responds with:Access-Control-Allow-Origin: https://evil.com and also allows credentials, the attacker can steal user data via cross-site requests.

Wrapping up here — next up: Authentication & Authorization Basics

Catch you soon 🙌,
Abinesh