frontend-security-coder

frontend-security-coder - 前端安全编码专家

技能概述

前端安全编码专家，专注于 XSS 防护、输出清理和客户端安全模式的实战编码指导。

适用场景

1. 前端安全开发与实现

当你需要编写安全的前端代码时，使用此技能获取实战指导。包括安全的 DOM 操作、用户输入验证、Content Security Policy 配置、第三方脚本集成等具体编码任务。

2. 前端安全代码审查

当你需要审查现有前端代码的安全性时，使用此技能进行专业评估。专注于识别 XSS 漏洞、不安全的 DOM 操作、输入验证缺失等客户端安全问题。

3. 前端安全架构设计

当你需要设计前端安全方案时，使用此技能获取架构建议。包括 CSP 策略设计、认证存储方案、重定向安全处理、点击劫持防护等架构级安全考虑。

核心功能

1. XSS 防护与安全 DOM 操作

提供全面的 XSS 防护方案，包括安全的 DOM 操作（textContent vs innerHTML）、动态内容清理（DOMPurify 集成）、上下文感知编码、模板安全、用户生成内容安全渲染等。确保所有动态内容都经过适当验证和清理。

2. Content Security Policy 配置

完整的 CSP 实施方案，涵盖 CSP 头配置、脚本源限制（基于 nonce/hash）、内联脚本消除、样式源控制、违规报告收集、渐进式 CSP 部署等。帮助你在保持功能的同时有效防止脚本注入。

3. 综合客户端安全防护

覆盖多种客户端安全场景：输入验证与清理、CSS 处理安全、点击劫持防护、安全重定向与导航、认证与会话管理、浏览器安全特性（SRI、Trusted Types）、第三方集成安全、PWA 安全等。

常见问题

前端 XSS 攻击有哪些类型？如何防护？

XSS 攻击主要分为三类：

存储型 XSS: 恶意代码存储在服务器，受害者访问时执行

反射型 XSS: 恶意代码通过 URL 参数反射执行

DOM 型 XSS: 恶意代码通过客户端 DOM 操作执行

防护方法：

使用 textContent 而非 innerHTML 操作 DOM

集成 DOMPurify 等清理库处理动态内容

根据上下文进行正确的编码（HTML、JavaScript、URL）

配置严格的 Content Security Policy

实施输入验证（白名单方式）

避免 document.write 等不安全 API

Content Security Policy (CSP) 如何配置？

CSP 配置步骤：

基础配置：设置 Content-Security-Policy 响应头

Content-Security-Policy: default-src 'self'; script-src 'self' 'nonce-随机值'; style-src 'self' 'nonce-随机值'

脚本源控制：使用 nonce 或 hash 限制可执行脚本

<script nonce="随机值">...</script>

报告模式：先用 Content-Security-Policy-Report-Only 测试

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

渐进收紧：从宽松策略开始，逐步收紧限制

监控违规：收集并分析 CSP 违规报告，调整策略

前端安全编码和安全审计有什么区别？

frontend-security-coder（前端安全编码）：

专注于编写安全的前端代码

实战编码、XSS 防护实现、CSP 配置

安全 DOM 操作、客户端漏洞修复

代码级别的安全实现

security-auditor（安全审计）：

专注于评估安全状况

高级安全审计、合规评估、DevSecOps 流程设计

威胁建模、安全架构评审、渗透测试规划

战略和流程层面的安全评估

简言之：frontend-security-coder 是"动手写安全代码"，security-auditor 是"检查安全状况"。如果你需要实现前端安全功能，使用 frontend-security-coder；如果你需要全面的安全评估或审计，使用 security-auditor。