← ClaudeAtlas

web-platform-conventionslisted

Web platform conventions for this repo — Content-Security-Policy discipline and (for Next.js 16+) the proxy.ts-not-middleware convention. Use when editing CSP headers, adding a third-party SDK / analytics / external API origin, touching request-edge code (middleware/proxy), or wiring auth/redirects/headers on a web frontend.
eric-sabe/engsys · ★ 1 · API & Backend · score 67
Install: claude install-skill eric-sabe/engsys
# Web Platform Conventions Applies to: the web frontend(s) in this repo. Mostly framework-agnostic; the proxy.ts section is Next.js-specific. > Naturalize: confirm the framework/version and where the CSP is built in `CLAUDE.md`. The defaults below assume a same-origin BFF/proxy architecture. ## Content-Security-Policy is a security-critical surface Treat the CSP as code that gates every network origin the page may reach. **Any new XHR/fetch origin, script host, or asset host must be added explicitly.** Never relax a directive to a wildcard to "make it work." ### `connect-src` policy - **Production: `'self'` only** — no `https:` wildcard, no `data:` / `blob:` / `javascript:`. Browser-initiated API calls should go through a same-origin BFF/proxy (e.g. `/api/proxy/*`), so `'self'` covers them. - Auth flows that navigate the browser to another origin (OAuth login/callback) use `window.location` navigations, which are governed by `form-action` / navigation directives, **not** `connect-src`. - Development may add `ws:` / `wss:` for the dev server's hot-reload. ### Before adding a new third-party SDK / analytics / external API 1. Add the **explicit origin** to `connect-src` (e.g. `https://browser.sentry-cdn.com`). Do NOT relax to `https:`. 2. If the SDK loads a script, also add the script host to `script-src`. 3. Add a test asserting both that the new origin is present **and** that the old strictness is preserved (no wildcard regression). 4. Smoke-test in dev — open DevTools