防范XSS攻击需从输入验证、输出编码和CSP策略入手，严格过滤用户输入，使用textContent替代innerHTML，配合DOMPurify处理富文本，启用CSP限制脚本来源，针对存储型、反射型和DOM型XSS采取差异化防护，并利用React、Vue等框架的内置转义机制及WAF等工具实现多层防御。
面对现代Web应用中的安全挑战，JavaScript作为前端开发的核心语言，在提升用户体验的同时也带来了潜在风险，尤其是跨站脚本攻击（XSS）。XSS攻击通过在网页中注入恶意脚本，窃取用户数据、劫持会话或执行非法操作。要有效防范这类攻击，开发者必须从输入处理、输出编码和安全策略配置等多方面入手。
正确处理用户输入与输出
防止XSS的第一道防线是严格验证和过滤所有用户输入。无论是表单提交、URL参数还是API请求体，任何来自用户的输入都应被视为不可信。
- 对输入内容进行白名单校验，只允许符合预期格式的数据通过，比如邮箱、手机号等有固定模式的字段
- 避免直接将用户输入插入DOM，尤其是使用innerHTML、document.write等危险方法
- 推荐使用textContent代替innerHTML来设置文本内容，这样可以自动转义HTML标签
- 若需渲染富文本，应使用经过严格审查的第三方库（如DOMPurify）对HTML内容进行净化处理
实施内容安全策略（CSP）
内容安全策略是一种由浏览器支持的安全机制，能有效限制页面可执行的资源来源，大幅降低XSS攻击的成功率。
- 通过HTTP响应头Content-Security-Policy定义允许加载的脚本源，例如只允许同源脚本执行
- 禁止使用内联脚本（unsafe-inline）和eval()等动态执行方式
- 设置script-src 'self'限制仅加载本站脚本，配合nonce或hash机制允许特定安全脚本运行
- 定期监控CSP违规报告，通过report-uri或report-to收集异常行为用于分析
防御常见XSS类型
XSS分为存储型、反射型和DOM型三种，每种攻击场景不同，防护手段也需针对性设计。
立即学习“Java免费学习笔记（深入）”；
- 存储型XSS：用户提交的数据被永久保存在服务器（如评论、资料页），展示时必须做HTML实体编码，如<转为
- 反射型XSS：恶意脚本通过URL参数传入并立即返回页面，应对查询参数进行解码后重新编码输出
- DOM型XSS：完全在客户端由JavaScript拼接导致，避免用location.href、document.referrer等直接写入页面
使用安全工具与框架内置机制
现代前端框架大多提供默认防护措施，合理利用可减少手动编码带来的疏漏。
- React默认对JSX中的变量进行转义，但使用dangerouslySetInnerHTML时仍需谨慎
- Vue模板绑定自动进行HTML转义，避免使用v-html渲染不可信内容
- 引入静态分析工具（如ESLint插件）检测潜在XSS风险代码
- 部署WAF（Web应用防火墙）作为补充防护层，识别并拦截典型攻击载荷
基本上就这些。XSS防护不是一劳永逸的工作，需要在开发流程、代码审查和线上监控中持续关注。只要坚持“不信任用户输入、不随意执行脚本、强制安全策略”的原则，就能显著提升应用的安全性。
