Security Tool · Browser-local · Content Security Policy · 2026 · Solo build
CSP Probe
A browser-local CSP header forensic analyser: paste any raw Content-Security-Policy string and get directive inventory, per-source risk badges (safe/risky/critical), five-vector attack coverage matrix, animated A–F grade ring, and specific hardening steps — all computed in TypeScript without any server round-trip.
The problem
Content-Security-Policy is notoriously opaque. A single 'unsafe-inline' in script-src defeats XSS protection; a missing frame-ancestors opens clickjacking. Developers paste their CSP into remote checkers (leaking it) or rely on browser console warnings (requiring a live page). There is no browser-local instant analyser with a structured attack-vector coverage matrix.
Architecture
Key decisions
Pure TypeScript engine with no dependencies
The entire analysis pipeline (parseCSP, classifySource, scoreCSP, getCoverageMatrix, getHardeningSteps) runs in TypeScript with no third-party CSP library. This makes the engine independently testable, publishable as a zero-dependency npm package, and verifiable by TDD without mocking any external state.
TDD before UI — 44 tests written before any component
All engine behaviours were specified as failing Vitest tests and watched to fail before implementation began. The UI was only started after all 44 tests passed. This enforces the correct interface shape and prevents the UI design from leaking into the logic layer.
Animated SVG grade ring over a badge
The A–F grade is the primary signal. An animated circular progress arc (stroke-dasharray transition) makes the grade weight feel tangible rather than arbitrary. The ring colour (emerald through rose) reinforces the grade semantics at a glance.
Five named attack vectors instead of a flat issue list
inline-xss, eval-injection, clickjacking, base-hijacking, and plugin-injection are the five dominant browser-based CSP-relevant attack classes. Naming them explicitly (rather than listing raw directive checks) gives the output a threat-model framing that is more actionable for a security engineer.