防止XSS需对用户输入进行HTML实体编码，如用textContent替代innerHTML；2. 使用React、Vue等框架默认转义机制；3. 富文本使用DOMPurify过滤。核心是不信任用户输入，始终安全处理数据。
在使用JavaScript动态生成HTML内容时，XSS（跨站脚本攻击）是一个常见且危险的安全问题。攻击者可以通过注入恶意脚本，在用户浏览器中执行非授权操作，比如窃取Cookie、劫持会话或篡改页面内容。要有效防止这类攻击，关键在于对数据进行正确处理和输出编码。
1. 始终对用户输入进行转义
任何来自用户的数据，包括表单输入、URL参数、API返回内容，都应视为不可信的。在插入到DOM前必须进行HTML实体编码。
- 将 转为 zuojiankuohaophpcn
- 将 > 转为 youjiankuohaophpcn
- 将 " 转为 "
- 将 ' 转为 '
- 将 & 转为 &
可以封装一个简单的转义函数：
function escapeHtml(text) {const div = document.createElement('div');
div.textContent = text;
return div.innerHTML;
}
2. 避免使用 innerHTML，优先使用 textContent
innerHTML 会解析字符串中的HTML标签并执行其中的脚本，是XSS的主要入口之一。
立即学习“前端免费学习笔记（深入）”；
- 如果只是插入纯文本，始终使用 textContent
- 例如：element.textContent = userInput; 是安全的
- 而 element.innerHTML = userInput; 可能执行恶意脚本
3. 使用现代框架的安全机制
React、Vue等现代前端框架默认会对插值内容进行转义，能有效防止大部分XSS。
- React 中使用 {variable} 会自动转义
- 如需渲染HTML，必须显式使用 dangerouslySetInnerHTML，这会提醒开发者注意风险
- Vue 的 {{ }} 插值也是默认转义的
4. 严格校验和过滤富文本内容
如果业务确实需要插入HTML（如富文本编辑器内容），不能简单转义，但也不能直接插入。
- 使用专门的库如 DOMPurify 对HTML进行清洗
- 只允许白名单内的标签和属性（如 p、strong、a[href]）
- 示例：element.innerHTML = DOMPurify.sanitize(dirtyHtml);
基本上就这些。核心原则是：不信任用户输入，不直接拼接HTML，优先使用安全的API。只要在数据插入DOM前做好转义或过滤，就能有效避免绝大多数XSS问题。
