Lucas Playgrounds

Base platform for interactive playgrounds in one React app. This is intentionally separate from a portfolio: it should feel like a small tool surface, opened in its own tab, with a clear path back to lucascoliveira.com.

Safety model

• No backend, databases, ingestion APIs, analytics SDKs, or uploads.
• No PII collection. Inputs are capped; demo state is disposable.
• CSP: meta tag in index.html, dev headers in vite.config.ts, and public/_headers for Netlify-style hosts.
• Visible disclaimer in the shared shell: educational sandbox, controlled isolation, no remote collection.

XSS Chat Playground (/xss)

A chat-style lab that compares:

• Insecure rendering (conceptually: element.innerHTML / dangerouslySetInnerHTML)
• Sanitized rendering (DOMPurify allowlist)

It uses preset-driven messages so learners can click around without writing payloads manually. The demo shows impacts locally (UI injection, auto-execution risk, token access risk) without becoming a public exploit surface.

Why it avoids real malicious execution

• The user does not execute arbitrary JavaScript from free-form input.
• Preset-only behavior runs inside a sandboxed iframe (no allow-same-origin) with a tight CSP; alerts/logs are captured for learning feedback.
• No external requests, uploads, credential fields, or exfiltration paths are allowed.

Add / edit XSS presets

• Presets live in src/features/xss/data/payloadPresets.ts.
• Each preset defines:
  • draft: what gets inserted into the composer
  • insecureHtml: what the insecure view renders inside the sandboxed iframe
  • iframeScript (optional): demo-only logic for alert() / console.log() inside the iframe
  • explainer: educational copy tied to the preset
  • impact logic is mapped in src/features/xss/lib/simulateXssImpact.ts

Stack

• React 19 + TypeScript + Vite
• Material UI v9 + Emotion
• React Router v7

Run locally

cd lucas-playgrounds
npm install
npm run dev

Open the URL Vite prints (default http://localhost:5173).

Build & preview

npm run build
npm run preview

GitHub Pages / subpath

If assets live under a subpath, set the base when building:

VITE_BASE_PATH=/your-repo-name/ npm run build

BrowserRouter uses import.meta.env.BASE_URL so client routes match the build base.

Routes

Path	Description
/	Catalog of playgrounds
/xss	XSS Chat Playground (insecure vs sanitized)
/methodology	How demos stay safe and how to extend the app

Add a new playground

Architecture

• App shell (chrome): src/components/shell/* + src/app/layout.tsx
• Routing: src/App.tsx (React Router)
• Catalog: src/app/page.tsx + src/playgrounds/registry.ts
• Design foundation: src/theme/* + global styles
• Pages: src/app/<page>/page.tsx (thin route entry points)
• Features (future): src/features/<id>/* (UI, hooks, types)

Steps

1. Registry: add a new entry to src/playgrounds/registry.ts (id/title/description/tag/status).
2. Feature: create src/features/<id>/ with a single exported root component (ex: <IdPlayground />).
3. Page entry: add src/app/<id>/page.tsx that renders the feature root component.
4. Route: add a <Route path="<id>" element={<... />} /> in src/App.tsx.
5. Nav (optional): add a chip to src/components/shell/PlaygroundNav.tsx when the playground is ready to be accessible.
6. Catalog card: when shipping it, flip the registry status from coming_soon and wire the card to link to the route.

Deploy

Any static host works (Vercel, Netlify, Cloudflare Pages, S3, etc.). Replicate the security headers from public/_headers or your host’s config. Prefer a dedicated subdomain (for example playgrounds.lucascoliveira.com) separate from the portfolio origin.

License

Educational use. Keep demos controlled; do not copy unsafe patterns into production systems.