防范XSS攻击需全程设防，首先处理用户输入输出时应避免innerHTML改用textContent，富文本使用DOMPurify过滤；其次启用CSP策略限制资源加载，禁止内联脚本；再者安全操作DOM，采用createElement和addEventListener，校验URL跳转目标；最后在JavaScript中正确转义数据并序列化，防止上下文误解析。
防范XSS攻击是Web开发中不可忽视的一环，尤其在大量使用JavaScript的现代前端应用中。XSS（跨站脚本攻击）通过在网页中注入恶意脚本，盗取用户
信息、劫持会话或执行非法操作。以下是针对JavaScript环境下的实用防护策略。
正确处理用户输入与输出
所有来自用户的输入都应被视为不可信数据，包括表单内容、URL参数、API响应等。在将这些数据插入页面前必须进行处理。
• 对动态插入HTML的内容使用文本赋值而非innerHTML，例如用textContent代替innerHTML可避免脚本执行• 若必须插入富文本，应使用经过验证的DOMPurify等库进行过滤，移除script、onerror等危险标签和事件属性
• 在模板引擎中启用自动转义功能，如Handlebars、Pug默认对变量做HTML转义
合理使用Content Security Policy（CSP）
CSP是浏览器提供的重要防御机制，能有效限制页面可执行的资源来源。
• 设置script-src 'self'阻止加载外部不可信脚本• 避免使用unsafe-inline和unsafe-eval，防止内联脚本和eval执行
• 通过report-uri或report-to收集违规行为日志，便于发现潜在攻击
安全操作DOM与事件绑定
直接拼接字符串生成DOM元素容易引入漏洞，应采用更安全的方式创建和操作节点。
• 使用document.createElement创建元素，再设置属性和内容，避免字符串拼接• 绑定事件时使用addEventListener，不要通过字符串设置onclick等属性
• 处理URL跳转时校验目标地址是否属于可信域名，防止open重定向结合XSS利用
保护敏感数据与上下文安全
即使做了输入过滤，仍需防止数据在特定上下文中被误解析为代码。
• 在JavaScript上下文中插入数据时，确保正确转义单引号、双引号和反斜杠• 不要将用户数据直接写入
• 使用JSON.stringify序列化数据，并配合CSP一起防护
基本上就这些。防护XSS需要从数据输入、处理、输出全过程设防，结合编码规范、安全策略和工具检查，才能构建可靠防线。不复杂但容易忽略细节。
