security-rules

Secure React frontends with XSS prevention, CSP headers, and token protection.

3|Updated Apr 12, 2026

Search Tags:#security #frontend #xss #nextjs #csp #vite #token

Ready to run

npx skills add https://github.com/mauriciodelrio/delriodev-skills --skill security-rules-mauriciodelrio

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: security-rules
Source: https://github.com/mauriciodelrio/delriodev-skills/tree/main/es-skills/software/frontend/security-rules
Command: npx skills add https://github.com/mauriciodelrio/delriodev-skills --skill security-rules-mauriciodelrio

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend applications are exposed to XSS, insecure token storage, weak CSP, and misconfigured security headers, leading to potential breaches and data leaks.

Core Features & Use Cases

XSS Prevention: Guidance on using DOMPurify and safe link handling to sanitize user‑generated HTML.
Content Security Policy: Middleware for Next.js that generates nonce‑based CSP headers.
Secure Token Storage: HttpOnly cookies for Next.js and in‑memory token handling for Vite SPA.
Security Headers: Recommended headers such as HSTS, X‑Frame‑Options, and Referrer‑Policy.
CORS & Environment Validation: Whitelisted origins and Zod schemas for safe environment variable parsing.

Quick Start

Prompt the skill to secure the current frontend project by adding CSP middleware, configuring secure cookies, and sanitizing user‑generated HTML.

Frequently Asked Questions about security-rules

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

FAQPage Schema

How do I prevent XSS in a React frontend application?▼

Preventing XSS in a React frontend involves sanitizing user-generated HTML using DOMPurify and implementing safe link handling to neutralize malicious scripts.

How do I configure Content Security Policy headers in Next.js?▼

Configuring Content Security Policy headers in Next.js requires setting up middleware that generates dynamic nonce-based CSP headers for secure resource loading.

What is the best way to store authentication tokens securely in a Vite SPA?▼

Securing authentication tokens in a Vite SPA is best achieved through in-memory token handling, which prevents token leaks to external scripts.

Does this security approach work with both Next.js and Vite?▼

Yes, this security approach applies to React-based projects using both Next.js and Vite SPA, providing tailored token handling and CSP middleware configurations for each framework.

How do I validate environment variables with Zod schemas for frontend security?▼

Validating environment variables with Zod schemas involves parsing and whitelisting safe origins, ensuring that insecure configuration values do not expose the frontend to data leaks.

What security headers should I add to protect my web app from data leaks?▼

Essential security headers to prevent data leaks include HSTS, X-Frame-Options, and Referrer-Policy, which protect against downgrade attacks, clickjacking, and information exposure.