## https://sploitus.com/exploit?id=B4CF343E-2654-5697-A168-475567C3A784
# XSS Educational Learning Lab 🛡️
An interactive, educational web application built with **Node.js, Express, HTML, CSS, and Vanilla JavaScript**, intentionally demonstrating the three primary categories of **Cross-Site Scripting (XSS)** vulnerabilities and their respective defensive mitigations.
> ⚠️ **IMPORTANT NOTICE:** This application is strictly for **educational and local testing purposes only**. The server is hardcoded to listen exclusively on `127.0.0.1` (localhost) to prevent external network access.
---
## 📋 Features
- **5 Interactive Pages / Views:**
1. **Home:** Lab dashboard, environment status, and quick links.
2. **Login:** Simulated authentication flow.
3. **Search Page:** Demonstration of **Reflected XSS**.
4. **Comment Page:** Demonstration of **Stored XSS**.
5. **Profile Page:** Demonstration of **DOM-Based XSS**.
- **Real-Time `SAFE_MODE` Toggle:** Toggle between `VULNERABLE (SAFE_MODE = false)` and `SECURE (SAFE_MODE = true)` mode instantly via UI switch or API endpoint.
- **Side-by-Side Code Analysis:** Visual code cards comparing vulnerable code snippets against secure implementations.
- **Comprehensive Mitigations:** Demonstrates output entity encoding, safe DOM APIs (`textContent`), input validation, and **Content Security Policy (CSP)** header enforcement.
---
## 🚀 Installation & Local Execution
### Prerequisites
- [Node.js](https://nodejs.org/) (v16+ recommended)
- [Burp Suite Community Edition](https://portswigger.net/burp/communitydownload) (optional, for HTTP traffic interception & analysis)
### Quick Start Commands
1. **Navigate to the workspace directory:**
```bash
cd k:\xsslearninglab
```
2. **Install dependencies:**
```bash
npm install
```
3. **Start the application:**
```bash
npm start
```
4. **Access the application:**
Open your browser and navigate to:
[http://127.0.0.1:3000](http://127.0.0.1:3000)
---
## 🔍 Vulnerability Locations & Mechanics
| Vulnerability Type | Page | File & Location | Unsafe Sink / Flaw | Defensive Mitigation |
| :--- | :--- | :--- | :--- | :--- |
| **Reflected XSS** | Search Page | `server.js` (`GET /search`) | Injects raw `req.query.q` directly into server-side HTML response string | HTML entity encoding (`escapeHTML()`) + Content Security Policy (`script-src 'self'`) |
| **Stored XSS** | Comment Page | `server.js` (`POST /api/comments`) & `public/js/app.js` (`loadComments()`) | Stores raw user comment string; client renders comments via `innerHTML` | HTML entity encoding on backend + safe DOM building (`textContent`) on client |
| **DOM-Based XSS** | Profile Page | `public/js/app.js` (`renderDomProfile()`) | Source: `window.location.hash`Sink: `profileNameDisplay.innerHTML` | Safe DOM sink `profileNameDisplay.textContent` which treats input strictly as raw text |
---
## 🧪 How to Test Each Vulnerability (with Burp Suite)
### Setting Up Burp Suite:
1. Launch **Burp Suite** and navigate to the **Proxy** tab -> **Proxy Settings**.
2. Set browser proxy to `127.0.0.1:8080` (or use Burp's embedded browser).
3. Ensure `Interception is on` in Burp Proxy.
---
### 1. Testing Reflected XSS (Search Page)
#### Vulnerable Mode (`SAFE_MODE = false`):
1. In the application header, ensure security toggle is set to **VULNERABLE**.
2. Navigate to **Search (Reflected XSS)** tab.
3. In the search box, enter test input:
```html
alert('Reflected XSS')
```
4. Click **Search**.
5. **Burp Suite Analysis:**
- Intercept or inspect the HTTP GET request in Burp Proxy/HTTP History:
```http
GET /search?q=%3Cscript%3Ealert%28%27Reflected+XSS%27%29%3C%2Fscript%3E HTTP/1.1
Host: 127.0.0.1:3000
```
- Inspect the HTTP Response in Burp:
```html
HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
You searched for: alert('Reflected XSS')
```
- Notice that raw HTML tags are returned unencoded, allowing immediate script execution in the browser.
#### Secure Mode (`SAFE_MODE = true`):
1. Flip the toggle to **SECURE**.
2. Resubmit the search query.
3. Inspect HTTP Response in Burp Suite:
```html
HTTP/1.1 200 OK
Content-Security-Policy: default-src 'self'; script-src 'self'; ...
You searched for: <script>alert('Reflected XSS')</script>
```
- **Result:** Special characters ` ' "` are replaced with safe HTML entities (`<`, `>`), rendering payload as plain text. The CSP header also blocks execution of inline scripts.
---
### 2. Testing Stored XSS (Comment Page)
#### Vulnerable Mode (`SAFE_MODE = false`):
1. Ensure toggle is **VULNERABLE**.
2. Navigate to **Comments (Stored XSS)** tab.
3. Submit a new comment with:
- **Author:** `Attacker`
- **Comment:** ``
4. **Burp Suite Analysis:**
- Intercept the `POST /api/comments` request:
```json
POST /api/comments HTTP/1.1
Content-Type: application/json
{"author":"Attacker","text":""}
```
- Server responds with `{"success": true}` and saves payload to memory.
- Any client loading `GET /api/comments` receives the payload in JSON, and `app.js` sets `card.innerHTML = ...`, firing the `onerror` event handler.
#### Secure Mode (`SAFE_MODE = true`):
1. Toggle to **SECURE**.
2. Post a comment or refresh comments.
3. `server.js` encodes stored text, and `app.js` uses `element.textContent = c.text`.
4. **Result:** The image tag is rendered visually as plain text ``, and no event handler is executed.
---
### 3. Testing DOM-Based XSS (Profile Page)
#### Vulnerable Mode (`SAFE_MODE = false`):
1. Ensure toggle is **VULNERABLE**.
2. Navigate to **Profile (DOM XSS)** tab.
3. Paste the following URL into your browser address bar:
```text
http://127.0.0.1:3000/#profile?name=
```
4. Or click the **"Trigger Payload via URL Hash"** button on the Profile page.
5. **Mechanics Analysis:**
- Source: `window.location.hash` reads `name=`.
- Sink: `document.getElementById('profileNameDisplay').innerHTML = targetName`.
- The browser parses the HTML fragment injected via JS and executes the `onerror` handler.
#### Secure Mode (`SAFE_MODE = true`):
1. Toggle to **SECURE**.
2. Re-trigger the URL hash payload.
3. **Mechanics Analysis:**
- Sink: `document.getElementById('profileNameDisplay').textContent = targetName`.
- `textContent` treats all input strictly as character data rather than executable HTML nodes.
---
## 🛡️ How Secure Mode Prevents Vulnerabilities
1. **Context-Aware Output Encoding (`escapeHTML`):**
Converts dangerous characters into entity equivalents:
- `` → `>`
- `"` → `"`
- `'` → `'`
- `&` → `&`
2. **Safe Client-Side DOM Sinks (`textContent` vs `innerHTML`):**
Using `textContent` or `document.createTextNode()` instructs the browser DOM engine to handle data strictly as plain text, eliminating client-side DOM parsing sinks.
3. **Content Security Policy (CSP) Headers:**
```http
Content-Security-Policy: default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;
```
- Restricts executable scripts to same-origin JS files served from the web server (`'self'`).
- Disallows inline `` tags and inline event handlers (`onerror=`, `onload=`, `javascript:` URLs).
---
## 📁 Directory Architecture
```text
xsslearninglab/
├── package.json # Node.js dependencies & scripts
├── server.js # Express backend, route handlers, SAFE_MODE logic & CSP
├── README.md # Lab guide and vulnerability breakdown
└── public/
├── index.html # Single-page interface & vulnerability tabs
├── css/
│ └── style.css # Dark glassmorphic theme styling
└── js/
└── app.js # Dynamic routing, safe vs unsafe DOM handlers & state management
```
---
## 📜 License & Usage Disclaimer
This software is provided purely for educational, academic, and security awareness research. Do not use techniques demonstrated here against unauthorized targets or public systems.