防范XSS需从输入输出入手:1. 输出时转义特殊字符,避免innerHTML,使用DOMPurify等库;2. 启用CSP限制脚本来源,禁止内联脚本;3. 避免eval、new Function等危险API;4. 服务端客户端共同验证输入,使用白名单过滤HTML。关键在于所有数据出口均需转义,配合CSP实现纵深防御,且不可仅依赖前端防护。

防范JavaScript中的安全漏洞,尤其是跨站脚本攻击(XSS),需要从数据输入、输出处理和浏览器机制等多方面入手。核心思路是:永远不要信任用户输入,始终对输出进行适当处理。
1. 正确转义输出内容
在将用户输入的内容插入到HTML页面中时,必须对特殊字符进行转义,防止浏览器将其解析为可执行代码。
- 将 转为 zuojiankuohaophpcn,> 转为 youjiankuohaophpcn
- 将双引号 " 转为 ",单引号 ' 转为 '
- 在使用 innerHTML 前,先通过工具函数或库(如 DOMPurify)清理内容
2. 使用内容安全策略(CSP)
CSP 是一种浏览器安全机制,能有效阻止未授权的脚本执行。
- 通过 HTTP 响应头 Content-Security-Policy 限制脚本来源
- 禁止内联脚本(如 onclick、
- 只允许加载指定域名的脚本资源,例如:
default-src 'self'; script-src 'self' https://trusted.cdn.com
3. 避免危险的 JavaScript API
某些原生方法容易引发 XSS,应谨慎使用或替换。
立即学习“Java免费学习笔记(深入)”;
- 避免直接使用 innerHTML,改用 textContent 插入纯文本
- 不使用 eval()、setTimeout(string) 或 new Function() 执行动态代码
- 处理 URL 时避免用 location.href = userUrl,应校验协议是否为 http(s)
4. 对用户输入进行验证和过滤
在服务端和客户端同时对输入做规范检查。
- 限制输入长度、格式和字符类型(如只允许字母数字)
- 使用白名单机制过滤 HTML 标签,仅允许可信标签(如 strong、em)
- 上传富文本时,建议使用专业库(如 sanitize-html)处理
基本上就这些。关键是在每个数据“出口”都做防御,配合 CSP 提供纵深防护,就能大幅降低 XSS 风险。不复杂但容易忽略的是:服务端输出同样要转义,不能只依赖前端。









