XSS防护需多层防御，首先验证过滤用户输入，使用白名单、长度限制及DOMPurify等库清理HTML；其次在输出时按上下文进行编码，如HTML实体、JavaScript字符串和URL编码；再通过CSP头限制资源加载，禁止内联脚本与eval执行；最后避免innerHTML、document.write等危险DOM操作，采用安全API替代。
跨站脚本攻击（XSS）是Web应用中最常见的安全漏洞之一，攻击者通过在页面中注入恶意脚本，窃取用户信息、劫持会话或执行非授权操作。JavaScript作为前端核心语言，在处理用户输入和动态渲染内容时极易成为XSS的突破口。要有效防护XSS，必须从数据输入、输出编码、内容安全策略等多方面入手。
1. 对用户输入进行验证与过滤
任何来自用户的输入都应被视为不可信的。在前端和后端都要对输入内容进行严格校验。
- 限制输入类型：使用正则表达式或白名单机制，只允许合法字符，如邮箱格式、手机号等。
- 长度限制：防止过长的输入用于构造复杂脚本。
- 过滤危险关键词：如<script>、javascript:、onerror等，但不能仅依赖关键字过滤，容易被绕过。
- 使用安全库处理输入：例如DOMPurify，可安全地清理HTML内容，保留合法标签，移除潜在恶意代码。
2. 输出时进行上下文相关的编码
在将数据插入到HTML、JavaScript、URL等不同上下文时，必须使用对应的编码方式，防止内容被解析为可执行代码。
- HTML实体编码：将<转为，>转为>等，适用于插入文本内容到HTML中。
- JavaScript字符串编码：当数据嵌入JS代码块时，需对引号、反斜杠、换行符等进行转义。
- URL编码：用于拼接URL参数，避免注入javascript:alert(1)这类伪协议。
- 推荐使用成熟编码库，如he.js进行HTML转义，避免手动实现出错。
3. 启用内容安全策略（CSP）
CSP是一种强有力的防御机制，通过HTTP响应头限制页面可以加载和执行的资源，大幅降低XSS影响。
立即学习“Java免费学习笔记（深入）”；
- 设置Content-Security-Policy: default-src 'self';，禁止加载外部不可信资源。
- 禁止内联脚本：script-src 'self'，阻止<script>alert(1)</script>和onclick="..."执行。
- 禁止eval()和new Function()：script-src 'unsafe-eval'不开启。
- 报告违规行为：report-uri /csp-report，便于监控潜在攻击。
4. 避免危险的DOM操作
JavaScript中某些API会直接执行字符串为代码，极易引发DOM-based XSS。
- 禁用innerHTML：改用textContent插入纯文本。
- 避免document.write()：特别是在处理用户输入后调用。
- 谨慎使用eval()、setTimeout(string)、setInterval(string)。
- 动态创建脚本时，使用createElement('script')并设置src，而非写入代码字符串。
基本上就这些。XSS防护需要层层设防，不能依赖单一手段。开发者应建立安全编码习惯，结合自动化检测工具和定期审计，才能有效抵御XSS攻击。
