防范XSS攻击需从输入净化、输出编码、启用CSP和使用安全框架入手，首先处理用户输入，避免使用innerHTML和eval，优先用textContent显示文本，富文本采用DOMPurify清理；其次配置Content-Security-Policy头限制资源加载；再对URL参数用encodeURIComponent编码并校验格式；最后利用React或Vue的默认转义机制，慎用危险API，持续落实安全实践。
编写安全的JavaScript代码，关键在于防止恶意输入被当作代码执行。跨站脚本攻击（XSS）是最常见的前端安全威胁之一，攻击者通过在页面中注入恶意脚本，窃取用户数据或冒充用户操作。以下是实用的防护措施。
正确处理用户输入和输出
任何来自用户的输入都应被视为不可信，包括表单数据、URL参数、API响应等。在将这些数据插入到页面前必须进行处理。
- 避免直接使用 innerHTML、document.write 或 eval 插入用户内容，这些方法会执行脚本。
- 使用 textContent 替代 innerHTML 显示纯文本内容，浏览器会自动转义标签。
- 若需渲染富文本，应使用经过验证的库如 DOMPurify 对 HTML 进行清理。
实施内容安全策略（CSP）
CSP 是一种重要的防御机制，通过 HTTP 响应头限制页面可以加载和执行的资源。
- 设置 Content-Security-Policy 头，禁止内联脚本（'unsafe-inline'）和 eval 类执行方式。
- 只允许从可信域名加载脚本，例如：
script-src 'self' https://trusted.cdn.com - 配合使用 CSP 可大幅降低 XSS 成功的可能性，即使有注入也无法执行。
对 URL 和 API 参数进行编码与校验
动态拼接 URL 或插入数据到模板时，未编码的内容可能触发脚本执行。
立即学习“Java免费学习笔记（深入）”；
- 使用 encodeURIComponent() 对查询参数进行编码。
- 在服务端和前端同时校验输入格式，如邮箱、手机号、长度限制等。
- 避免在客户端暴露敏感逻辑或令牌，防止被篡改利用。
使用现代框架的安全特性
React、Vue 等主流框架默认提供一定程度的 XSS 防护。
- React 会自动转义 JSX 中的变量插值，但使用 dangerouslySetInnerHTML 时仍需谨慎。
- Vue 的插值 {{ }} 也是自动转义的，但 v-html 指令相当于 innerHTML，需确保内容可信。
- 始终遵循框架的最佳实践，不绕过安全机制。
基本上就这些。保持输入净化、输出编码、启用 CSP 并依赖成熟工具，能有效阻止大多数 XSS 攻击。安全不是一次性的任务，需要在开发流程中持续关注。
