Darkly — Web Security Audit + Report

Two deliverables from one typed dataset:

1. The turn-in — one {Breach}/ folder per exploited breach, each with an exact-bytes flag and a binary-free Resources/ (request.http, payload.txt, response.txt, notes.md).
2. The report — report/index.html, a single self-contained, offline, accessible (WCAG 2.1 AA) and GDPR-clean "SOC console" dashboard of the findings.

Flags are PENDING — capture on live VM until captured byte-for-byte on the live target. Values are never invented (see CLAUDE.md, en.subject.txt).

Architecture

src/
  types.ts            # the Breach / BonusDeepDive schema (single source of truth)
  data.ts             # the 14 breaches + bonus + audit metadata
  breaches.generated.ts  # 12 schema-validated breach objects (typed, re-checked vs Breach)
  html.ts             # tiny safe HTML templating (escapes payloads → no self-XSS)
  render.ts           # build-time render: dataset → accessible HTML (works without JS)
  charts.ts/icons.ts/theme.ts  # dependency-free SVG/CSS charts + inline icons
  styles.css          # Dark-OLED design system (focus rings, reduced-motion, AA contrast)
  enhance.ts          # progressive enhancement only (copy / expand / filter)
scripts/build.ts      # dataset → report/index.html (font base64-inlined) + {Breach}/ folders
tests/                # Playwright e2e + axe WCAG AA + RGPD (no-network / no-cookies)
bench/bench.ts        # measured perf budget (bytes / CLS / zero external requests)
docker/Dockerfile     # the single CI image (Node + Playwright browsers)
Makefile              # pure-Docker orchestration

Key decisions

• One dataset → both outputs. The folders and the report are generated from src/data.ts, so they cannot drift (same flags, names, severities).
• Build-time render + progressive enhancement. Content is real HTML, so the report is readable offline and without JavaScript; enhance.ts only adds copy/expand/filter. Zero CLS.
• Self-hosted font. JetBrains Mono is base64-inlined into the single index.html — no Google Fonts CDN (the pattern German courts ruled a GDPR violation). No network at runtime.
• Pure Docker. The host needs only Docker + make. The image provides Node + browsers; deps install into a gitignored node_modules.
• Strict everywhere. tsconfig enables the full strict set (noUncheckedIndexedAccess, exactOptionalPropertyTypes, …) and ESLint runs strictTypeChecked. The generated breach data is re-validated against the Breach type at compile time.

Usage (everything runs in Docker)

make image       # build the CI image (once)
make build       # generate report/index.html + the {Breach}/ folders
make typecheck   # strict tsc
make lint        # eslint strictTypeChecked
make test        # Playwright e2e + axe WCAG AA + RGPD
make bench       # performance budget (size / CLS / zero network)
make all         # typecheck → lint → build → test → bench

Open the report: report/index.html in any browser (no server, no build step, no network).

darkly