frontend-security

Audits React SPA diffs for XSS sinks, token leakage, and weakened route guards.

1|Updated Apr 3, 2026
One-click install
npx skills add https://github.com/TierOne-Studio/spa-velocity --skill frontend-security-tierone-studio
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-security
Source: https://github.com/TierOne-Studio/spa-velocity/tree/main/.ruler/skills/frontend-security
Command: npx skills add https://github.com/TierOne-Studio/spa-velocity --skill frontend-security-tierone-studio

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Frontend security regressions slip into React single-page apps through small diffs: an unsanitized dangerouslySetInnerHTML, a secret accidentally placed in a VITE_* env var, or a route guard removed during a refactor. This Skill encodes the audit rules and checklist needed to catch those issues during code review before they ship. ## Core Features & Use Cases - XSS and injection review: Flags raw HTML rendering, unsafe react-markdown configurations (rehype-raw without sanitization), third-party script tags, and iframes with user-controllable sources. - Token and secret hygiene: Enforces rules for localStorage bearer-token storage (better-auth), forbids secrets in VITE_* env vars, and blocks logging of credentials, tokens, or PII. - Guard and boundary checks: Treats changes to <ProtectedRoute>, <AdminRoute>, useAuth gates, postMessage listeners, and OAuth redirect flows as security-sensitive events requiring origin validation and defense in depth. - Use Case: A PR modifies src/shared/lib/auth-client.ts and adds a markdown renderer for user comments. Run the audit checklist to verify the sanitizer is explicit, the token read/write paths are unchanged, and no new env var leaks a secret. ## Quick Start Review this pull request diff for frontend security issues including XSS sinks, env var leakage, and route guard changes.

Frequently Asked Questions about frontend-security

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I review a React PR for XSS vulnerabilities?

Check every dangerouslySetInnerHTML usage for an explicit sanitization step such as DOMPurify, and verify react-markdown does not enable rehype-raw without rehype-sanitize. Also inspect third-party script tags, iframes with user-controllable src, and URL parameters rendered into the page.

What env vars are safe to expose with Vite VITE_ prefix?

Only non-secret values are safe: API base URLs, public anon keys like Supabase or Firebase config, and feature flags. Anything prefixed VITE_ is bundled into client JavaScript and shipped publicly, so API keys, JWT secrets, and OAuth client secrets are forbidden.

Is storing auth tokens in localStorage secure for a React SPA?

localStorage token storage trades XSS exposure for cross-origin compatibility and is the documented choice here via better-auth and ADR-007. Mitigations include short token lifetimes, refresh on access, and server-side audit logging; do not introduce a parallel token store or silently switch to cookies.

Does react-markdown sanitize HTML by default?

Yes, react-markdown sanitizes by default with its standard plugin set. Adding rehype-raw enables arbitrary HTML rendering and must be paired with rehype-sanitize; genuinely needing raw HTML rendering warrants an architecture decision record.

When should a postMessage listener validate event origin?

Always. Any window.addEventListener('message', ...) handler must validate event.origin against a whitelist, otherwise any page can send messages to your handler. This applies to embedded iframes, OAuth popups, and third-party SDK integrations.

When should this frontend security audit not be used?

Skip it for pure visual styling changes with no DOM-injection or auth surface, and for data-shape refactors that never cross a trust boundary. Backend-only security audits belong on the API side, not in this SPA-focused checklist.