diff --git a/data/quests.json b/data/quests.json
index 53c388e..844489e 100644
--- a/data/quests.json
+++ b/data/quests.json
@@ -995,6 +995,31 @@
       ],
       "difficulty": "Hard",
       "status": "live"
+    },
+    {
+      "id": "xss-defender",
+      "name": "XSS Defender",
+      "shortDescription": "Interactive web security quest game teaching Cross-Site Scripting (XSS) prevention, HTML sanitization, and Content Security Policy (CSP) headers.",
+      "longDescription": "## XSS Defender\n\nAn interactive web security quest game that teaches Cross-Site Scripting (XSS) prevention, HTML sanitizer policies (DOMPurify / HTML Sanitizer API), and Content Security Policy (CSP) directive configurations.\n\n### Features\n\n- Interactive XSS Attack Simulator: Live rendering of attack payloads in an isolated preview sandbox\n- Progressive Security Levels: Level-based scenarios covering Reflected XSS entity encoding, DOM sanitization policies, CSP headers, and event handler attribute injections\n- Real-Time Vulnerability Analyzer: Live feedback indicating whether script execution was blocked or succeeded\n- Web Audio Synthesizer SFX: Audio feedback for firewall alerts, sanitization shield activations, and level completion fanfares\n- Built-In Web Security Manual: Cheatsheet covering XSS prevention guidelines and CSP directive syntax",
+      "category": "js-fundamentals",
+      "tags": [
+        "csp",
+        "dompurify",
+        "game",
+        "quest",
+        "sanitizer",
+        "security",
+        "web-security",
+        "xss"
+      ],
+      "techStack": [
+        "CSS3",
+        "HTML5",
+        "Vanilla JS",
+        "Web Audio API"
+      ],
+      "difficulty": "Medium",
+      "status": "live"
     }
   ]
 }
