xss攻击通过注入恶意脚本窃取用户数据，防范需输入过滤、输出编码、禁用危险API、启用CSP和HttpOnly；csrf利用自动携cookie机制伪造请求，防御需Anti-CSRF Token、校验Origin/Referer、二次确认和SameSite Cookie。
前端安全是现代 Web 开发中不可忽视的一环，尤其是面对 XSS 和 CSRF 这两类常见攻击。理解它们的原理并采取有效防护措施，能显著提升应用的安全性。
什么是XSS攻击及如何防范
XSS（跨站脚本攻击）是指攻击者将恶意脚本注入网页，当其他用户浏览该页面时，脚本在他们的浏览器中执行，从而窃取信息、冒充用户操作等。
XSS 主要分为三类：存储型、反射型和 dom 型。无论哪种类型，核心都是“执行了不可信的代码”。
防范XSS的关键在于输入过滤与输出编码：
立即学习“前端免费学习笔记（深入）”；
- 对所有用户输入内容进行严格校验，如长度、格式、特殊字符过滤
- 在服务端和前端渲染时，对动态插入 html 的数据使用 HTML 实体编码
- 避免使用 innerHTML、document.write 等危险 API，优先使用 textContent
- 启用 CSP（Content Security Policy），限制可执行脚本的来源，例如禁止内联脚本
- 设置 Cookie 的 HttpOnly 标志，防止 javaScript 读取敏感 Cookie
例如，在展示用户评论时，不要直接拼接字符串插入 DOM，而应通过安全方式处理：
const userComment = ‘<script>alert(“xss”)</script>’; commentElement.textContent = userComment; // 安全
CSRF攻击原理与防御策略
CSRF（跨站请求伪造）是指攻击者诱导用户在已登录状态下访问恶意网站，从而以用户身份发送非自愿的请求，比如转账、修改密码等。
这类攻击利用了浏览器自动携带 Cookie 的机制，让服务器误认为请求来自合法用户。
防御CSRF的核心是确保请求来自真实用户操作，常用方法包括：
- 使用 Anti-CSRF Token：服务器生成一次性 token，前端在表单或请求头中携带，服务端验证其有效性
- 检查请求头中的 Origin 或 Referer 字段，判断来源是否合法
- 关键操作要求二次确认，如短信验证码或密码验证
- 采用 SameSite Cookie 属性（推荐 Strict 或 Lax），阻止跨站请求携带 Cookie
例如，设置 Cookie 时添加 SameSite 属性：
Set-Cookie: session=abc123; Path=/; Secure; HttpOnly; SameSite=Lax
开发中的安全实践建议
安全不应只依赖某一个环节，而是贯穿整个开发流程。
- 前后端都做输入校验，不信任任何客户端数据
- 使用现代框架（如 react、vue），它们默认提供一定XSS防护（如自动转义插值内容）
- 定期进行安全扫描和渗透测试，发现潜在漏洞
- 保持第三方库更新，避免已知漏洞被利用
- 对敏感操作记录日志，便于事后追溯
基本上就这些。XSS 和 CSRF 虽然常见，但只要在开发中保持警惕，合理使用现有防护手段，就能有效抵御大多数攻击。安全不是一劳永逸的事，持续关注新威胁和最佳实践更重要。