>_SkillsHub▋

> react-security

Security practices for React (XSS, Auth, Dependencies). Use when preventing XSS, securing auth flows, or auditing third-party dependencies in React. (triggers: **/*.tsx, **/*.jsx, dangerouslySetInnerHTML, token, auth, xss)

fetch
$curl "https://skillshub.wtf/HoangNguyen0403/agent-skills-standard/react-security?format=md"
SKILL.md•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

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>;

Related Topics

common/security-standards | typescript/security | component-patterns

> related_skills --same-repo

> typescript-tooling

Development tools, linting, and build config for TypeScript. Use when configuring ESLint, Prettier, Jest, Vitest, tsconfig, or any TS build tooling. (triggers: tsconfig.json, .eslintrc.*, jest.config.*, package.json, eslint, prettier, jest, vitest, build, compile, lint)

> typescript-security

Secure coding practices for TypeScript. Use when validating input, handling auth tokens, sanitizing data, or managing secrets and sensitive configuration. (triggers: **/*.ts, **/*.tsx, validate, sanitize, xss, injection, auth, password, secret, token)

> typescript-language

Modern TypeScript standards for type safety and maintainability. Use when working with types, interfaces, generics, enums, unions, or tsconfig settings. (triggers: **/*.ts, **/*.tsx, tsconfig.json, type, interface, generic, enum, union, intersection, readonly, const, namespace)

> typescript-best-practices

Idiomatic TypeScript patterns for clean, maintainable code. Use when writing or refactoring TypeScript classes, functions, modules, or async logic. (triggers: **/*.ts, **/*.tsx, class, function, module, import, export, async, promise)

┌ stats

installs/wk0
░░░░░░░░░░
github stars341
██████████
first seenMar 17, 2026
└────────────

┌ repo

HoangNguyen0403/agent-skills-standard
by HoangNguyen0403
└────────────

┌ tags

#audit#auth#react#security
└────────────