Cross-Site Scripting (XSS) Vulnerability Demo

XSS Demonstration

Reflected XSS

Reflected XSS occurs when a malicious script is reflected off the web server, such as in an error message, search result, or any other response that includes some or all of the input sent to the server as part of the request.

Search for Products:

Try These Payloads:

<script>alert('XSS')</script>
<img src="x" onerror="alert('XSS')">
<svg onload="alert('XSS')">
<body onload="alert('XSS')">
<div onmouseover="alert('XSS')">"Hover over me"<divx>

Stored XSS

Stored XSS occurs when a malicious script is injected directly into a vulnerable web application. The malicious script is stored permanently on the target servers and is executed when other users access the compromised page.

Comments:

Try These Payloads:

<script>alert('Stored XSS')</script>
<img src="x" onerror="alert(document.cookie)">
<a href="javascript:alert('XSS')">Click me</a>

DOM-based XSS

DOM-based XSS occurs when a client-side script writes user-controllable data to the document object model (DOM) in an unsafe way. The vulnerability is in the client-side code rather than the server-side code.

Your Name:

User Profile

Your account was created on: March 15, 2025

Membership level: Silver

Try These Payloads:

<script>alert('DOM XSS')</script>
<img src="x" onerror="alert(document.domain)">
<iframe src="javascript:alert('XSS')"></iframe>

How to Prevent XSS Attacks

1. Output Encoding

Always encode user-generated content when outputting to HTML, URLs, JavaScript, CSS, or any other context:

// In PHP:
echo htmlspecialchars($userInput, ENT_QUOTES, 'UTF-8');

// In JavaScript:
const textNode = document.createTextNode(userInput);
element.appendChild(textNode);

// Or in React (automatic encoding):
return <div>{userInput}</div>

2. Content Security Policy (CSP)

Implement a Content Security Policy to restrict what scripts can run on your page:

// Add this HTTP header
Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted-cdn.com;

3. Input Validation

Validate user input against a whitelist of allowed values:

// In PHP:
function isValidUsername($username) {
    return preg_match('/^[a-zA-Z0-9_]{3,16}$/', $username);
}

// In JavaScript:
function isValidEmail(email) {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return emailRegex.test(email);
}

4. Use Secure Frameworks and Libraries

Modern frameworks like React, Angular, and Vue automatically escape values by default.

5. X-XSS-Protection Header

Enable the browser's built-in XSS filter:

// Add this HTTP header
X-XSS-Protection: 1; mode=block

6. HttpOnly and Secure Cookies

Protect cookies from being accessed by client-side scripts:

// In PHP:
setcookie('session_id', $sessionId, [
    'expires' => time() + 3600,
    'path' => '/',
    'domain' => 'example.com',
    'secure' => true,
    'httponly' => true,
    'samesite' => 'Strict'
]);

7. Use DOMPurify for HTML Sanitization

If you need to allow some HTML, use a library like DOMPurify:

// In JavaScript:
const clean = DOMPurify.sanitize(userProvidedHtml);
element.innerHTML = clean;