npm - create-interview-cockpit - Versions diffs - 0.13.0 → 0.15.0 - Mend

create-interview-cockpit 0.13.0 → 0.15.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (16) hide show

package/package.json +1 -1
package/template/client/src/api.ts +39 -0
package/template/client/src/browserSecurityTemplates.ts +3242 -0
package/template/client/src/components/BrowserSecurityLabModal.tsx +1510 -0
package/template/client/src/components/CodeRunnerModal.tsx +406 -55
package/template/client/src/components/LabsPanel.tsx +123 -12
package/template/client/src/components/LinkedConvosPicker.tsx +121 -63
package/template/client/src/components/Sidebar.tsx +113 -0
package/template/client/src/reactLab.ts +408 -0
package/template/client/src/store.ts +15 -1
package/template/client/src/types.ts +2 -0
package/template/client/tsconfig.tsbuildinfo +1 -1
package/template/cockpit.json +1 -1
package/template/server/src/google-drive.ts +2 -0
package/template/server/src/index.ts +90 -24
package/template/server/src/storage.ts +2 -0

package/template/client/src/components/BrowserSecurityLabModal.tsx ADDED Viewed

@@ -0,0 +1,1510 @@
+import { useState, useEffect, useRef, useCallback } from "react";
+import {
+  X,
+  Shield,
+  ShieldAlert,
+  ShieldCheck,
+  ShieldOff,
+  ChevronRight,
+  ChevronDown,
+  Play,
+  RotateCcw,
+  Copy,
+  Check,
+} from "lucide-react";
+import { useStore } from "../store";
+// ═══════════════════════════════════════════════════════ Types
+type ScenarioId =
+  | "csp-basics"
+  | "csp-nonce"
+  | "csp-report"
+  | "sandbox-none"
+  | "sandbox-scripts"
+  | "sandbox-same-origin"
+  | "clickjacking"
+  | "xss-reflect"
+  | "xss-dom"
+  | "cors-simple"
+  | "cors-preflight";
+type TabId = "preview" | "code" | "explanation" | "checklist";
+interface ScenarioGroup {
+  id: string;
+  label: string;
+  color: string; // tailwind text color
+  borderColor: string;
+  bgColor: string;
+  scenarios: Scenario[];
+}
+interface Scenario {
+  id: ScenarioId;
+  title: string;
+  subtitle: string;
+  /** The "secure" HTML document rendered as srcdoc inside the iframe. */
+  secureDoc: (cfg: Cfg) => string;
+  /** The "vulnerable" HTML for comparison — shown side by side. */
+  vulnerableDoc: (cfg: Cfg) => string;
+  /** HTTP response headers that WOULD be sent by the server. */
+  headers: (cfg: Cfg) => Record<string, string>;
+  /** Source code that illustrates the server-side implementation. */
+  serverCode: (cfg: Cfg) => string;
+  explanation: string;
+  howItHelps: string[];
+  interviewPoints: string[];
+  config?: CfgField[];
+}
+interface CfgField {
+  key: string;
+  label: string;
+  type: "toggle" | "select" | "text";
+  options?: string[];
+  default: string | boolean;
+}
+interface Cfg {
+  [key: string]: string | boolean;
+}
+// ═══════════════════════════════════════════════════════ Scenarios
+const SCENARIOS: ScenarioGroup[] = [
+  // ─── CSP ────────────────────────────────────────────────
+  {
+    id: "csp",
+    label: "Content Security Policy",
+    color: "text-cyan-300",
+    borderColor: "border-cyan-500/30",
+    bgColor: "bg-cyan-500/10",
+    scenarios: [
+      {
+        id: "csp-basics",
+        title: "CSP — Blocking Inline Scripts",
+        subtitle: "How CSP stops XSS before it runs",
+        config: [
+          {
+            key: "strictMode",
+            label: "Strict CSP (no unsafe-inline)",
+            type: "toggle",
+            default: true,
+          },
+          {
+            key: "allowEval",
+            label: "Allow eval() / unsafe-eval",
+            type: "toggle",
+            default: false,
+          },
+        ],
+        headers: (cfg) => ({
+          "Content-Security-Policy": cfg.strictMode
+            ? `default-src 'self'; script-src 'self'${cfg.allowEval ? " 'unsafe-eval'" : ""}; style-src 'self' 'unsafe-inline'`
+            : `default-src 'self'; script-src 'self' 'unsafe-inline'${cfg.allowEval ? " 'unsafe-eval'" : ""}; style-src 'self' 'unsafe-inline'`,
+          "X-Content-Type-Options": "nosniff",
+        }),
+        secureDoc: (cfg) => `<!doctype html>
+<html>
+<head>
+  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'${cfg.allowEval ? " 'unsafe-eval'" : ""}; style-src 'self' 'unsafe-inline'">
+  <style>
+    body { font-family: system-ui; background: #0f172a; color: #e2e8f0; padding: 1rem; margin: 0; }
+    .box { background: #1e293b; border: 1px solid #334155; border-radius: 8px; padding: 1rem; margin-bottom: 0.75rem; }
+    .ok  { color: #4ade80; font-weight: 600; }
+    .err { color: #f87171; font-weight: 600; }
+    .label { font-size: 0.7rem; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.25rem; }
+  </style>
+</head>
+<body>
+  <div class="box">
+    <div class="label">CSP Header active</div>
+    <code style="font-size:0.7rem;color:#94a3b8">script-src 'self'${cfg.allowEval ? " 'unsafe-eval'" : ""}</code>
+  </div>
+  <div class="box">
+    <div class="label">Inline script test</div>
+    <span id="inline-result" class="err">BLOCKED ✓ (CSP works)</span>
+    <script>
+      // This script tag is BLOCKED by CSP — the span text never changes
+      document.getElementById('inline-result').textContent = '⚠ EXECUTED (CSP not enforced)';
+      document.getElementById('inline-result').className = 'err';
+    </script>
+  </div>
+  ${
+    cfg.allowEval
+      ? `<div class="box">
+    <div class="label">eval() test (unsafe-eval ALLOWED)</div>
+    <span id="eval-result" class="err">waiting...</span>
+    <script src="data:text/javascript,
+      try {
+        eval('document.getElementById(\\'eval-result\\').textContent=\\'eval() ran \\u26a0\\';');
+        document.getElementById('eval-result').className='err';
+      } catch(e) {
+        document.getElementById('eval-result').textContent='eval() blocked ✓';
+      }
+    "></script>
+  </div>`
+      : `<div class="box">
+    <div class="label">eval() — blocked by policy</div>
+    <span class="ok">eval() would be blocked by CSP (unsafe-eval not listed)</span>
+  </div>`
+  }
+  <div class="box">
+    <div class="label">External script from untrusted domain</div>
+    <span class="ok">BLOCKED ✓ — not in script-src allowlist</span>
+  </div>
+</body>
+</html>`,
+        vulnerableDoc: (_cfg) => `<!doctype html>
+<html>
+<head>
+  <style>
+    body { font-family: system-ui; background: #0f172a; color: #e2e8f0; padding: 1rem; margin: 0; }
+    .box { background: #1e293b; border: 1px solid #334155; border-radius: 8px; padding: 1rem; margin-bottom: 0.75rem; }
+    .ok  { color: #4ade80; }
+    .err { color: #f87171; font-weight: 600; }
+    .label { font-size: 0.7rem; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.25rem; }
+  </style>
+</head>
+<body>
+  <div class="box">
+    <div class="label">No CSP header</div>
+    <span class="err">No Content-Security-Policy set</span>
+  </div>
+  <div class="box">
+    <div class="label">Inline script test</div>
+    <span id="inline-result" class="ok">waiting…</span>
+    <script>
+      document.getElementById('inline-result').textContent = '⚠ EXECUTED — attacker code ran!';
+      document.getElementById('inline-result').className = 'err';
+    </script>
+  </div>
+  <div class="box">
+    <div class="label">eval() test</div>
+    <span id="eval-result" class="ok">waiting…</span>
+    <script>
+      try {
+        eval("document.getElementById('eval-result').textContent = '⚠ eval() ran freely!'");
+        document.getElementById('eval-result').className = 'err';
+      } catch(e) {}
+    </script>
+  </div>
+</body>
+</html>`,
+        serverCode: (
+          cfg,
+        ) => `// Express.js middleware — set CSP header on every response
+app.use((_req, res, next) => {
+  res.setHeader(
+    "Content-Security-Policy",
+    [
+      "default-src 'self'",
+      "script-src 'self'${cfg.allowEval ? " 'unsafe-eval'" : ""}",   // ${cfg.allowEval ? "⚠ unsafe-eval allowed — avoid if possible" : "no eval() ever"}
+      "style-src 'self' 'unsafe-inline'",
+      "img-src 'self' data:",
+      "font-src 'self'",
+      "connect-src 'self'",
+      "frame-ancestors 'none'",  // blocks clickjacking too
+    ].join("; "),
+  );
+  next();
+});
+${!cfg.strictMode ? `\n// ⚠  'unsafe-inline' is set — inline scripts WILL run.\n// An attacker injecting <script>stealCookies()</script> via XSS will succeed.` : ""}`,
+        explanation: `**Content Security Policy (CSP)** is an HTTP response header that tells the browser which sources it's allowed to load and execute resources from.
+Without CSP, if an attacker injects \`<script>stealCookies()</script>\` via XSS [Cross-Site Scripting — injecting malicious scripts into a page viewed by other users], the browser runs it without question.
+With \`script-src 'self'\`, the browser refuses to execute:
+- **Inline scripts** (the most common XSS vector)
+- **eval()** and similar string-to-code functions
+- **Scripts loaded from any domain not in your allowlist**
+The policy is enforced by the browser itself — even if the attacker controls part of your page content, they cannot execute code.`,
+        howItHelps: [
+          "Stops injected inline <script> tags from running",
+          "Prevents eval() / Function() string-to-code attacks",
+          "Blocks data exfiltration to attacker-controlled servers (connect-src)",
+          "Reduces XSS impact from zero-day library vulnerabilities",
+          "Provides defense-in-depth after input validation fails",
+        ],
+        interviewPoints: [
+          "'unsafe-inline' negates most of CSP's value — it's a last resort flag",
+          "Nonces and hashes let you allow specific inline scripts without 'unsafe-inline'",
+          "CSP Level 3 'strict-dynamic' helps SPAs avoid long allowlists",
+          "Report-to / report-uri sends violations to a logging endpoint without blocking",
+          "frame-ancestors 'none' replaces the older X-Frame-Options header",
+        ],
+      },
+      {
+        id: "csp-nonce",
+        title: "CSP Nonces — Allowing Trusted Inline Scripts",
+        subtitle: "Selectively permit inline scripts without 'unsafe-inline'",
+        config: [
+          {
+            key: "useNonce",
+            label: "Use nonce on <script> tag",
+            type: "toggle",
+            default: true,
+          },
+        ],
+        headers: (cfg) => ({
+          "Content-Security-Policy": `script-src 'nonce-abc123xyz'${cfg.useNonce ? "" : " 'unsafe-inline'"}; default-src 'self'`,
+        }),
+        secureDoc: (cfg) => `<!doctype html>
+<html>
+<head>
+  <meta http-equiv="Content-Security-Policy"
+        content="script-src 'nonce-abc123xyz'; default-src 'self'">
+  <style>
+    body { font-family: system-ui; background: #0f172a; color: #e2e8f0; padding: 1rem; margin: 0; }
+    .box { background: #1e293b; border: 1px solid #334155; border-radius: 8px; padding: 1rem; margin-bottom: 0.75rem; }
+    .ok  { color: #4ade80; font-weight: 600; }
+    .err { color: #f87171; font-weight: 600; }
+    .label { font-size: 0.7rem; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.25rem; }
+  </style>
+</head>
+<body>
+  <div class="box">
+    <div class="label">Script WITH correct nonce (nonce="abc123xyz")</div>
+    <span id="nonce-ok" class="err">waiting…</span>
+    ${
+      cfg.useNonce
+        ? `<script nonce="abc123xyz">
+      document.getElementById('nonce-ok').textContent = '✓ Ran — nonce matched CSP';
+      document.getElementById('nonce-ok').className = 'ok';
+    </script>`
+        : `<script>
+      document.getElementById('nonce-ok').textContent = '⚠ Ran WITHOUT nonce (unsafe mode)';
+      document.getElementById('nonce-ok').className = 'err';
+    </script>`
+    }
+  </div>
+  <div class="box">
+    <div class="label">Injected script WITHOUT nonce (simulated XSS)</div>
+    <span id="xss-result" class="ok">BLOCKED ✓ — no nonce, so CSP refuses to run it</span>
+    <script>
+      // No nonce — this is blocked by the CSP even though it's inline.
+      // An attacker who injects this via XSS cannot get the server's nonce.
+      document.getElementById('xss-result').textContent = '⚠ XSS script ran!';
+      document.getElementById('xss-result').className = 'err';
+    </script>
+  </div>
+  <div class="box">
+    <div class="label">Why this works</div>
+    <span style="font-size:0.75rem;color:#94a3b8">
+      The server generates a new random nonce per request. Even if an attacker
+      injects a &lt;script&gt; tag, they cannot guess the nonce — only scripts
+      the server intentionally nonces are allowed to run.
+    </span>
+  </div>
+</body>
+</html>`,
+        vulnerableDoc: (_cfg) => `<!doctype html>
+<html>
+<head>
+  <style>
+    body { font-family: system-ui; background: #0f172a; color: #e2e8f0; padding: 1rem; margin: 0; }
+    .box { background: #1e293b; border: 1px solid #334155; border-radius: 8px; padding: 1rem; margin-bottom: 0.75rem; }
+    .err { color: #f87171; font-weight: 600; }
+    .label { font-size: 0.7rem; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.25rem; }
+  </style>
+</head>
+<body>
+  <div class="box">
+    <div class="label">No nonce strategy — both scripts run</div>
+    <span id="trusted-result" class="err">waiting…</span>
+    <script>
+      document.getElementById('trusted-result').textContent = '⚠ "Trusted" script ran (expected)';
+    </script>
+  </div>
+  <div class="box">
+    <div class="label">Injected attacker script also runs</div>
+    <span id="attack-result" class="err">waiting…</span>
+    <script>
+      document.getElementById('attack-result').textContent = '⚠ XSS script also ran — no way to distinguish!';
+    </script>
+  </div>
+</body>
+</html>`,
+        serverCode: (_cfg) => `import crypto from "node:crypto";
+// Middleware: generate a fresh cryptographic nonce per request.
+// A nonce [number used once] is a random base64 string generated server-side.
+// The attacker cannot guess it, so injected scripts cannot include it.
+app.use((req, res, next) => {
+  // 16 random bytes → 128-bit entropy → attacker cannot guess
+  const nonce = crypto.randomBytes(16).toString("base64");
+  res.locals.cspNonce = nonce;
+  res.setHeader(
+    "Content-Security-Policy",
+    \`script-src 'nonce-\${nonce}'; default-src 'self'\`,
+  );
+  next();
+});
+// In your template engine (e.g. EJS, Handlebars, React SSR):
+// <script nonce="<%= nonce %>">/* trusted code */</script>
+//
+// The nonce on the <script> tag must match the one in the CSP header.
+// Because the nonce changes with every page load, an attacker who injects
+// <script>stealCookies()</script> cannot include the current nonce, so the
+// browser refuses to run the injection.`,
+        explanation: `A **nonce** [number used once] is a random value generated by the server for each response. It's included in both the CSP header and on every trusted \`<script>\` tag.
+The browser only executes inline scripts whose nonce attribute matches the one declared in \`script-src 'nonce-ABC'\`.
+Since the nonce changes with every page load and the attacker cannot predict it, even if they inject a \`<script>\` tag via XSS, they cannot include the valid nonce — so the browser refuses to execute the injection.
+This is the preferred way to allow inline scripts (e.g., in SSR apps) without resorting to the dangerous \`'unsafe-inline'\` directive.`,
+        howItHelps: [
+          "Allows legitimate inline scripts (e.g. from SSR templates) without 'unsafe-inline'",
+          "Injected XSS scripts cannot include the nonce — they're blocked",
+          "Works well with React SSR, Next.js, and Express template engines",
+          "CSP Level 3 'strict-dynamic' extends nonce trust to dynamically added scripts",
+          "Each page load gets a new nonce — replayed nonces in old responses are invalidated",
+        ],
+        interviewPoints: [
+          "Nonce must be cryptographically random (crypto.randomBytes), not sequential",
+          "Must generate a NEW nonce per request — never reuse or cache it",
+          "Framework CSP middleware (Helmet.js) handles nonce generation automatically",
+          "'strict-dynamic' combined with nonce removes the need for a domain allowlist",
+          "Hash-based CSP ('sha256-...') is an alternative when content is static",
+        ],
+      },
+      {
+        id: "csp-report",
+        title: "CSP Report-Only — Monitor Without Breaking",
+        subtitle: "Roll out CSP safely using report-only mode first",
+        config: [
+          {
+            key: "reportOnly",
+            label: "Report-Only mode (no blocking)",
+            type: "toggle",
+            default: true,
+          },
+        ],
+        headers: (cfg) => ({
+          [cfg.reportOnly
+            ? "Content-Security-Policy-Report-Only"
+            : "Content-Security-Policy"]:
+            `default-src 'self'; script-src 'self'; report-uri /csp-violations`,
+        }),
+        secureDoc: (cfg) => `<!doctype html>
+<html>
+<head>
+  <meta http-equiv="${cfg.reportOnly ? "Content-Security-Policy-Report-Only" : "Content-Security-Policy"}"
+        content="default-src 'self'; script-src 'self'; report-uri /csp-violations">
+  <style>
+    body { font-family: system-ui; background: #0f172a; color: #e2e8f0; padding: 1rem; margin: 0; }
+    .box { background: #1e293b; border: 1px solid #334155; border-radius: 8px; padding: 1rem; margin-bottom: 0.75rem; }
+    .ok  { color: #4ade80; font-weight: 600; }
+    .warn { color: #facc15; font-weight: 600; }
+    .err { color: #f87171; font-weight: 600; }
+    .label { font-size: 0.7rem; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.25rem; }
+  </style>
+</head>
+<body>
+  <div class="box">
+    <div class="label">Mode: ${cfg.reportOnly ? "Report-Only (no blocking)" : "Enforcing (blocking)"}</div>
+    <span class="${cfg.reportOnly ? "warn" : "ok"}">
+      ${cfg.reportOnly ? "⚠ Violations are REPORTED but scripts still run" : "✓ Violations are BLOCKED"}
+    </span>
+  </div>
+  <div class="box">
+    <div class="label">Inline script violation test</div>
+    <span id="result" class="${cfg.reportOnly ? "warn" : "ok"}">
+      ${cfg.reportOnly ? "⚠ Inline script ran — reported to /csp-violations" : "BLOCKED ✓"}
+    </span>
+    <script>
+      // In report-only mode this runs but generates a CSP violation report.
+      // In enforcing mode it is blocked entirely.
+      document.getElementById('result').textContent =
+        '${cfg.reportOnly ? "⚠ Script ran (report-only — not blocked)" : "✓ BLOCKED by enforcing CSP"}';
+    </script>
+  </div>
+  <div class="box">
+    <div class="label">Strategy</div>
+    <span style="font-size:0.75rem;color:#94a3b8">
+      1. Deploy with Report-Only → collect violation data for 1–2 weeks.<br>
+      2. Fix all legitimate violations (update allowlists / add nonces).<br>
+      3. Switch header to Content-Security-Policy to enforce.
+    </span>
+  </div>
+</body>
+</html>`,
+        vulnerableDoc: (_cfg) => `<!doctype html>
+<html>
+<head>
+  <style>
+    body { font-family: system-ui; background: #0f172a; color: #e2e8f0; padding: 1rem; margin: 0; }
+    .box { background: #1e293b; border: 1px solid #334155; border-radius: 8px; padding: 1rem; margin-bottom: 0.75rem; }
+    .err { color: #f87171; font-weight: 600; }
+    .label { font-size: 0.7rem; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.25rem; }
+  </style>
+</head>
+<body>
+  <div class="box">
+    <div class="label">No CSP at all</div>
+    <span class="err">Violations never reported — you have no visibility into injection attempts</span>
+  </div>
+  <div class="box">
+    <div class="label">Inline scripts run freely</div>
+    <span id="result" class="err">waiting…</span>
+    <script>
+      document.getElementById('result').textContent = '⚠ Ran — no monitoring, no protection';
+    </script>
+  </div>
+</body>
+</html>`,
+        serverCode: (
+          _cfg,
+        ) => `// Phase 1: Report-Only — NEVER blocks, only sends violation reports to /csp-violations
+app.use((_req, res, next) => {
+  res.setHeader(
+    "Content-Security-Policy-Report-Only",
+    "default-src 'self'; script-src 'self'; report-uri /csp-violations",
+  );
+  next();
+});
+// Collect violation reports — the browser POSTs JSON here automatically
+app.post("/csp-violations", (req, res) => {
+  const report = req.body["csp-report"];
+  console.log("CSP violation:", {
+    blocked: report["blocked-uri"],
+    directive: report["violated-directive"],
+    source: report["source-file"],
+    line: report["line-number"],
+  });
+  res.status(204).end();
+});
+// Phase 2: After reviewing reports and fixing all legitimate violations,
+// switch to the enforcing header:
+// res.setHeader("Content-Security-Policy", "default-src 'self'; script-src 'self'");`,
+        explanation: `**CSP Report-Only** mode lets you test a CSP policy on a production site WITHOUT breaking anything. The browser evaluates the policy and sends JSON violation reports to your \`report-uri\` endpoint — but does not actually block anything.
+**The rollout strategy:**
+1. Deploy with \`Content-Security-Policy-Report-Only\` and collect violation data for 1–2 weeks
+2. Each violation report tells you exactly what resource was blocked, which directive it violated, and the source file/line number
+3. Fix legitimate violations by adding nonces, updating allowlists, or refactoring inline scripts
+4. Once violations stop (or are all from actual attacks), switch to the enforcing \`Content-Security-Policy\` header
+This approach eliminates the risk of breaking a live site when introducing CSP.`,
+        howItHelps: [
+          "Zero-risk way to measure a new CSP policy's impact before enforcing",
+          "Reveals third-party scripts, CDNs, and inline code you may have forgotten",
+          "Provides real attack detection data in production",
+          "Forces teams to audit what scripts actually run on their pages",
+          "Gives developers weeks to fix violations before enforcement starts",
+        ],
+        interviewPoints: [
+          "You can send BOTH headers simultaneously — enforce a strict core while reporting on a stricter future policy",
+          "report-to (Reporting API) is the modern replacement for report-uri",
+          "Google's CSP Evaluator tool helps audit policies before deployment",
+          "'strict-dynamic' + nonce is the recommended endgame policy for SPAs",
+          "CSP violations are a free real-time XSS detection system",
+        ],
+      },
+    ],
+  },
+  // ─── Sandboxing ─────────────────────────────────────────
+  {
+    id: "sandbox",
+    label: "iframe Sandboxing",
+    color: "text-amber-300",
+    borderColor: "border-amber-500/30",
+    bgColor: "bg-amber-500/10",
+    scenarios: [
+      {
+        id: "sandbox-none",
+        title: "iframe — No Sandbox (Full Trust)",
+        subtitle: "An unsandboxed iframe inherits all parent privileges",
+        config: [],
+        headers: (_cfg) => ({
+          "X-Frame-Options": "SAMEORIGIN",
+        }),
+        secureDoc: (_cfg) => `<!doctype html>
+<html>
+<head>
+  <style>
+    body { font-family: system-ui; background: #0f172a; color: #e2e8f0; padding: 1rem; margin: 0; }
+    .box { background: #1e293b; border: 1px solid #334155; border-radius: 8px; padding: 1rem; margin-bottom: 0.75rem; }
+    .err { color: #f87171; font-weight: 600; }
+    .label { font-size: 0.7rem; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.25rem; }
+  </style>
+</head>
+<body>
+  <div class="box">
+    <div class="label">Unsandboxed iframe embedded below</div>
+    <span class="err">⚠ Content runs scripts, can access parent origin (same-origin only), submit forms, and navigate top window</span>
+  </div>
+  <iframe
+    srcdoc="&lt;script&gt;document.write('I ran! I could navigate parent: ' + (window.parent !== window))&lt;/script&gt;"
+    style="width:100%;border:1px solid #334155;border-radius:4px;background:#0f172a;color:white;min-height:40px"
+  ></iframe>
+  <div class="box" style="margin-top:0.75rem">
+    <div class="label">Risk</div>
+    <span style="font-size:0.75rem;color:#94a3b8">
+      If this iframe loads user-controlled or third-party content with no sandbox,
+      that content can navigate the page, submit forms, access storage (if same-origin),
+      and run arbitrary JavaScript.
+    </span>
+  </div>
+</body>
+</html>`,
+        vulnerableDoc: (_cfg) => `<!doctype html>
+<html>
+<head>
+  <style>
+    body { font-family: system-ui; background: #0f172a; color: #e2e8f0; padding: 1rem; margin: 0; }
+    .box { background: #1e293b; border: 1px solid #334155; border-radius: 8px; padding: 1rem; margin-bottom: 0.75rem; }
+    .err { color: #f87171; }
+  </style>
+</head>
+<body>
+  <div class="box">
+    <span class="err">Same as "secure" view — without sandbox="" the iframe is fully trusted regardless. Compare using the sandbox scenarios instead.</span>
+  </div>
+</body>
+</html>`,
+        serverCode: (
+          _cfg,
+        ) => `<!-- HTML — never embed untrusted content without sandbox -->
+<!-- ❌ Dangerous — iframe gets full trust -->
+<iframe src="https://third-party.example.com/widget"></iframe>
+<!-- ✅ Sandboxed — scripts, forms, and navigation all blocked by default -->
+<iframe
+  sandbox="allow-scripts allow-same-origin"
+  src="https://third-party.example.com/widget"
+></iframe>
+<!-- ✅ Most restrictive — nothing is allowed (display-only) -->
+<iframe sandbox="" src="https://static-preview.example.com"></iframe>`,
+        explanation: `Without the \`sandbox\` attribute, an embedded iframe inherits the full capabilities of its origin. If the embedded content is third-party or user-generated, it can:
+- Run arbitrary JavaScript
+- Submit forms (e.g. phishing)
+- Navigate the top-level window
+- Access cookies and localStorage (if same-origin)
+The \`sandbox\` attribute starts with **zero capabilities** and only grants back what you explicitly list.`,
+        howItHelps: [
+          "Smallest possible privilege surface for embedded content",
+          "Even if embedded content is compromised, it cannot affect the parent page",
+          "Prevents phishing via form submission from embedded widgets",
+          "Stops embedded content from navigating the user away from your page",
+          "Defense-in-depth for micro-frontend architectures",
+        ],
+        interviewPoints: [
+          'sandbox="" with no tokens is the most restrictive — no scripts, no storage, no navigation',
+          "allow-same-origin + allow-scripts together is dangerous: the iframe can remove the sandbox via JS",
+          "Modern micro-frontend architectures use sandbox for cross-team isolation",
+          "Permissions Policy restricts powerful APIs (camera, geolocation) similarly",
+          "Content embedded in sandboxed iframes is a separate browsing context",
+        ],
+      },
+      {
+        id: "sandbox-scripts",
+        title: 'sandbox="allow-scripts" — Scripts Without Storage',
+        subtitle: "Allow JS execution but block same-origin storage access",
+        config: [
+          {
+            key: "allowSameOrigin",
+            label: "Also add allow-same-origin",
+            type: "toggle",
+            default: false,
+          },
+          {
+            key: "allowForms",
+            label: "Also add allow-forms",
+            type: "toggle",
+            default: false,
+          },
+        ],
+        headers: (_cfg) => ({ "X-Frame-Options": "SAMEORIGIN" }),
+        secureDoc: (cfg) => {
+          const tokens = [
+            "allow-scripts",
+            ...(cfg.allowSameOrigin ? ["allow-same-origin"] : []),
+            ...(cfg.allowForms ? ["allow-forms"] : []),
+          ].join(" ");
+          return `<!doctype html>
+<html>
+<head>
+  <style>
+    body { font-family: system-ui; background: #0f172a; color: #e2e8f0; padding: 1rem; margin: 0; }
+    .box { background: #1e293b; border: 1px solid #334155; border-radius: 8px; padding: 1rem; margin-bottom: 0.75rem; }
+    .ok  { color: #4ade80; font-weight: 600; }
+    .err { color: #f87171; font-weight: 600; }
+    .warn { color: #facc15; font-weight: 600; }
+    .label { font-size: 0.7rem; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.25rem; }
+  </style>
+</head>
+<body>
+  <div class="box">
+    <div class="label">Active sandbox tokens</div>
+    <code style="color:#94a3b8;font-size:0.75rem">sandbox="${tokens}"</code>
+  </div>
+  <iframe
+    sandbox="${tokens}"
+    srcdoc='<!doctype html>
+<html><head><style>
+body{font-family:system-ui;background:#1e293b;color:#e2e8f0;padding:0.75rem;margin:0;font-size:0.8rem}
+.ok{color:#4ade80;font-weight:600}.err{color:#f87171;font-weight:600}.label{color:#64748b;font-size:0.65rem;text-transform:uppercase;margin-bottom:0.25rem}
+</style></head><body>
+<div class="label">Script execution</div>
+<span id="s" class="err">waiting</span><script>document.getElementById("s").textContent="✓ JS runs";document.getElementById("s").className="ok"</script>
+<br><br>
+<div class="label">localStorage access ${cfg.allowSameOrigin ? "(allow-same-origin present ⚠)" : "(blocked — no allow-same-origin)"}</div>
+<span id="ls" class="err">testing...</span>
+<script>
+try{localStorage.setItem("t","1");document.getElementById("ls").textContent="${cfg.allowSameOrigin ? "⚠ localStorage accessible (same-origin granted)" : "✓ Blocked — SecurityError"}";
+document.getElementById("ls").className="${cfg.allowSameOrigin ? "err" : "ok"}"}catch(e){document.getElementById("ls").textContent="✓ Blocked: "+e.name;document.getElementById("ls").className="ok"}
+</script>
+<br><br>
+<div class="label">Form submission ${cfg.allowForms ? "(⚠ allow-forms present)" : "(blocked)"}</div>
+<span class="${cfg.allowForms ? "err" : "ok"}">${cfg.allowForms ? "⚠ Forms can submit" : "✓ Forms blocked"}</span>
+</body></html>'
+    style="width:100%;border:1px solid #334155;border-radius:4px;min-height:140px"
+  ></iframe>
+  ${
+    cfg.allowSameOrigin
+      ? `<div class="box" style="margin-top:0.75rem">
+    <div class="label" style="color:#f87171">⚠ Danger: allow-scripts + allow-same-origin</div>
+    <span style="font-size:0.75rem;color:#f87171">
+      With both tokens, the embedded JS can <strong>remove the sandbox attribute itself</strong>
+      by navigating to the same origin without sandbox. Avoid this combination!
+    </span>
+  </div>`
+      : ""
+  }
+</body>
+</html>`;
+        },
+        vulnerableDoc: (_cfg) => `<!doctype html>
+<html>
+<head>
+  <style>body{font-family:system-ui;background:#0f172a;color:#e2e8f0;padding:1rem;margin:0}
+  .box{background:#1e293b;border:1px solid #334155;border-radius:8px;padding:1rem;margin-bottom:0.75rem}
+  .err{color:#f87171;font-weight:600}.label{font-size:0.7rem;color:#64748b;text-transform:uppercase}</style>
+</head>
+<body>
+  <div class="box">
+    <div class="label">No sandbox — full trust iframe (same origin)</div>
+    <span class="err">Scripts run AND localStorage is accessible AND forms submit</span>
+  </div>
+  <iframe
+    srcdoc='<script>document.write("All capabilities granted — no isolation")</script>'
+    style="width:100%;border:1px solid #f87171;border-radius:4px;min-height:40px"
+  ></iframe>
+</body>
+</html>`,
+        serverCode: (cfg) => {
+          const tokens = [
+            "allow-scripts",
+            ...(cfg.allowSameOrigin ? ["allow-same-origin"] : []),
+            ...(cfg.allowForms ? ["allow-forms"] : []),
+          ].join(" ");
+          return `<!-- Granting only what the embedded content needs: -->
+<iframe
+  sandbox="${tokens}"
+  src="/embed/user-widget"
+></iframe>
+<!--
+Token reference:
+  allow-scripts        → JS can run (but treat it as a unique origin)
+  allow-same-origin    → iframe acts as same origin (can access storage)
+  allow-forms          → <form> elements can submit
+  allow-popups         → window.open() works
+  allow-top-navigation → can navigate the parent window (⚠ phishing risk)
+  allow-downloads      → can trigger file downloads
+⚠  allow-scripts + allow-same-origin together is dangerous:
+   the embedded script can navigate to the same URL without sandbox,
+   effectively removing the restriction.
+-->`;
+        },
+        explanation: `The \`sandbox\` attribute starts with **no capabilities** and you grant back only what you need. \`allow-scripts\` lets the iframe run JavaScript but treats the content as a **unique, opaque origin** — so it cannot access \`localStorage\`, \`document.cookie\`, or make credentialed requests to your origin.
+**Critical combination to avoid:** \`allow-scripts\` + \`allow-same-origin\` together. The embedded script can navigate to the same-origin document without the sandbox attribute, effectively escaping the sandbox.`,
+        howItHelps: [
+          '"Unique origin" treatment means no access to parent\'s cookies or storage',
+          "Forms cannot submit — prevents phishing widgets embedded in your page",
+          "Top-level navigation is blocked — embedded content can't hijack the browser bar",
+          "Permissions Policy further restricts powerful APIs within the sandbox",
+          "Works identically for both same-origin and cross-origin iframes",
+        ],
+        interviewPoints: [
+          "allow-scripts without allow-same-origin makes the frame a unique opaque origin",
+          "The dangerous combo: allow-scripts + allow-same-origin (sandbox escape possible)",
+          "CSP frame-src restricts WHICH URLs can be loaded in frames",
+          "Micro-frontend teams use sandbox to ensure CSS/JS don't leak between MFEs",
+          "Permissions Policy (formerly Feature Policy) is layered on top of sandbox",
+        ],
+      },
+      {
+        id: "sandbox-same-origin",
+        title: "Clickjacking — frame-ancestors CSP",
+        subtitle: "Prevent your page being embedded as a deceptive overlay",
+        config: [
+          {
+            key: "policy",
+            label: "frame-ancestors policy",
+            type: "select",
+            options: ["none", "self", "self + trusted"],
+            default: "none",
+          },
+        ],
+        headers: (cfg) => {
+          const fa =
+            cfg.policy === "none"
+              ? "'none'"
+              : cfg.policy === "self"
+                ? "'self'"
+                : "'self' https://trusted-partner.example.com";
+          return {
+            "Content-Security-Policy": `frame-ancestors ${fa}`,
+            "X-Frame-Options":
+              cfg.policy === "none"
+                ? "DENY"
+                : cfg.policy === "self"
+                  ? "SAMEORIGIN"
+                  : "SAMEORIGIN",
+          };
+        },
+        secureDoc: (cfg) => {
+          const fa =
+            cfg.policy === "none"
+              ? "'none'"
+              : cfg.policy === "self"
+                ? "'self'"
+                : "'self' https://trusted-partner.example.com";
+          return `<!doctype html>
+<html>
+<head>
+  <meta http-equiv="Content-Security-Policy" content="frame-ancestors ${fa}">
+  <style>
+    body { font-family: system-ui; background: #0f172a; color: #e2e8f0; padding: 1rem; margin: 0; }
+    .box { background: #1e293b; border: 1px solid #334155; border-radius: 8px; padding: 1rem; margin-bottom: 0.75rem; }
+    .ok  { color: #4ade80; font-weight: 600; }
+    .err { color: #f87171; font-weight: 600; }
+    .label { font-size: 0.7rem; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.25rem; }
+  </style>
+</head>
+<body>
+  <div class="box">
+    <div class="label">Active policy</div>
+    <code style="color:#94a3b8;font-size:0.75rem">frame-ancestors ${fa}</code>
+  </div>
+  <div class="box">
+    <div class="label">What this means</div>
+    <span class="ok">
+      ${cfg.policy === "none" ? "✓ This page CANNOT be embedded in any iframe anywhere" : cfg.policy === "self" ? "✓ Only same-origin iframes may embed this page" : "✓ Same-origin + trusted-partner.example.com may embed this page"}
+    </span>
+  </div>
+  <div class="box">
+    <div class="label">Clickjacking attack scenario (BLOCKED)</div>
+    <span style="font-size:0.75rem;color:#94a3b8">
+      An attacker builds attacker.com with:<br>
+      &lt;iframe src="bank.com/transfer" style="opacity:0;position:absolute" /&gt;<br>
+      &lt;button style="position:absolute"&gt;Win a prize!&lt;/button&gt;<br><br>
+      The user clicks "Win a prize!" but actually clicks the invisible transfer button.<br>
+      frame-ancestors blocks the iframe from loading in the first place.
+    </span>
+  </div>
+</body>
+</html>`;
+        },
+        vulnerableDoc: (_cfg) => `<!doctype html>
+<html>
+<head>
+  <style>
+    body { font-family: system-ui; background: #0f172a; color: #e2e8f0; padding: 1rem; margin: 0; }
+    .box { background: #1e293b; border: 1px solid #334155; border-radius: 8px; padding: 1rem; margin-bottom: 0.75rem; }
+    .err { color: #f87171; font-weight: 600; }
+    .label { font-size: 0.7rem; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.25rem; }
+  </style>
+</head>
+<body>
+  <div class="box">
+    <div class="label">No frame-ancestors — this page can be iframed by ANYONE</div>
+    <span class="err">⚠ attacker.com can overlay this page with an invisible iframe</span>
+  </div>
+  <div class="box">
+    <div class="label">Clickjacking attack possible</div>
+    <button style="padding:0.5rem 1rem;background:#3b82f6;color:white;border:none;border-radius:4px">
+      Transfer $5,000 (normally hidden under "Win a prize" button)
+    </button>
+  </div>
+</body>
+</html>`,
+        serverCode: (cfg) => {
+          const fa =
+            cfg.policy === "none"
+              ? "'none'"
+              : cfg.policy === "self"
+                ? "'self'"
+                : "'self' https://trusted-partner.example.com";
+          return `// Express — prevent clickjacking with frame-ancestors CSP
+// (frame-ancestors replaces the older X-Frame-Options header)
+app.use((_req, res, next) => {
+  res.setHeader(
+    "Content-Security-Policy",
+    "frame-ancestors ${fa}",
+  );
+  // Legacy browsers that don't support CSP frame-ancestors:
+  res.setHeader(
+    "X-Frame-Options",
+    "${
+      cfg.policy === "none"
+        ? "DENY"
+        : cfg.policy === "self"
+          ? "SAMEORIGIN"
+          : "SAMEORIGIN // (X-Frame-Options has no allow-list support)"
+    }",
+  );
+  next();
+});
+// Helmet.js does this in one line:
+// app.use(helmet.frameguard({ action: "${cfg.policy === "none" ? "deny" : "sameorigin"}" }));
+// But Helmet doesn't support the "allow-from" use case — use raw CSP for that.`;
+        },
+        explanation: `**Clickjacking** [UI redress attack] places your page inside an invisible iframe over a deceptive button. The user thinks they're clicking the attacker's button but actually triggers an action on your page (like a bank transfer or account deletion).
+\`frame-ancestors\` in CSP prevents the browser from embedding your page at all unless the embedding origin is in your allowlist.
+**frame-ancestors vs X-Frame-Options:** CSP is the modern standard. \`X-Frame-Options\` doesn't support fine-grained origin allowlists — add both for maximum compatibility.`,
+        howItHelps: [
+          "Browser refuses to embed your page in iframes on unauthorized domains",
+          "Works regardless of the attacker's CSS tricks (opacity, z-index)",
+          "'none' gives zero framing risk — use for pages like login, account settings, payments",
+          "'self' allows legitimate same-origin embedding (e.g. admin dashboards)",
+          "Allow-list with specific partner domains supports widget embedding safely",
+        ],
+        interviewPoints: [
+          "frame-ancestors is a CSP directive — NOT set via <meta> tag, must be HTTP header",
+          "X-Frame-Options DENY = frame-ancestors 'none'; SAMEORIGIN = 'self'",
+          "X-Frame-Options ALLOW-FROM is deprecated — use frame-ancestors allow-list instead",
+          "Payment APIs (e.g. Stripe Elements) use controlled framing extensively — frame-ancestors enables this",
+          "CSRF [Cross-Site Request Forgery] protection is related — SameSite cookies address same threat",
+        ],
+      },
+    ],
+  },
+  // ─── XSS ────────────────────────────────────────────────
+  {
+    id: "xss",
+    label: "XSS Prevention",
+    color: "text-red-300",
+    borderColor: "border-red-500/30",
+    bgColor: "bg-red-500/10",
+    scenarios: [
+      {
+        id: "xss-reflect",
+        title: "Reflected XSS — innerHTML vs textContent",
+        subtitle: "Never put user input into innerHTML without sanitization",
+        config: [
+          {
+            key: "sanitize",
+            label: "Sanitize input (use textContent)",
+            type: "toggle",
+            default: true,
+          },
+        ],
+        headers: (cfg) => ({
+          "Content-Security-Policy": cfg.sanitize
+            ? "default-src 'self'; script-src 'self'"
+            : "",
+          "X-Content-Type-Options": "nosniff",
+        }),
+        secureDoc: (cfg) => `<!doctype html>
+<html>
+<head>
+  ${cfg.sanitize ? `<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">` : ""}
+  <style>
+    body { font-family: system-ui; background: #0f172a; color: #e2e8f0; padding: 1rem; margin: 0; }
+    .box { background: #1e293b; border: 1px solid #334155; border-radius: 8px; padding: 1rem; margin-bottom: 0.75rem; }
+    .ok  { color: #4ade80; font-weight: 600; }
+    .err { color: #f87171; font-weight: 600; }
+    .label { font-size: 0.7rem; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.25rem; }
+    input { background:#0f172a;border:1px solid #475569;border-radius:4px;color:#e2e8f0;padding:0.25rem 0.5rem;font-size:0.8rem;width:100%;box-sizing:border-box;margin-top:0.25rem }
+    button { margin-top:0.5rem;background:#3b82f6;color:white;border:none;border-radius:4px;padding:0.35rem 0.75rem;cursor:pointer;font-size:0.8rem }
+  </style>
+</head>
+<body>
+  <div class="box">
+    <div class="label">Mode: ${cfg.sanitize ? "Safe (textContent)" : "⚠ Vulnerable (innerHTML)"}</div>
+    <input id="userInput" value='Hello <img src=x onerror="alert(1)"> <script>alert(2)</s' + 'cript>' placeholder="Try: <img src=x onerror=alert(1)>">
+    <button onclick="renderOutput()">Render</button>
+  </div>
+  <div class="box">
+    <div class="label">Output</div>
+    <div id="output" style="min-height:2rem"></div>
+  </div>
+  <div class="box">
+    <div class="label">Security note</div>
+    <span class="${cfg.sanitize ? "ok" : "err"}" style="font-size:0.75rem">
+      ${
+        cfg.sanitize
+          ? "✓ textContent treats input as plain text — HTML tags are escaped automatically"
+          : "⚠ innerHTML interprets HTML — attacker can inject onerror= and script tags"
+      }
+    </span>
+  </div>
+  <script>
+    function renderOutput() {
+      const input = document.getElementById('userInput').value;
+      const output = document.getElementById('output');
+      ${
+        cfg.sanitize
+          ? `// Safe: textContent never interprets HTML
+      output.textContent = input;`
+          : `// ⚠ Vulnerable: innerHTML executes injected HTML/JS
+      output.innerHTML = input;`
+      }
+    }
+  </script>
+</body>
+</html>`,
+        vulnerableDoc: (_cfg) => `<!doctype html>
+<html>
+<head>
+  <style>
+    body { font-family: system-ui; background: #0f172a; color: #e2e8f0; padding: 1rem; margin: 0; }
+    .box { background: #1e293b; border: 1px solid #334155; border-radius: 8px; padding: 1rem; margin-bottom: 0.75rem; }
+    .err { color: #f87171; font-weight: 600; }
+    .label { font-size: 0.7rem; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.25rem; }
+    input { background:#0f172a;border:1px solid #475569;border-radius:4px;color:#e2e8f0;padding:0.25rem 0.5rem;font-size:0.8rem;width:100%;box-sizing:border-box;margin-top:0.25rem }
+    button { margin-top:0.5rem;background:#ef4444;color:white;border:none;border-radius:4px;padding:0.35rem 0.75rem;cursor:pointer;font-size:0.8rem }
+  </style>
+</head>
+<body>
+  <div class="box">
+    <div class="label">⚠ innerHTML — try: &lt;img src=x onerror=alert(1)&gt;</div>
+    <input id="i" value='&lt;img src=x onerror="alert(1)"&gt;'>
+    <button onclick="document.getElementById('o').innerHTML = document.getElementById('i').value">Render</button>
+  </div>
+  <div class="box" id="o"></div>
+  <div class="box">
+    <span class="err">⚠ No CSP, no sanitization — any HTML including event handlers will execute</span>
+  </div>
+</body>
+</html>`,
+        serverCode: (
+          cfg,
+        ) => `// Server-side: encode output in templates (last line of defense)
+// Using a template engine with auto-escaping (Handlebars, EJS with <%=):
+// ✅ {{userComment}} — auto-escaped by Handlebars
+// ✅ <%= userComment %> — auto-escaped by EJS
+// ❌ {{{userComment}}} — triple-mustache = raw HTML output
+// Client-side: ALWAYS prefer textContent / setAttribute over innerHTML
+const el = document.getElementById("output");
+// ✅ Safe
+el.textContent = userSuppliedInput;
+// ✅ Safe for attributes
+el.setAttribute("href", sanitizeUrl(userUrl));
+// ❌ Dangerous — executes injected HTML
+el.innerHTML = userSuppliedInput;
+// ❌ Dangerous — executes injected JS
+el.innerHTML = \`<a href="\${userUrl}">click</a>\`;
+${
+  cfg.sanitize
+    ? `// If you genuinely need to render HTML (e.g. rich text editor):
+// Use DOMPurify — the gold-standard HTML sanitizer
+import DOMPurify from "dompurify";
+el.innerHTML = DOMPurify.sanitize(richHtmlContent);`
+    : "// ⚠ No sanitization active — innerHTML with user input is an XSS sink"
+}`,
+        explanation: `**Reflected XSS** [Cross-Site Scripting] happens when user-supplied input is inserted into a page without escaping. The classic sink is \`innerHTML\`.
+\`textContent\` is immune: it treats any input as plain text and escapes \`<\`, \`>\`, \`&\` automatically — HTML tags become visible text, not executable elements.
+**Defense layers:**
+1. **Output encoding** — escape HTML entities server-side in templates
+2. **textContent** over \`innerHTML\` in client code
+3. **DOMPurify** if you must render HTML (rich text editors)
+4. **CSP** as a final backstop even if encoding fails`,
+        howItHelps: [
+          "textContent is always safe — there is no XSS vector through it",
+          "Template engines with auto-escaping handle server-rendered output safely",
+          "DOMPurify strips dangerous attributes (onerror, onload) from HTML",
+          "CSP blocks inline script execution even if injection succeeds",
+          "Layered defense: one control failing doesn't compromise the whole app",
+        ],
+        interviewPoints: [
+          "innerHTML, outerHTML, document.write(), and eval() are the main XSS sinks",
+          "React's JSX auto-escapes — dangerouslySetInnerHTML is the only opt-out",
+          "Angular's DomSanitizer and Vue's v-html require explicit trust marking",
+          "Stored XSS (in database) is more dangerous than reflected — CSP helps both",
+          "DOM-based XSS occurs entirely client-side — server-side escaping doesn't prevent it",
+        ],
+      },
+    ],
+  },
+];
+// ═══════════════════════════════════════════════════════ Helpers
+function CodeBlock({
+  code,
+  language = "code",
+}: {
+  code: string;
+  language?: string;
+}) {
+  const [copied, setCopied] = useState(false);
+  const copy = () => {
+    navigator.clipboard.writeText(code).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1800);
+    });
+  };
+  return (
+    <div className="relative rounded-lg overflow-hidden border border-slate-700/60">
+      <div className="flex items-center justify-between px-3 py-1.5 bg-slate-800/80 border-b border-slate-700/60">
+        <span className="text-[10px] text-slate-500 uppercase tracking-wider">
+          {language}
+        </span>
+        <button
+          onClick={copy}
+          className="flex items-center gap-1 text-[10px] text-slate-500 hover:text-slate-300 transition-colors"
+        >
+          {copied ? (
+            <Check className="w-3 h-3 text-green-400" />
+          ) : (
+            <Copy className="w-3 h-3" />
+          )}
+          {copied ? "Copied" : "Copy"}
+        </button>
+      </div>
+      <pre className="p-3 text-[11px] leading-relaxed text-slate-300 overflow-x-auto bg-slate-900/60 whitespace-pre-wrap">
+        {code}
+      </pre>
+    </div>
+  );
+}
+// ═══════════════════════════════════════════════════════ Main Modal
+export default function BrowserSecurityLabModal() {
+  const { closeBrowserSecurityLab } = useStore();
+  const allScenarios = SCENARIOS.flatMap((g) => g.scenarios);
+  const [selectedId, setSelectedId] = useState<ScenarioId>("csp-basics");
+  const [tab, setTab] = useState<TabId>("preview");
+  const [cfg, setCfg] = useState<Cfg>({});
+  const [collapsedGroups, setCollapsedGroups] = useState<Set<string>>(
+    new Set(),
+  );
+  const secureRef = useRef<HTMLIFrameElement>(null);
+  const vulnerableRef = useRef<HTMLIFrameElement>(null);
+  const [showVulnerable, setShowVulnerable] = useState(true);
+  const scenario = allScenarios.find((s) => s.id === selectedId)!;
+  // Initialise cfg when scenario changes
+  useEffect(() => {
+    const defaults: Cfg = {};
+    scenario.config?.forEach((f) => {
+      defaults[f.key] = f.default;
+    });
+    setCfg(defaults);
+    setTab("preview");
+  }, [selectedId]);
+  // Update iframes when cfg changes
+  const refreshFrames = useCallback(() => {
+    if (secureRef.current) {
+      secureRef.current.srcdoc = scenario.secureDoc(cfg);
+    }
+    if (vulnerableRef.current) {
+      vulnerableRef.current.srcdoc = scenario.vulnerableDoc(cfg);
+    }
+  }, [scenario, cfg]);
+  useEffect(() => {
+    refreshFrames();
+  }, [refreshFrames]);
+  const group = SCENARIOS.find((g) =>
+    g.scenarios.some((s) => s.id === selectedId),
+  )!;
+  const TABS: { id: TabId; label: string }[] = [
+    { id: "preview", label: "Live Preview" },
+    { id: "code", label: "Server Code" },
+    { id: "explanation", label: "Explanation" },
+    { id: "checklist", label: "Interview Points" },
+  ];
+  return (
+    <div className="fixed inset-0 z-50 flex items-stretch bg-slate-950/90 backdrop-blur-sm">
+      <div className="flex w-full h-full overflow-hidden">
+        {/* ── Left panel — scenario picker ─────────────────────── */}
+        <div className="w-56 shrink-0 bg-slate-900 border-r border-slate-800 flex flex-col overflow-hidden">
+          {/* Header */}
+          <div className="px-3 py-3 border-b border-slate-800 flex items-center gap-2 shrink-0">
+            <Shield className="w-4 h-4 text-cyan-400" />
+            <span className="text-sm font-semibold text-slate-200">
+              Browser Security
+            </span>
+            <button
+              onClick={closeBrowserSecurityLab}
+              className="ml-auto p-0.5 rounded text-slate-600 hover:text-slate-300 transition-colors"
+            >
+              <X className="w-4 h-4" />
+            </button>
+          </div>
+          {/* Scenario groups */}
+          <div className="flex-1 overflow-y-auto py-2">
+            {SCENARIOS.map((grp) => {
+              const isCollapsed = collapsedGroups.has(grp.id);
+              return (
+                <div key={grp.id} className="mb-1">
+                  <button
+                    onClick={() =>
+                      setCollapsedGroups((prev) => {
+                        const next = new Set(prev);
+                        if (next.has(grp.id)) next.delete(grp.id);
+                        else next.add(grp.id);
+                        return next;
+                      })
+                    }
+                    className="w-full flex items-center gap-1.5 px-3 py-1.5 text-left hover:bg-slate-800/50 transition-colors"
+                  >
+                    {isCollapsed ? (
+                      <ChevronRight className="w-3 h-3 text-slate-500 shrink-0" />
+                    ) : (
+                      <ChevronDown className="w-3 h-3 text-slate-500 shrink-0" />
+                    )}
+                    <span
+                      className={`text-[10px] font-semibold uppercase tracking-wider ${grp.color}`}
+                    >
+                      {grp.label}
+                    </span>
+                  </button>
+                  {!isCollapsed &&
+                    grp.scenarios.map((s) => {
+                      const isActive = s.id === selectedId;
+                      return (
+                        <button
+                          key={s.id}
+                          onClick={() => setSelectedId(s.id)}
+                          className={`w-full text-left px-4 py-2 transition-colors border-l-2 ${
+                            isActive
+                              ? `${grp.bgColor} ${grp.borderColor.replace("border-", "border-l-")} border-opacity-100`
+                              : "border-l-transparent hover:bg-slate-800/30"
+                          }`}
+                        >
+                          <div
+                            className={`text-[11px] font-medium leading-snug ${isActive ? grp.color : "text-slate-400"}`}
+                          >
+                            {s.title}
+                          </div>
+                          <div className="text-[10px] text-slate-600 mt-0.5 leading-snug">
+                            {s.subtitle}
+                          </div>
+                        </button>
+                      );
+                    })}
+                </div>
+              );
+            })}
+          </div>
+        </div>
+        {/* ── Centre — config + tabs ───────────────────────────── */}
+        <div className="flex flex-col flex-1 overflow-hidden">
+          {/* Scenario title bar */}
+          <div className="shrink-0 px-4 py-3 border-b border-slate-800 flex items-center gap-3 bg-slate-900/60">
+            <div>
+              <h2 className={`text-sm font-semibold ${group.color}`}>
+                {scenario.title}
+              </h2>
+              <p className="text-[11px] text-slate-500 mt-0.5">
+                {scenario.subtitle}
+              </p>
+            </div>
+            {/* Config controls */}
+            {scenario.config && scenario.config.length > 0 && (
+              <div className="ml-auto flex items-center gap-3 flex-wrap justify-end">
+                {scenario.config.map((field) => (
+                  <div key={field.key} className="flex items-center gap-1.5">
+                    {field.type === "toggle" && (
+                      <>
+                        <span className="text-[10px] text-slate-500">
+                          {field.label}
+                        </span>
+                        <button
+                          onClick={() =>
+                            setCfg((prev) => ({
+                              ...prev,
+                              [field.key]: !prev[field.key],
+                            }))
+                          }
+                          className={`relative w-8 h-4 rounded-full transition-colors ${
+                            cfg[field.key] ? "bg-cyan-500" : "bg-slate-700"
+                          }`}
+                        >
+                          <span
+                            className={`absolute top-0.5 w-3 h-3 rounded-full bg-white transition-transform ${
+                              cfg[field.key]
+                                ? "translate-x-4"
+                                : "translate-x-0.5"
+                            }`}
+                          />
+                        </button>
+                      </>
+                    )}
+                    {field.type === "select" && (
+                      <>
+                        <span className="text-[10px] text-slate-500">
+                          {field.label}:
+                        </span>
+                        <select
+                          value={String(cfg[field.key] ?? field.default)}
+                          onChange={(e) =>
+                            setCfg((prev) => ({
+                              ...prev,
+                              [field.key]: e.target.value,
+                            }))
+                          }
+                          className="text-[11px] bg-slate-800 border border-slate-700 text-slate-300 rounded px-1.5 py-0.5 focus:outline-none focus:border-cyan-500"
+                        >
+                          {field.options?.map((o) => (
+                            <option key={o} value={o}>
+                              {o}
+                            </option>
+                          ))}
+                        </select>
+                      </>
+                    )}
+                  </div>
+                ))}
+                <button
+                  onClick={refreshFrames}
+                  className="flex items-center gap-1 text-[11px] px-2 py-1 rounded bg-slate-700 hover:bg-slate-600 text-slate-300 transition-colors"
+                >
+                  <Play className="w-3 h-3" />
+                  Apply
+                </button>
+              </div>
+            )}
+          </div>
+          {/* Tab bar */}
+          <div className="shrink-0 flex border-b border-slate-800 bg-slate-900/40 px-2">
+            {TABS.map((t) => (
+              <button
+                key={t.id}
+                onClick={() => setTab(t.id)}
+                className={`px-3 py-2 text-[11px] font-medium transition-colors border-b-2 ${
+                  tab === t.id
+                    ? `${group.color} border-current`
+                    : "text-slate-500 border-transparent hover:text-slate-300"
+                }`}
+              >
+                {t.label}
+              </button>
+            ))}
+            {tab === "preview" && (
+              <div className="ml-auto flex items-center gap-2 py-1 pr-1">
+                <span className="text-[10px] text-slate-600">Compare:</span>
+                <button
+                  onClick={() => setShowVulnerable((v) => !v)}
+                  className={`text-[10px] px-2 py-0.5 rounded transition-colors ${
+                    showVulnerable
+                      ? "bg-red-500/20 text-red-300 border border-red-500/30"
+                      : "bg-slate-700 text-slate-400 hover:bg-slate-600"
+                  }`}
+                >
+                  {showVulnerable ? "Hide vulnerable" : "Show vulnerable"}
+                </button>
+              </div>
+            )}
+          </div>
+          {/* Tab content */}
+          <div className="flex-1 overflow-hidden flex">
+            {tab === "preview" && (
+              <div className="flex-1 flex gap-0 overflow-hidden">
+                {/* Secure preview */}
+                <div
+                  className={`flex flex-col overflow-hidden ${showVulnerable ? "w-1/2" : "w-full"}`}
+                >
+                  <div className="px-3 py-1.5 bg-emerald-900/20 border-b border-emerald-700/30 flex items-center gap-2 shrink-0">
+                    <ShieldCheck className="w-3 h-3 text-emerald-400" />
+                    <span className="text-[10px] font-semibold text-emerald-400 uppercase tracking-wider">
+                      Secure
+                    </span>
+                    <div className="ml-auto flex gap-1 flex-wrap">
+                      {Object.entries(scenario.headers(cfg)).map(
+                        ([k, v]) =>
+                          v && (
+                            <span
+                              key={k}
+                              className="text-[9px] bg-emerald-900/40 border border-emerald-700/30 text-emerald-400/70 rounded px-1 py-0.5 font-mono"
+                            >
+                              {k}
+                            </span>
+                          ),
+                      )}
+                    </div>
+                  </div>
+                  <iframe
+                    ref={secureRef}
+                    sandbox="allow-scripts allow-same-origin"
+                    className="flex-1 border-0 bg-slate-950"
+                    title="Secure preview"
+                  />
+                </div>
+                {/* Divider */}
+                {showVulnerable && (
+                  <div className="w-px bg-slate-800 shrink-0" />
+                )}
+                {/* Vulnerable preview */}
+                {showVulnerable && (
+                  <div className="w-1/2 flex flex-col overflow-hidden">
+                    <div className="px-3 py-1.5 bg-red-900/20 border-b border-red-700/30 flex items-center gap-2 shrink-0">
+                      <ShieldOff className="w-3 h-3 text-red-400" />
+                      <span className="text-[10px] font-semibold text-red-400 uppercase tracking-wider">
+                        Vulnerable (no protection)
+                      </span>
+                    </div>
+                    <iframe
+                      ref={vulnerableRef}
+                      sandbox="allow-scripts allow-same-origin"
+                      className="flex-1 border-0 bg-slate-950"
+                      title="Vulnerable preview"
+                    />
+                  </div>
+                )}
+              </div>
+            )}
+            {tab === "code" && (
+              <div className="flex-1 overflow-y-auto p-4 space-y-4">
+                {/* Response headers panel */}
+                <div className="rounded-lg border border-slate-700/60 overflow-hidden">
+                  <div className="px-3 py-2 bg-slate-800/60 border-b border-slate-700/60">
+                    <span className="text-[10px] text-slate-500 uppercase tracking-wider font-semibold">
+                      HTTP Response Headers
+                    </span>
+                  </div>
+                  <div className="bg-slate-900/60 p-3 space-y-1">
+                    {Object.entries(scenario.headers(cfg))
+                      .filter(([, v]) => v)
+                      .map(([k, v]) => (
+                        <div
+                          key={k}
+                          className="flex gap-2 font-mono text-[11px]"
+                        >
+                          <span className="text-cyan-400 shrink-0">{k}:</span>
+                          <span className="text-slate-300 break-all">{v}</span>
+                        </div>
+                      ))}
+                    {Object.values(scenario.headers(cfg)).every((v) => !v) && (
+                      <span className="text-[11px] text-red-400/70 italic">
+                        No security headers set
+                      </span>
+                    )}
+                  </div>
+                </div>
+                {/* Server implementation code */}
+                <CodeBlock
+                  code={scenario.serverCode(cfg)}
+                  language="javascript (Node.js / Express)"
+                />
+              </div>
+            )}
+            {tab === "explanation" && (
+              <div className="flex-1 overflow-y-auto p-4 space-y-4">
+                {/* Explanation markdown-ish */}
+                <div className="rounded-lg border border-slate-700/60 bg-slate-900/40 p-4">
+                  <div className="flex items-center gap-2 mb-3">
+                    <Shield className="w-4 h-4 text-cyan-400" />
+                    <h3 className="text-sm font-semibold text-slate-200">
+                      How it works
+                    </h3>
+                  </div>
+                  <div className="text-[12px] text-slate-300 leading-relaxed whitespace-pre-line">
+                    {scenario.explanation}
+                  </div>
+                </div>
+                {/* How it helps */}
+                <div className="rounded-lg border border-emerald-700/30 bg-emerald-900/10 p-4">
+                  <div className="flex items-center gap-2 mb-3">
+                    <ShieldCheck className="w-4 h-4 text-emerald-400" />
+                    <h3 className="text-sm font-semibold text-emerald-300">
+                      Why it helps
+                    </h3>
+                  </div>
+                  <ul className="space-y-1.5">
+                    {scenario.howItHelps.map((pt, i) => (
+                      <li
+                        key={i}
+                        className="flex items-start gap-2 text-[12px] text-slate-300"
+                      >
+                        <span className="text-emerald-400 shrink-0 mt-0.5">
+                          ✓
+                        </span>
+                        {pt}
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              </div>
+            )}
+            {tab === "checklist" && (
+              <div className="flex-1 overflow-y-auto p-4">
+                <div className="rounded-lg border border-amber-700/30 bg-amber-900/10 p-4">
+                  <div className="flex items-center gap-2 mb-3">
+                    <ShieldAlert className="w-4 h-4 text-amber-400" />
+                    <h3 className="text-sm font-semibold text-amber-300">
+                      Interview talking points
+                    </h3>
+                  </div>
+                  <ul className="space-y-3">
+                    {scenario.interviewPoints.map((pt, i) => (
+                      <li key={i} className="flex items-start gap-2">
+                        <span className="w-5 h-5 rounded-full bg-amber-900/40 border border-amber-700/40 text-amber-400 text-[10px] font-bold flex items-center justify-center shrink-0 mt-0.5">
+                          {i + 1}
+                        </span>
+                        <span className="text-[12px] text-slate-300 leading-relaxed">
+                          {pt}
+                        </span>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}