skills.rest
Hamzaoui-Louai
Hamzaoui-LouaiCOMMUNITY
Explore all skills by this author →
GitHub

frontend-security-coder

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

1|Updated Aug 4, 2026
Search Tags:#input validation#clickjacking#frontend security#content security policy#xss prevention#dompurify#dom security
One-click install
npx skills add https://github.com/Hamzaoui-Louai/LEAN-gym-dashboard-frontend --skill frontend-security-coder-hamzaoui-louai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-security-coder
Source: https://github.com/Hamzaoui-Louai/LEAN-gym-dashboard-frontend/tree/main/.opencode/skills/frontend-security-coder
Command: npx skills add https://github.com/Hamzaoui-Louai/LEAN-gym-dashboard-frontend --skill frontend-security-coder-hamzaoui-louai

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Frontend applications are exposed to client-side attacks like XSS, clickjacking, and open redirects, and developers often lack concrete guidance on writing secure UI code. This Skill provides hands-on implementation patterns for building security-first frontend code. ## Core Features & Use Cases - XSS Prevention and Sanitization: Safe DOM manipulation with textContent, DOMPurify integration, and context-aware output encoding. - Content Security Policy Configuration: Directive setup, nonce-based scripts, violation reporting, and progressive CSP deployment. - Secure Auth and Navigation: Token storage guidance, clickjacking protection, redirect validation, and third-party integration security. - Use Case: When rendering user-generated comments in a React app, use this Skill to sanitize HTML with DOMPurify, configure a strict CSP, and validate all outbound redirect URLs. ## Quick Start Review my frontend component that renders user-submitted HTML and make it safe against XSS attacks.

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 when rendering user-generated content?▼

Use textContent instead of innerHTML for plain text, and sanitize any HTML with DOMPurify before insertion. Combine this with context-aware output encoding and a strict Content Security Policy to block injected scripts.

How to configure Content Security Policy for a frontend app?▼

Start with report-only mode to collect violations, then enforce directives like script-src with nonces or hashes and eliminate inline scripts. Tighten the policy progressively while testing compatibility with existing functionality.

Should I store JWT tokens in localStorage or sessionStorage?▼

Both are accessible to JavaScript and vulnerable to XSS token theft, so prefer httpOnly cookies when possible. If browser storage is required, sessionStorage limits exposure to the tab lifetime, and strict XSS defenses become critical.

How do I protect my site from clickjacking attacks?▼

Set the CSP frame-ancestors directive or X-Frame-Options header to control which sites can embed your pages. Add JavaScript frame-busting and visual confirmation for sensitive operations, applying these protections in production environments.

When should I use a security auditor instead of secure coding guidance?▼

Use secure coding guidance for hands-on implementation like sanitization, CSP setup, and DOM security fixes. Use a security auditor for high-level assessments, compliance reviews, threat modeling, and penetration testing planning.

Related Skills

Explore More Software Engineering Skills→
HmbownHmbown

met-guard

Apply a directional guard to a single attack surface and document protected faces.

Community
Intermediate
awsaws
2.5k

remediating-with-aws-security-agent

Export AWS Security Agent findings and triage them into a prioritized remediation plan.

Official
Advanced
pelcherspelchers

implementing-clerk-authentication

Automate Clerk authentication, webhook processing, and RBAC in Next.js applications.

Community
Advanced
awesome-skillsawesome-skills
1.9k

code-review-skill

Reviews pull requests across 20+ languages using structured four-phase analysis and severity-labeled feedback.

Official
Advanced