Building on our understanding of how the web works and the HTTP protocol, we now turn to the actual content that servers send back: HTML and CSS. As a security professional, you don't need to become a front-end developer, but you absolutely must be able to read and understand HTML source code. Vulnerabilities like Cross-Site Scripting (XSS), HTML injection, and form manipulation all require you to understand how HTML works.
HTML (HyperText Markup Language) uses tags to structure content. Every HTML document follows a standard structure that the browser interprets to render the page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login Page</title>
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<h1>Welcome Back</h1>
<form action="/api/login" method="POST">
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<button type="submit">Log In</button>
</form>
<script src="/js/app.js"></script>
</body>
</html>When reviewing HTML for security purposes, certain elements deserve special attention:
| Element | Security Relevance |
|---|---|
| <form> | Defines where user input is submitted — check action URL and method |
| <input> | User input fields — look for hidden fields, validation attributes |
| <script> | JavaScript inclusion — check src for external domains, inline code for XSS |
| <iframe> | Embedded content — can be abused for clickjacking or phishing |
| <a> | Links — check href for javascript: URIs or open redirect vulnerabilities |
| <meta> | Metadata — may contain CSP policies or sensitive information |
| <object>/<embed> | Embedded objects — potential for plugin-based attacks |
Forms are the most common way users interact with web applications. Every form submission is a potential injection point. Let's examine a form with security-relevant features:
<form action="/api/transfer" method="POST">
<!-- CSRF token - security measure -->
<input type="hidden" name="csrf_token" value="a1b2c3d4e5">
<label for="amount">Transfer Amount:</label>
<input type="number" id="amount" name="amount"
min="0.01" max="10000" step="0.01" required>
<label for="to_account">To Account:</label>
<input type="text" id="to_account" name="to_account"
pattern="[0-9]{10}" required>
<button type="submit">Transfer Funds</button>
</form>Notice the hidden csrf_token field — this is a Cross-Site Request Forgery protection mechanism. Also note the client-side validation (min, max, pattern, required). As a security tester, remember that client-side validation is easily bypassed. Always test server-side validation independently using a proxy.
⚠️ Client-side validation (HTML attributes like required, pattern, min, max) is for user experience ONLY. An attacker can easily bypass these by sending crafted HTTP requests directly. Never rely on client-side validation for security.
CSS (Cascading Style Sheets) controls the visual presentation of HTML. While CSS might seem irrelevant to security, it has several important implications:
/* Example: CSS that hides a security-relevant element */
.admin-panel {
display: none; /* Hidden from view but still in the DOM */
}
/* Example: Clickjacking overlay technique */
.evil-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0; /* Invisible but clickable */
z-index: 9999;
}💡 To view a page's HTML source, right-click and select 'View Page Source' or press Ctrl+U. For the live DOM (which includes modifications made by JavaScript), use the browser's Developer Tools (F12) → Elements tab. The live DOM is what matters for security analysis.
The Document Object Model (DOM) is the browser's internal representation of the HTML document. JavaScript can read and modify the DOM, which means user input that gets written into the DOM can potentially execute malicious scripts. This is the foundation of DOM-based XSS.
// Dangerous: Writing user input directly into the DOM
const params = new URLSearchParams(window.location.search);
const name = params.get('name');
document.getElementById('greeting').innerHTML = 'Hello, ' + name;
// If URL is ?name=<script>alert('XSS')</script>, the script executes!Verify exercises to earn ★ 110 XP and unlock next lab level.