skills.rest
mauriciodelrio
mauriciodelrioCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/mauriciodelrio/delriodev-skills --skill security-rules-mauriciodelrio
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
mauriciodelriomauriciodelrio
3

vite-project-structure

Create feature-first Vite + React SPA structures with centralized routing and path aliases.

Community
Intermediate
PremModhaOfficialPremModhaOfficial
1

frontend-security-patterns

Apply frontend security patterns for token storage, input sanitization, and content rendering.

Community
Advanced
mamamoumamamou
16

react-security

Audit React/Next.js projects for OWASP 2025-aligned security risks and remediation plans.

Community
Advanced
framerslabframerslab

code-safety

Scan LLM-generated code for injection, XSS, and security vulnerabilities.

Official
Intermediate