diff --git a/quests/xss-defender.html b/quests/xss-defender.html
new file mode 100644
index 0000000..69089f4
--- /dev/null
+++ b/quests/xss-defender.html
@@ -0,0 +1,539 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Interactive web security quest game teaching Cross-Site Scripting (XSS) prevention, HTML sanitization, and Content Security Policy (CSP) headers." />
+    <title>XSS Defender — One File Tools Quest</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet" />
+    <script>
+      (() => {
+        try {
+          const saved = localStorage.getItem("xss-defender-theme");
+          document.documentElement.dataset.theme = saved || (matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
+        } catch {
+          document.documentElement.dataset.theme = matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+        }
+      })();
+    </script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+      :root {
+        color-scheme: dark;
+        --bg: #090d16;
+        --surface: #131b2e;
+        --surface-2: #1e293b;
+        --text: #f8fafc;
+        --muted: #94a3b8;
+        --border: #1e293b;
+        --border-strong: #334155;
+        --accent: #10b981;
+        --danger: #ef4444;
+        --warning: #f59e0b;
+        --neon-cyan: #38bdf8;
+        --radius: 14px;
+        --radius-sm: 8px;
+        --font-sans: "Outfit", ui-sans-serif, system-ui, sans-serif;
+        --font-mono: "JetBrains Mono", monospace;
+      }
+      html[data-theme="light"] {
+        color-scheme: light;
+        --bg: #f8fafc;
+        --surface: #ffffff;
+        --surface-2: #f1f5f9;
+        --text: #0f172a;
+        --muted: #64748b;
+        --border: #e2e8f0;
+        --border-strong: #cbd5e1;
+        --accent: #059669;
+        --danger: #dc2626;
+      }
+      body {
+        margin: 0;
+        min-height: 100vh;
+        background: var(--bg);
+        color: var(--text);
+        font-family: var(--font-sans);
+        line-height: 1.5;
+        display: flex;
+        flex-direction: column;
+        user-select: none;
+      }
+      header {
+        border-bottom: 1px solid var(--border-strong);
+        background: var(--surface);
+        padding: 0.85rem 1.5rem;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 1rem;
+      }
+      .brand {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+      }
+      .brand-icon {
+        width: 40px;
+        height: 40px;
+        background: linear-gradient(135deg, #10b981, #38bdf8);
+        color: #000;
+        border-radius: var(--radius-sm);
+        display: grid;
+        place-items: center;
+        font-weight: 800;
+        font-size: 1.3rem;
+        box-shadow: 0 0 15px rgba(16, 185, 129, 0.4);
+      }
+      h1 {
+        margin: 0;
+        font-size: 1.25rem;
+        font-weight: 800;
+      }
+      .header-actions {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+      }
+      button {
+        font-family: inherit;
+        font-size: 0.85rem;
+        font-weight: 600;
+        padding: 0.55rem 0.95rem;
+        border-radius: var(--radius-sm);
+        border: 1px solid var(--border-strong);
+        background: var(--surface-2);
+        color: var(--text);
+        cursor: pointer;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.4rem;
+        transition: all 0.18s ease;
+      }
+      button:hover {
+        background: var(--border-strong);
+        transform: translateY(-1px);
+      }
+      button.primary {
+        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+        color: #ffffff;
+        border-color: #10b981;
+        box-shadow: 0 0 15px rgba(16, 185, 129, 0.35);
+      }
+
+      .app-container {
+        flex: 1;
+        max-width: 1340px;
+        width: 100%;
+        margin: 0 auto;
+        padding: 1.25rem;
+        display: flex;
+        flex-direction: column;
+        gap: 1.25rem;
+      }
+
+      /* Firewall HUD Bar */
+      .hud-bar {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        flex-wrap: wrap;
+        gap: 1rem;
+        background: var(--surface);
+        padding: 0.85rem 1.25rem;
+        border-radius: var(--radius);
+        border: 1px solid var(--border-strong);
+      }
+      .hud-stat {
+        display: flex;
+        flex-direction: column;
+        gap: 0.2rem;
+      }
+      .hud-label {
+        font-size: 0.7rem;
+        font-weight: 700;
+        color: var(--muted);
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+      }
+      .hud-value {
+        font-family: var(--font-mono);
+        font-size: 1rem;
+        font-weight: 700;
+        color: var(--accent);
+      }
+
+      /* Game Split Layout */
+      .game-grid {
+        display: grid;
+        grid-template-columns: 1fr;
+        gap: 1.25rem;
+      }
+      @media (min-width: 900px) {
+        .game-grid {
+          grid-template-columns: 1fr 480px;
+        }
+      }
+
+      .card {
+        background: var(--surface);
+        border: 1px solid var(--border-strong);
+        border-radius: var(--radius);
+        padding: 1.25rem;
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+      }
+
+      .payload-box {
+        background: var(--bg);
+        border: 1px solid var(--danger);
+        border-radius: var(--radius-sm);
+        padding: 1rem;
+        font-family: var(--font-mono);
+        font-size: 0.85rem;
+        color: var(--danger);
+        white-space: pre-wrap;
+      }
+
+      .choice-option {
+        background: var(--bg);
+        border: 1px solid var(--border-strong);
+        border-radius: var(--radius-sm);
+        padding: 0.85rem 1rem;
+        font-family: var(--font-mono);
+        font-size: 0.85rem;
+        cursor: pointer;
+        transition: all 0.18s ease;
+        display: flex;
+        align-items: center;
+        gap: 0.6rem;
+      }
+      .choice-option:hover {
+        border-color: var(--neon-cyan);
+        background: var(--surface-2);
+      }
+      .choice-option.selected {
+        border-color: var(--accent);
+        background: rgba(16, 185, 129, 0.15);
+      }
+
+      /* Sandbox Preview */
+      .sandbox-stage {
+        background: var(--bg);
+        border: 1px solid var(--border-strong);
+        border-radius: var(--radius-sm);
+        padding: 1rem;
+        min-height: 240px;
+        display: flex;
+        flex-direction: column;
+        gap: 0.85rem;
+      }
+      .sandbox-output {
+        font-family: var(--font-mono);
+        font-size: 0.85rem;
+        padding: 0.85rem;
+        border-radius: var(--radius-sm);
+        background: var(--surface);
+        border: 1px solid var(--border-strong);
+        word-break: break-all;
+      }
+
+      .modal-backdrop {
+        position: fixed;
+        inset: 0;
+        background: rgba(9, 13, 22, 0.85);
+        backdrop-filter: blur(6px);
+        display: grid;
+        place-items: center;
+        z-index: 100;
+        padding: 1.5rem;
+      }
+      .modal-box {
+        background: var(--surface);
+        border: 2px solid var(--accent);
+        border-radius: var(--radius);
+        padding: 2rem;
+        max-width: 500px;
+        width: 100%;
+        text-align: center;
+        box-shadow: 0 0 30px rgba(16, 185, 129, 0.4);
+        display: flex;
+        flex-direction: column;
+        gap: 1.25rem;
+      }
+    </style>
+  </head>
+  <body>
+    <header>
+      <div class="brand">
+        <div class="brand-icon" aria-hidden="true">🛡️</div>
+        <div>
+          <h1>XSS Defender Studio</h1>
+        </div>
+      </div>
+      <div class="header-actions">
+        <button id="soundToggle" aria-label="Toggle Sound Effects">🔊 Sound ON</button>
+        <button id="themeToggle" aria-label="Toggle Theme"><span id="themeIcon">☀️</span></button>
+        <a href="https://github.com/praveenscience/One-File-Tools" target="_blank" rel="noopener" style="text-decoration: none">
+          <button type="button">GitHub</button>
+        </a>
+      </div>
+    </header>
+
+    <main class="app-container">
+      <!-- Firewall HUD Bar -->
+      <section class="hud-bar">
+        <div class="hud-stat">
+          <span class="hud-label">FIREWALL SHIELD</span>
+          <span id="shieldText" class="hud-value">🛡️ 100% SECURE</span>
+        </div>
+        <div class="hud-stat">
+          <span class="hud-label">SECURITY THREAT</span>
+          <span id="threatText" class="hud-value" style="color: var(--danger)">⚠️ Reflected XSS Vector</span>
+        </div>
+        <div class="hud-stat">
+          <span class="hud-label">CURRENT LEVEL</span>
+          <span id="levelText" class="hud-value" style="color: var(--neon-cyan)">LEVEL 1 / 4</span>
+        </div>
+      </section>
+
+      <!-- Main Game Grid Split -->
+      <div class="game-grid">
+        <!-- Left: Code Inspector & Patch Studio -->
+        <section class="card">
+          <h2 id="levelTitle" style="font-size: 1.1rem; font-weight: 800; margin: 0">Level 1: Reflected XSS & Entity Encoding</h2>
+          <div id="levelDesc" style="font-size: 0.9rem; color: var(--muted)">User URL search query is directly rendered into innerHTML without encoding!</div>
+
+          <div style="font-size: 0.8rem; font-weight: 700; color: var(--danger)">MALICIOUS ATTACK PAYLOAD</div>
+          <div class="payload-box" id="payloadBox">&lt;script&gt;alert('XSS Stolen Cookie: ' + document.cookie)&lt;/script&gt;</div>
+
+          <span style="font-size: 0.85rem; font-weight: 700; color: var(--text)">Select Sanitizer Code Patch:</span>
+          <div id="choicesContainer" style="display: flex; flex-direction: column; gap: 0.6rem"></div>
+
+          <div style="display: flex; gap: 0.5rem; flex-wrap: wrap">
+            <button id="btnDeployPatch" class="primary">▶ DEPLOY SECURITY PATCH</button>
+            <button id="btnHint">💡 Hint</button>
+          </div>
+          <div id="feedbackText" style="font-size: 0.85rem; font-weight: 700"></div>
+        </section>
+
+        <!-- Right: Isolated Payload Sandbox -->
+        <section class="card">
+          <h2 style="font-size: 1.1rem; font-weight: 800; margin: 0">Payload Sandbox Inspector</h2>
+
+          <div class="sandbox-stage">
+            <span style="font-size: 0.8rem; font-weight: 700; color: var(--muted)">UNSANITIZED RENDER (VULNERABLE)</span>
+            <div id="un-sanitized" class="sandbox-output" style="color: var(--danger)">&lt;script&gt;alert('XSS')&lt;/script&gt;</div>
+
+            <span style="font-size: 0.8rem; font-weight: 700; color: var(--muted)">SANITIZED OUTPUT (SECURED)</span>
+            <div id="sanitized" class="sandbox-output" style="color: var(--accent)">&amp;lt;script&amp;gt;alert('XSS')&amp;lt;/script&amp;gt;</div>
+          </div>
+        </section>
+      </div>
+    </main>
+
+    <!-- Victory Modal -->
+    <div id="victoryModal" class="modal-backdrop" style="display: none">
+      <div class="modal-box">
+        <h2 style="font-size: 1.5rem; font-weight: 800; margin: 0; color: var(--accent)">WEB APPLICATION SECURED!</h2>
+        <p style="font-size: 0.95rem; color: var(--muted); margin: 0">You successfully neutralized all XSS attack vectors, configured CSP directives, and implemented DOM sanitization policies!</p>
+        <button id="btnPlayAgain" class="primary" style="font-size: 1rem; padding: 0.75rem 1.5rem">🔄 RE-SECURE APPLICATION</button>
+      </div>
+    </div>
+
+    <script>
+      const LEVELS = [
+        {
+          id: 1,
+          title: "Level 1: Reflected XSS & Entity Encoding",
+          desc: "User URL search query is directly injected into innerHTML without HTML entity encoding!",
+          payload: "&lt;script&gt;alert('XSS Cookie: ' + document.cookie)&lt;/script&gt;",
+          choices: [
+            { text: "input.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');", correct: true },
+            { text: "element.innerHTML = input;", correct: false },
+            { text: "input.toLowerCase();", correct: false }
+          ],
+          hint: "Use HTML entity encoding to convert '<' into '&lt;' and '>' into '&gt;'."
+        },
+        {
+          id: 2,
+          title: "Level 2: DOM Sanitization Policies",
+          desc: "User-submitted rich text HTML contains dangerous inline event handler triggers!",
+          payload: "&lt;img src='invalid.jpg' onerror=\"alert('XSS Attack Execution!')\"&gt;",
+          choices: [
+            { text: "DOMPurify.sanitize(userHtml, { ALLOWED_TAGS: ['b', 'i', 'p'] });", correct: true },
+            { text: "userHtml.trim();", correct: false },
+            { text: "document.write(userHtml);", correct: false }
+          ],
+          hint: "Use DOMPurify.sanitize() to strip un-trusted event handler attributes."
+        },
+        {
+          id: 3,
+          title: "Level 3: Content Security Policy (CSP)",
+          desc: "Configure HTTP response headers to restrict external inline script execution!",
+          payload: "&lt;script src='https://malicious-attacker.com/steal.js'&gt;&lt;/script&gt;",
+          choices: [
+            { text: "Content-Security-Policy: script-src 'self' 'nonce-rAnd0m';", correct: true },
+            { text: "Content-Security-Policy: script-src *;", correct: false },
+            { text: "Access-Control-Allow-Origin: *;", correct: false }
+          ],
+          hint: "Restricting script-src to 'self' prevents third-party script loading."
+        },
+        {
+          id: 4,
+          title: "Level 4: Attribute Event Handler Injections",
+          desc: "Prevent malicious javascript pseudo-protocols inside href attributes!",
+          payload: "&lt;a href=\"javascript:alert('Stolen Token')\"&gt;Click For Prize&lt;/a&gt;",
+          choices: [
+            { text: "url.startsWith('http://') || url.startsWith('https://')", correct: true },
+            { text: "url.toUpperCase()", correct: false },
+            { text: "location.href = url", correct: false }
+          ],
+          hint: "Validate URL protocols to block 'javascript:' URIs."
+        }
+      ];
+
+      const $ = (id) => document.getElementById(id);
+
+      let currentLevel = 0;
+      let selectedChoice = -1;
+      let soundEnabled = true;
+      let audioCtx = null;
+
+      function initAudio() {
+        if (!audioCtx) audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+      }
+
+      function playSound(type) {
+        if (!soundEnabled || !audioCtx) return;
+        try {
+          const osc = audioCtx.createOscillator();
+          const gain = audioCtx.createGain();
+          osc.connect(gain);
+          gain.connect(audioCtx.destination);
+          const now = audioCtx.currentTime;
+
+          if (type === "shield") {
+            osc.type = "sine";
+            osc.frequency.setValueAtTime(300, now);
+            osc.frequency.exponentialRampToValueAtTime(700, now + 0.2);
+            gain.gain.setValueAtTime(0.2, now);
+            gain.gain.exponentialRampToValueAtTime(0.01, now + 0.2);
+            osc.start(now);
+            osc.stop(now + 0.2);
+          } else if (type === "win") {
+            osc.type = "triangle";
+            osc.frequency.setValueAtTime(523.25, now);
+            osc.frequency.setValueAtTime(659.25, now + 0.15);
+            osc.frequency.setValueAtTime(783.99, now + 0.3);
+            gain.gain.setValueAtTime(0.25, now);
+            gain.gain.exponentialRampToValueAtTime(0.01, now + 0.45);
+            osc.start(now);
+            osc.stop(now + 0.45);
+          }
+        } catch (e) {}
+      }
+
+      function init() {
+        loadLevel(currentLevel);
+
+        $("btnDeployPatch").addEventListener("click", deployPatch);
+        $("btnHint").addEventListener("click", () => {
+          $("feedbackText").textContent = "💡 " + LEVELS[currentLevel].hint;
+        });
+
+        $("btnPlayAgain").addEventListener("click", () => {
+          currentLevel = 0;
+          $("victoryModal").style.display = "none";
+          loadLevel(currentLevel);
+        });
+
+        $("soundToggle").addEventListener("click", () => {
+          soundEnabled = !soundEnabled;
+          $("soundToggle").textContent = soundEnabled ? "🔊 Sound ON" : "🔇 Sound OFF";
+        });
+        $("themeToggle").addEventListener("click", toggleTheme);
+      }
+
+      function toggleTheme() {
+        const current = document.documentElement.dataset.theme;
+        const next = current === "dark" ? "light" : "dark";
+        document.documentElement.dataset.theme = next;
+        localStorage.setItem("xss-defender-theme", next);
+        $("themeIcon").textContent = next === "dark" ? "☀️" : "🌙";
+      }
+
+      function loadLevel(idx) {
+        selectedChoice = -1;
+        const l = LEVELS[idx];
+        $("levelText").textContent = `LEVEL ${l.id} / ${LEVELS.length}`;
+        $("levelTitle").textContent = l.title;
+        $("levelDesc").textContent = l.desc;
+        $("payloadBox").textContent = l.payload;
+        $("un-sanitized").textContent = l.payload;
+        $("sanitized").textContent = l.payload;
+        $("feedbackText").textContent = "";
+
+        renderChoices(l.choices);
+      }
+
+      function renderChoices(choices) {
+        const container = $("choicesContainer");
+        container.innerHTML = choices
+          .map(
+            (c, i) => `
+          <div class="choice-option" onclick="selectChoice(${i})">
+            <span>[${i + 1}]</span>
+            <code>${c.text}</code>
+          </div>
+        `
+          )
+          .join("");
+      }
+
+      window.selectChoice = (idx) => {
+        selectedChoice = idx;
+        document.querySelectorAll(".choice-option").forEach((el, i) => {
+          el.className = `choice-option ${i === idx ? "selected" : ""}`;
+        });
+      };
+
+      function deployPatch() {
+        initAudio();
+        if (selectedChoice === -1) {
+          $("feedbackText").textContent = "⚠️ Please select a security patch first!";
+          return;
+        }
+
+        const l = LEVELS[currentLevel];
+        if (l.choices[selectedChoice].correct) {
+          playSound("shield");
+          $("sanitized").textContent = "[NEUTRALIZED PAYLOAD] " + l.payload.replace(new RegExp("<", "g"), "[SAFE_LESS]").replace(new RegExp(">", "g"), "[SAFE_GREATER]");
+          $("feedbackText").textContent = "✓ Payload neutralized! Security patch deployed successfully.";
+
+          setTimeout(() => {
+            if (currentLevel + 1 < LEVELS.length) {
+              currentLevel++;
+              loadLevel(currentLevel);
+            } else {
+              playSound("win");
+              $("victoryModal").style.display = "grid";
+            }
+          }, 900);
+        } else {
+          $("feedbackText").textContent = "⚠️ Weak patch! The XSS attack payload executed.";
+        }
+      }
+
+      window.addEventListener("DOMContentLoaded", init);
+    </script>
+  </body>
+</html>
diff --git a/quests/xss-defender.png b/quests/xss-defender.png
new file mode 100644
index 0000000..ae15f59
Binary files /dev/null and b/quests/xss-defender.png differ
