Cross-Site Scripting (XSS) and How to Prevent It

import DOMPurify from 'dompurify';

Understanding Cross-Site Scripting (XSS) and How to Prevent It

Imagine this: You visit a website, browse a comment section, and suddenly, your cookies are stolen, your session is hijacked, and your account is compromised—all because of a tiny hidden piece of code executing in your browser. Welcome to the world of Cross-Site Scripting (XSS), a web security vulnerability that has plagued websites for decades, affecting everything from social media to online banking.

But what exactly is XSS? How does it work? And most importantly, how can you prevent it? By the end of this blog, you'll not only understand XSS but also learn how to secure your web applications against it.

What is Cross-Site Scripting (XSS)?

XSS is a type of attack where malicious scripts are injected into web pages and executed in the browsers of unsuspecting users. There are three main types of XSS attacks:

1. Stored XSS – The malicious script is permanently stored in a database and executed whenever the affected page loads.
2. Reflected XSS – The script is injected into a URL and runs when a user clicks the link.
3. DOM-based XSS – The script executes by manipulating the page dynamically using JavaScript, without ever touching the server.

Let's explore each type with real-world examples and solutions.

1. Stored XSS

How It Works:

A classic example of stored XSS is a vulnerable comment section. If the website does not sanitize user input properly, an attacker can insert malicious JavaScript into a comment, which gets saved in the database. When another user views the comment, the script executes in their browser, potentially stealing cookies, logging keystrokes, or redirecting them to a phishing site.

Real-World Example:

A hacker named Samy Kamkar created an XSS worm that added one million fake followers to his MySpace account. Every time someone viewed his profile, the worm spread to their profile. MySpace was forced to shut down for hours to fix the issue.

How to Prevent Stored XSS:

• Escape HTML characters to prevent script execution.
• Sanitize input using security libraries like DOMPurify (JavaScript) or htmlspecialchars() (PHP).

const cleanInput = DOMPurify.sanitize(userInput);
document.getElementById('output').innerHTML = cleanInput;

2. Reflected XSS

How It Works:

Reflected XSS occurs when an attacker tricks a user into clicking a malicious link containing a script. When the server reflects the script in its response, the browser executes it.

Real-World Example:

In 2019, a security researcher found a reflected XSS vulnerability on PayPal’s login page. Attackers could steal session tokens and log into users' accounts. PayPal patched the issue and awarded a $115,000 bug bounty.

How to Prevent Reflected XSS:

• Validate and sanitize all user inputs before displaying them.
• Use Content Security Policy (CSP) headers to block inline scripts.

$search = htmlspecialchars($_GET['search'], ENT_QUOTES, 'UTF-8');
echo "Results for: " . $search;

Header set Content-Security-Policy "default-src 'self'; script-src 'self'"

3. DOM-Based XSS

How It Works:

DOM-based XSS occurs when JavaScript dynamically processes malicious input and modifies the page’s DOM, executing the script in the user's browser without any interaction with the server.

Real-World Example:

In 2021, a security researcher found a DOM-based XSS vulnerability in Google Docs. By modifying a document's URL, they could execute JavaScript inside a user’s session. Google patched the issue to prevent future attacks.

How to Prevent DOM-Based XSS:

• Use textContent instead of innerHTML to prevent script execution.
• Use secure JavaScript methods like createTextNode() to ensure text is treated as plain text.
• Sanitize input using DOMPurify.

const userInput = "<script>alert('XSS');</script>";
const safeText = document.createTextNode(userInput);
document.getElementById('output').appendChild(safeText);

Conclusion

XSS attacks are a serious threat to web applications, but they can be mitigated with proper security measures:

• Escape and sanitize user inputs to prevent script injection.
• Use secure methods like textContent instead of innerHTML.
• Implement Content Security Policy (CSP) headers to block inline scripts.
• Utilize libraries like DOMPurify to clean user-generated content.

By applying these practices, you can protect your applications from XSS vulnerabilities and ensure a safer browsing experience for your users.

Stay tuned for our next post, where we’ll dive into SQL Injection, another powerful and dangerous web attack!

Stay curious, stay secure!