Secure Frontend Code Generation and Best Practices

Frontend Security Coder is a hands-on skill for client-side security coding: XSS prevention, safe DOM manipulation, Content Security Policy, and secure browser-facing patterns. It draws a clear line against a security-auditor role: use this skill for hands-on frontend security coding, XSS prevention, CSP configuration, secure DOM manipulation and client-side vulnerability fixes, while a security-auditor agent handles high-level audits, compliance assessments and threat modeling.

Its capability areas include:

• Output handling and XSS: preferring textContent over innerHTML, DOMPurify and other sanitization libraries for dynamic content, context-aware HTML/JS/URL encoding, secure templating with auto-escaping, and safe rendering of user-generated markdown and rich text.
• Content Security Policy: nonce-based and hash-based script sources, strict-dynamic policies, eliminating inline scripts, CSP violation reporting, and progressive, gradually tightened CSP rollout.
• Input validation: allowlist-based client-side validation, ReDoS-safe regular expressions, file-upload type and size checks, URL and protocol validation, and rate-limited real-time AJAX validation.
• CSS handling: dynamic style sanitization, avoiding inline styles in favor of external stylesheets or CSS-in-JS, CSS injection and expression prevention, and subresource integrity for third-party stylesheets.
• Clickjacking protection: frame detection is explicitly only a supplementary UI signal, not a frame-authorization boundary - the real protection is a server-delivered X-Frame-Options (DENY/SAMEORIGIN) or CSP frame-ancestors policy, with an explicit allowed-embedding policy defined per environment rather than disabled for convenience.
• Secure redirects: URL allowlist validation for redirects, preferring fixed-destination or identifier-based redirects over open parameters, History API state security, and rel="noopener noreferrer" on target="_blank" links.
• Authentication and sessions: secure JWT storage (weighing localStorage against sessionStorage), automatic session timeout, cross-tab logout propagation, WebAuthn/FIDO2 biometric auth, and PKCE for OAuth.
• Browser security features: Subresource Integrity for CDN resources, Trusted Types for DOM sink protection, Referrer Policy, and CORP/COEP cross-origin isolation.
• Third-party, PWA and mobile security: iframe sandboxing and postMessage validation for widgets, secure Service Worker caching, push-notification payload validation, and preserving user zoom in viewport configuration.

The bundled resources/implementation-playbook.md gives a concrete procedure: identify every untrusted text, HTML, URL and cross-window message; prefer rendering as text and use an established sanitizer only where authored HTML is genuinely required; enforce URL schemes and destination rules, validate message origin, and treat client-side validation as usability feedback only, with the server coordinating headers and authorization; and test with an inert markup payload rendered as text, disallowed URL schemes, and messages from another origin, inspecting the rendered DOM, network effects and console while preserving zoom and keyboard access. Its worked example is a profile biography containing markup, rendered as text unless rich text is explicitly required, verified so no extra element or request appears and legitimate text stays readable.

Use it for frontend security coding tasks and workflows, or for client-side vulnerability fixes and CSP configuration. Example requests include secure DOM manipulation for user-generated content, CSP configuration that preserves functionality, clickjacking protection for sensitive operations, and secure third-party widget integration with iframe sandboxing. Do not use it for tasks unrelated to frontend security, or where security-auditor's high-level audit and compliance role fits better. The playbook's explicit limitations: frame detection and frame-busting scripts do not replace a frame-ancestors response policy, and browser storage is never a safe place for server secrets.

Playbook inputs are the component, rendering framework, trusted-content policy, session design and a browser test route. Output is a verification report naming the actual files or configuration changed, the checks performed, the observed results and any untested environment, with evidence kept sufficient to reproduce the conclusion.

Named tools and standards include DOMPurify, WebAuthn/FIDO2, Trusted Types, Subresource Integrity, and CSP directives such as nonce, strict-dynamic and frame-ancestors.

It suits frontend developers implementing or fixing client-side security directly in code, who need XSS prevention, CSP configuration, secure redirects and token storage backed by a concrete adversarial test procedure.