frontend-security-coder

frontend-security-coder - Front-End Security Coding Expert

Skills Overview

A front-end security coding expert focused on hands-on guidance for XSS protection, output sanitization, and client-side security patterns.

Suitable Scenarios

1. Front-End Security Development and Implementation

When you need to write secure front-end code, use this skill to get practical guidance. This includes concrete coding tasks such as secure DOM manipulation, user input validation, Content Security Policy configuration, and third-party script integration.

2. Front-End Security Code Review

When you need to assess the security of existing front-end code, use this skill for professional evaluation. Focus on identifying client-side security issues such as XSS vulnerabilities, unsafe DOM manipulation, and missing input validation.

3. Front-End Security Architecture Design

When you need to design a front-end security solution, use this skill to obtain architecture recommendations. This includes architecture-level security considerations such as CSP policy design, authentication storage strategy, secure redirect handling, and clickjacking protection.

Core Functions

1. XSS Protection and Secure DOM Manipulation

Provide comprehensive XSS protection solutions, including secure DOM manipulation (textContent vs. innerHTML), dynamic content sanitization (DOMPurify integration), context-aware encoding, template safety, and secure rendering of user-generated content. Ensure that all dynamic content is properly validated and sanitized.

2. Content Security Policy (CSP) Configuration

A complete CSP implementation plan covering CSP header configuration, script source restrictions (nonce/hash-based), removal of inline scripts, stylesheet source control, violation report collection, and progressive CSP deployment. Help you effectively prevent script injection while maintaining functionality.

3. Comprehensive Client-Side Security Hardening

Cover multiple client-side security scenarios: input validation and sanitization, safe CSS handling, clickjacking protection, secure redirects and navigation, authentication and session management, browser security features (SRI, Trusted Types), third-party integration security, and PWA security.

Common Questions

What types of front-end XSS attacks are there? How can they be mitigated?

XSS attacks mainly fall into three categories:

Stored XSS: Malicious code is stored on the server and executed when victims access it

Reflected XSS: Malicious code is reflected and executed via URL parameters

DOM-based XSS: Malicious code is executed through client-side DOM manipulation

Mitigation methods:

Manipulate the DOM using textContent instead of innerHTML

Integrate sanitization libraries like DOMPurify to handle dynamic content

Apply correct context-specific encoding (HTML, JavaScript, URL)

Configure a strict Content Security Policy

Implement input validation (using allowlists)

Avoid unsafe APIs such as document.write

How do I configure a Content Security Policy (CSP)?

CSP configuration steps:

Base configuration: Set the Content-Security-Policy response header

Content-Security-Policy: default-src 'self'; script-src 'self' 'nonce-random-value'; style-src 'self' 'nonce-random-value'

Script source control: Use nonce or hash to restrict executable scripts

<script nonce="random-value">...</script>

Report-only mode: Test first using Content-Security-Policy-Report-Only

Content-Security-Policy-Report-Only: default-src 'self'; report-uri /csp-violation

Progressively tighten: Start with a more permissive policy and gradually tighten restrictions

Monitor violations: Collect and analyze CSP violation reports to adjust the policy

What is the difference between front-end secure coding and security auditing?

frontend-security-coder (front-end security coding):

Focuses on writing secure front-end code

Hands-on coding, implementing XSS protection, and CSP configuration

Secure DOM operations and client-side vulnerability fixes

Code-level security implementation

security-auditor (security auditing):

Focuses on evaluating security posture

Advanced security audits, compliance assessments, and DevSecOps process design

Threat modeling, security architecture reviews, and penetration testing planning

Strategic and process-level security assessments

In short: frontend-security-coder is “writing secure code hands-on,” while security-auditor is “checking the security posture.” If you need to implement front-end security features, use frontend-security-coder; if you need comprehensive security assessment or auditing, use security-auditor.