Security Showcase: Demonstrating XSS Prevention in the Browser

My Security Showcase project is a frontend-only demonstration of common DOM-based Cross-Site Scripting (XSS) attacks and the layered defenses that prevent them. It's designed as an educational tool for students learning web security.

What It Demonstrates

The app has two modes:

• Vulnerable Mode, Shows how unsafe DOM manipulation (like using innerHTML with user input) creates XSS vulnerabilities.
• Protected Mode, Demonstrates the same functionality with proper defenses in place, showing that security doesn't have to break usability.

Defense Layers Implemented

1. Safe DOM Rendering

Replacing innerHTML with textContent for user-provided strings eliminates the most common XSS vector:

// Vulnerable
element.innerHTML = userInput;

// Safe
element.textContent = userInput;

2. Input Sanitization

When HTML rendering is necessary (e.g., a rich text preview), the input is passed through a sanitization function that strips script tags, event handlers, and dangerous attributes.

3. Content Security Policy (CSP)

The app sets a strict CSP via a meta tag that blocks inline scripts and restricts script sources:

<meta http-equiv="Content-Security-Policy"
      content="default-src 'self'; script-src 'self'">

4. Visual Feedback

When an XSS attempt is detected and blocked, the UI shows a red alert banner explaining what happened and why it was stopped. This makes the demo educational rather than just functional.

Why I Built It

Most XSS tutorials only explain the theory. I wanted to build something where you can actually try an attack, see it work in vulnerable mode, then switch to protected mode and see the same attack fail. Learning by doing is far more effective.

What I Learned

This project forced me to truly understand how browsers parse and execute scripts, how the DOM works at a low level, and how each defense layer contributes to overall security. It's one of the most educational projects I've done.