skills.rest
monang404
monang404COMMUNITY
Explore all skills by this author →
GitHub

frontend-security-coder

Implements XSS prevention, CSP configuration, and secure DOM manipulation for frontend code.

2|Updated Jun 16, 2026
Search Tags:#input validation#secure coding#clickjacking#frontend security#content security policy#xss prevention#dom sanitization
One-click install
npx skills add https://github.com/monang404/lunawave --skill frontend-security-coder-monang404
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-security-coder
Source: https://github.com/monang404/lunawave/tree/main/.agent/skills/frontend-security-coder
Command: npx skills add https://github.com/monang404/lunawave --skill frontend-security-coder-monang404

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Client-side applications are vulnerable to XSS, clickjacking, open redirects, and insecure token storage, and developers often lack concrete guidance on writing security-first frontend code. ## Core Features & Use Cases - XSS Prevention & Sanitization: Enforces safe DOM manipulation (textContent over innerHTML), DOMPurify integration, and context-aware output encoding. - Content Security Policy & Browser Defenses: Configures CSP directives, nonce-based scripts, Trusted Types, Subresource Integrity, and frame-ancestors clickjacking protection. - Secure Auth & Navigation: Guides secure JWT storage, OAuth PKCE flows, WebAuthn, redirect allowlists, and safe external link handling. - Use Case: When building a comment feature that renders user-generated HTML, use this Skill to sanitize input with DOMPurify, apply a strict CSP, and validate all redirect URLs. ## Quick Start Review my frontend form component and implement XSS prevention, input sanitization, and a Content Security Policy for it.

Frequently Asked Questions about frontend-security-coder

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

FAQPage Schema
How do I prevent XSS in frontend JavaScript code?▼

Prevent XSS by using textContent instead of innerHTML for dynamic content, sanitizing user-generated HTML with DOMPurify, and applying context-aware encoding. Combine these with a strict Content Security Policy to block script injection.

How to configure Content Security Policy headers?▼

Configure CSP by defining script-src and style-src directives with nonces or hashes, eliminating inline scripts, and starting in report-only mode. Tighten the policy progressively while monitoring violation reports.

Should I store JWT tokens in localStorage or sessionStorage?▼

Token storage choice depends on your threat model: localStorage persists across sessions but is accessible to any script, while sessionStorage clears on tab close. This Skill covers secure storage patterns, token refresh handling, and cross-tab logout propagation.

When should I use this instead of a security auditor?▼

Use this Skill for hands-on secure coding tasks like implementing CSP, sanitizing inputs, or fixing client-side vulnerabilities. Use a security auditor for high-level audits, compliance assessments, threat modeling, and penetration testing planning.

Does clickjacking protection work during local development?▼

Frame-busting and X-Frame-Options should be applied in production or standalone deployments. During development, relax or disable these protections when the app is intentionally embedded in iframes for testing.

Related Skills

Explore More Software Engineering Skills→
n4igmen4igme

vuln-api

Identify API endpoints and insecure patterns in REST and GraphQL services.

Community
Advanced
Camilo8902Camilo8902

secure-headers-csp-builder

Implement security headers and a report-only CSP for Express.js applications.

Community
Advanced
pdparchitectpdparchitect
13

hunt-business-logic

Identify and validate business logic vulnerabilities in web applications.

Community
Advanced
efiadmefiadm

senior-security

Audit codebases for security vulnerabilities and misconfigurations.

Community
Advanced