XSS攻击主要分为反射型、存储型和DOM型，通过输入验证、输出编码、CSP策略及避免危险JavaScript操作实现多层防御。
跨站脚本攻击（XSS）是Web应用中最常见的安全漏洞之一，JavaScript作为前端开发的核心语言，在动态内容渲染中扮演关键角色，也成为了XSS攻击的主要入口。要有效防范XSS，开发者必须理解其原理，并在编码实践中落实防御措施。
理解XSS的三种主要类型
XSS攻击通过在网页中注入恶意脚本，使脚本在用户浏览器中执行，从而窃取数据、劫持会话或伪造操作。主要分为三类：
- 反射型XSS：恶意脚本通过URL参数传入，服务器将其“反射”回响应页面。常见于搜索结果、错误提示等场景。
- 存储型XSS：攻击者提交的脚本被永久保存在服务器（如评论、用户资料），其他用户访问时自动执行。
- DOM型XSS：不经过服务器，仅通过JavaScript在客户端修改DOM结构触发，例如通过location.hash读取并插入未过滤的内容。
输入验证与输出编码
防御XSS的核心原则是：永远不要信任用户输入，始终对输出进行上下文相关的编码。
- 对所有用户输入进行白名单校验，比如限制特殊字符、长度和格式。
- 在将数据插入HTML、JavaScript、URL或CSS上下文时，使用对应的编码方式。例如，HTML实体编码可防止标签解析，JS转义可阻止代码执行。
- 推荐使用成熟库如DOMPurify清理HTML内容，它能安全地清除危险标签和属性。
使用内容安全策略（CSP）构建纵深防线
CSP是一种HTTP响应头机制，用于限制页面可以加载和执行的资源，有效缓解XSS影响。
立即学习“Java免费学习笔记（深入）”；
- 设置Content-Security-Policy: default-src 'self'可禁止加载外部脚本。
- 避免使用'unsafe-inline'和'unsafe-eval'，防止内联脚本和动态代码执行。
- 配合nonce或hash机制，允许特定的合法内联脚本运行。
避免危险的JavaScript操作
某些JavaScript API极易引发XSS，需谨慎使用：
- 避免直接操作innerHTML、outerHTML，优先使用textContent或innerText。
- 不要用eval()、new Function()执行用户输入。
- 处理URL时，使用encodeURIComponent对参数编码，防止JavaScript伪协议（如javascript:）注入。
基本上就这些。XSS防御需要从输入、输出、执行环境多层设防，结合编码规范与安全策略，才能构建可靠的前端防护体系。
