skills.rest
PremModhaOfficial
PremModhaOfficialCOMMUNITY
Explore all skills by this author →
GitHub

frontend-security-patterns

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

1|Updated Apr 17, 2026
Search Tags:#csp#frontend-security#input-sanitization#xss-protection#auth-token#dompurify#iframe-protection
One-click install
npx skills add https://github.com/PremModhaOfficial/motadata-ai-pipeline --skill frontend-security-patterns
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-security-patterns
Source: https://github.com/PremModhaOfficial/motadata-ai-pipeline/tree/main/.claude/skills/frontend-security-patterns
Command: npx skills add https://github.com/PremModhaOfficial/motadata-ai-pipeline --skill frontend-security-patterns

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend security is often overlooked, leading to XSS, credential exposure, and weak content protections. This Skill provides actionable patterns and guidelines to build secure frontend code in Motadata SaaS apps.

Core Features & Use Cases

  • Token handling and storage rules for in-browser apps (memory-only access tokens, HttpOnly refresh cookies)
  • Input sanitization and safe rendering with DOMPurify and React auto-escaping
  • Content Security Policy recommendations and iframe protection practices
  • Security checklist and anti-pattern guidance for frontend teams

Quick Start

Apply these patterns when building UI components that handle user input or authentication to ensure secure rendering and storage.

Frequently Asked Questions about frontend-security-patterns

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

FAQPage Schema
How do I prevent XSS in React when rendering user-generated content?▼

Prevent XSS in React by relying on auto-escaping for standard rendering and applying DOMPurify sanitization for any raw HTML input. This ensures user-generated content is safely neutralized before display in SPA frontends.

Where should I store auth tokens in a single page application?▼

Store access tokens in-memory only within the SPA to prevent persistent exposure, and use HttpOnly cookies for refresh tokens. This pattern limits credential theft risk during frontend authentication flows.

What Content Security Policy headers should I use for frontend security?▼

Implement CSP headers to restrict resource loading and script execution, preventing unauthorized inline scripts. Proper Content Security Policy configuration mitigates injection risks in frontend applications.

Does this approach to input sanitization work with React and other SPA frameworks?▼

Yes, these frontend security patterns apply to React and other SPA frontends across authentication flows, form handling, and rendering. They provide framework-agnostic guidance for token storage and XSS protection.

What are the best practices for iframe protection in frontend applications?▼

Secure iframe usage by applying sandbox attributes and restrictive framing policies to prevent clickjacking. These iframe protection practices limit untrusted content from interacting with the parent DOM.

Related Skills

Explore More Software Engineering Skills→
ChrstprJohnChrstprJohn

frontend-security-coder

Prevent XSS in frontend applications by enforcing safe DOM manipulation and CSP configuration.

Community
Advanced
hoangminh46hoangminh46

web-security-frontend

Secure frontend web applications against XSS, CSRF, and insecure headers.

Community
Basic
AgentSecOpsAgentSecOps
183

api-spectral

Lint OpenAPI/AsyncAPI definitions with Spectral to enforce security and governance rules.

Official
Advanced
baselakkad585-makerbaselakkad585-maker

frontend-security-coder

Guide secure frontend coding for XSS prevention and CSP implementation.

Community
Advanced