Secure Frontend Code Generation and Best Practices

Frontend Security Coder is a skill for hands-on client-side security implementation: XSS prevention, secure DOM manipulation, Content Security Policy, and secure user-interaction patterns for building security-first frontend applications.

Its output-handling guidance covers preferring textContent over innerHTML, sanitizing dynamic content with libraries like DOMPurify, context-aware encoding (HTML entity, JS string escaping, URL encoding), secure templating with auto-escaping, safe rendering of user-generated and rich-text content, and modern alternatives to document.write. Its CSP guidance covers header configuration and report-only rollout, nonce/hash/strict-dynamic script restrictions, eliminating inline scripts and event handlers, style-src control, and collecting CSP violation reports to progressively tighten policy. Input validation covers client-side form validation, allowlist-based validation over denylists, ReDoS-safe regex patterns, file-upload restrictions, URL/protocol validation, and rate-limited real-time AJAX validation. CSS-handling security covers sanitizing dynamic styles, preferring external stylesheets or sandboxed CSS-in-JS over inline styles, preventing CSS injection and expression attacks, CSP style-src integration, safe CSS custom properties, and subresource integrity for third-party stylesheets.

Clickjacking protection covers frame detection (including the Intersection Observer API), frame-busting scripts, X-Frame-Options, CSP frame-ancestors, SameSite cookies, and visual confirmation for critical actions - applied in production only, and relaxed in development when the app is intentionally embedded in an iframe. Secure redirects and navigation cover allowlist-validated redirect targets, open-redirect prevention via parameterized or identifier-based redirects, safe URL/query/fragment handling, History API state security, rel="noopener noreferrer" on external links, and deep-link/path-traversal validation. Authentication and session management cover secure JWT storage (weighing localStorage against sessionStorage), automatic session timeout, multi-tab logout synchronization, WebAuthn/FIDO2 biometric auth, OAuth PKCE and state-parameter validation, and secure password field handling. Browser security features covered include Subresource Integrity, Trusted Types for DOM-sink protection, Feature Policy, HTTPS/mixed-content enforcement, Referrer Policy, and CORP/COEP cross-origin isolation. Third-party integration security spans CDN SRI and fallback strategies, iframe-sandboxed and postMessage-secured widgets, privacy-preserving analytics, OAuth-based social integrations, PCI-compliant tokenized payment forms, and XSS-hardened chat widgets. It also covers Progressive Web App security (service worker caching/update security, manifest configuration, push-notification payload validation, secure offline storage) and mobile/responsive security (touch-gesture validation, viewport lockdown for sensitive forms, device-API permission handling).

Use this skill for hands-on frontend security coding - implementing XSS prevention, configuring CSP, writing secure DOM manipulation, and fixing client-side vulnerabilities. Use a security-auditor skill instead for high-level security audits, compliance assessments, DevSecOps pipeline design, threat modeling, or penetration-test planning - the key difference is that this skill writes secure frontend code, while an auditor assesses security posture.

Input is a frontend feature or component with a security concern (rendering user content, handling redirects, storing auth tokens, embedding third-party widgets). Output is secure implementation code plus configuration (CSP headers, SRI hashes, allowlists) and a response approach that assesses the threat model, implements secure DOM handling, configures CSP, validates inputs, adds clickjacking and redirect protections, applies browser security features, secures authentication, and verifies the result with both automated and manual testing.

It draws on browser-native security mechanisms and standards - CSP, Trusted Types, Subresource Integrity, Feature Policy, CORP/COEP cross-origin isolation, and WebAuthn/FIDO2 - plus named libraries like DOMPurify for sanitization and OAuth/PKCE for authorization flows.

Frontend developers implementing client-side security controls - XSS prevention, CSP, secure redirects, session/token handling, and safe third-party integrations - as part of writing the application code itself, distinct from a security team auditing it afterward.