skills.rest
MaiconGambini
MaiconGambiniCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-security-coder

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

Updated Jul 29, 2026
Search Tags:#clickjacking#web security#input sanitization#frontend security#content security policy#xss prevention#dompurify
One-click install
npx skills add https://github.com/MaiconGambini/opencode-harness-guide --skill frontend-security-coder-maicongambini
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-security-coder
Source: https://github.com/MaiconGambini/opencode-harness-guide/tree/main/skills/frontend-security-coder
Command: npx skills add https://github.com/MaiconGambini/opencode-harness-guide --skill frontend-security-coder-maicongambini

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Client-side vulnerabilities like XSS, clickjacking, and open redirects expose users to attacks when frontend code handles untrusted input unsafely. This Skill provides hands-on guidance for writing secure frontend code that prevents these browser-based attacks. ## Core Features & Use Cases - XSS Prevention and Sanitization: Safe DOM manipulation with textContent, DOMPurify integration, and context-aware output encoding for user-generated content. - Content Security Policy Configuration: Directive setup, nonce-based scripts, violation reporting, and progressive CSP deployment. - Secure Authentication and Navigation: Token storage patterns, WebAuthn/PKCE implementation, redirect validation, and clickjacking protection with frame-ancestors. - Use Case: When building a comment feature that renders user-submitted rich text, use this Skill to sanitize the HTML with DOMPurify, configure a strict CSP, and validate all redirect URLs against an allowlist. ## Quick Start Ask the agent to review your frontend component for XSS risks and implement secure DOM manipulation with DOMPurify sanitization and a Content Security Policy.

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 rich HTML with DOMPurify before insertion. Combine this with context-aware output encoding and a strict Content Security Policy to block script injection.

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

Start with report-only mode to collect violations, then enforce directives like script-src with nonces or hashes and strict-dynamic. Eliminate inline scripts and event handlers, and tighten the policy progressively while testing compatibility.

What is the difference between a frontend security coder and a security auditor?▼

A frontend security coder writes secure client-side code, implementing XSS prevention, CSP, and secure DOM manipulation. A security auditor performs high-level assessments, threat modeling, compliance reviews, 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.

How do I securely store authentication tokens in the browser?▼

Prefer short-lived tokens with secure refresh handling over long-lived localStorage entries, which are exposed to XSS. Implement automatic logout on inactivity, cross-tab logout propagation via storage events, and use PKCE for OAuth flows.

Related Skills

Explore More Software Engineering Skills→
leifericfleifericf
5

check-security

Review code shards for untrusted input and security vulnerabilities.

Community
Advanced
vecearvecear

secure-headers-csp-builder

Plan staged security header and CSP rollout with Helmet.js.

Community
Advanced
okatech-orgokatech-org

backend-security-coder

Implement secure backend coding practices for API endpoints and authentication.

Community
Advanced
lemonlqflemonlqf

healthcheck

Audit host security and harden OpenClaw configurations via CLI.

Community
Intermediate