← ClaudeAtlas

frontend-securitylisted

Browser-side hardening: XSS, CSP, CORS, SRI, DOM clobbering, iframe sandboxing, Trusted Types — Applies to: when generating HTML / JSX / Vue / Svelte templates; when wiring up response headers in a web app; when adding third-party script tags or CDN resources
ShieldNet-360/secure-vibe · ★ 3 · Web & Frontend · score 76
Install: claude install-skill ShieldNet-360/secure-vibe
<!-- Native skill bundle for Claude Code. Generated by `secure-vibe dev regenerate`. --> <!-- Do not edit by hand; the source of truth is skills/frontend-security/SKILL.md. --> # Frontend Security Browser-side hardening: XSS, CSP, CORS, SRI, DOM clobbering, iframe sandboxing, Trusted Types ## ALWAYS - Treat all user/URL/storage data as untrusted. Render via framework escaping (`{}` in JSX/Vue/Svelte, `{{ }}` in templating). For raw HTML use a vetted sanitizer (DOMPurify) with a strict allowlist. - Send a strict `Content-Security-Policy` header. Minimum production baseline: `default-src 'self'; script-src 'self' 'nonce-<random>'; object-src 'none'; base-uri 'self'; frame-ancestors 'none'; form-action 'self'; upgrade-insecure-requests`. Use nonces or hashes — never `'unsafe-inline'` for `script-src`. - Set `Strict-Transport-Security: max-age=63072000; includeSubDomains; preload`, `X-Content-Type-Options: nosniff`, `Referrer-Policy: no-referrer-when-downgrade` or stricter, and `Permissions-Policy` to drop unused features. - Add `integrity="sha384-..." crossorigin="anonymous"` to every `<script>` and `<link rel="stylesheet">` loaded from a CDN. - Add `sandbox="allow-scripts allow-same-origin"` (only the attributes you need) to every `<iframe>`. Default to no allow flags. - Use cookies with `Secure; HttpOnly; SameSite=Lax` (or `Strict` for sensitive flows). `__Host-` prefix when there's no subdomain sharing. - Enable Trusted Types where browser support allows (`Content-Securit