17370845950

防范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 或插入数据到模板时，未编码的内容可能触发脚本执行。

• 使用 encodeURIComponent() 对查询参数进行编码。
• 在服务端和前端同时校验输入格式，如邮箱、手机号、长度限制等。
• 避免在客户端暴露敏感逻辑或令牌，防止被篡改利用。

使用现代框架的安全特性

React、Vue 等主流框架默认提供一定程度的 XSS 防护。

• React 会自动转义 JSX 中的变量插值，但使用 dangerouslySetInnerHTML 时仍需谨慎。
• Vue 的插值 {{ }} 也是自动转义的，但 v-html 指令相当于 innerHTML，需确保内容可信。
• 始终遵循框架的最佳实践，不绕过安全机制。

基本上就这些。保持输入净化、输出编码、启用 CSP 并依赖成熟工具，能有效阻止大多数 XSS 攻击。安全不是一次性的任务，需要在开发流程中持续关注。