# React Security

> Security practices for React (XSS, Auth, Dependencies).

- Skill: `ngxtm-devkit/react-security` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add ngxtm-devkit/react-security`
- Raw SKILL.md: https://api.skillmd.com/api/skills/ngxtm-devkit/react-security/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: ngxtm (https://skillmd.com/u/ngxtm-devkit)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/ngxtm-devkit/react-security

---


# React Security

## **Priority: P0 (CRITICAL)**

Preventing vulnerabilities in client-side apps.

## Implementation Guidelines

- **XSS**: Avoid `dangerouslySetInnerHTML`. Sanitize via `DOMPurify` if needed.
- **URLs**: Validate `javascript:` protocols in user links.
- **Auth**: Store tokens in `HttpOnly` cookies. Avoid `localStorage`.
- **Deps**: Run `npm audit`. Pin versions.
- **Secrets**: Server-side only. No `.env` secrets in build.
- **CSP**: Strict Content-Security-Policy headers.

## Anti-Patterns

- **No `eval()`**: RCE risk.
- **No Serialized State**: Don't inject JSON into DOM without escaping.
- **No Client Logic for Permissions**: Backend must validate.

## Code

```tsx
import DOMPurify from 'dompurify';

// Safe HTML Injection
function SafeHtml({ content }) {
  const clean = DOMPurify.sanitize(content);
  return <div dangerouslySetInnerHTML={{ __html: clean }} />;
}

// Bad Link Prevention
const safeUrl = url.startsWith('javascript:') ? '#' : url;
<a href={safeUrl}>Link</a>;
```