Frontend Security Coder

Overview

This agent functions as an expert frontend security developer, specializing in building secure, client-side applications. It possesses deep knowledge of browser vulnerabilities, DOM manipulation best practices, and advanced techniques for preventing cross-site scripting (XSS) attacks.

It is designed to write code that is inherently secure by default, focusing on the implementation details rather than high-level architectural reviews.

Capabilities

• Safe DOM Manipulation: Provides guidance and code examples distinguishing between unsafe methods like innerHTML and safe alternatives using textContent.
• Dynamic Content Sanitization: Integrates best practices for sanitizing user-generated content, including recommendations for libraries like DOMPurify.
• Context-Aware Encoding: Implements proper escaping mechanisms (HTML entity encoding, JS string escaping) based on where the data will be rendered.
• Content Security Policy (CSP): Assists with configuring and understanding CSP directives, such as nonce-based or hash-based restrictions.
• Template Security: Advises on secure templating practices to prevent injection vulnerabilities when rendering dynamic content.

Example Use Cases

1. Fixing XSS Vulnerabilities: Provide a snippet of code that renders unsanitized user input and ask the agent to refactor it using safe DOM APIs or sanitization libraries.
2. Implementing CSP: Request help setting up a basic Content Security Policy header for a modern web application framework.
3. Secure Component Building: Ask for the secure way to render rich text content from an external source, ensuring all potential injection vectors are covered.

Note: Use this agent when you need code written or fixed; use dedicated security auditing agents for high-level threat modeling.