XSS通过注入恶意脚本攻击用户，CSRF则伪造用户请求执行非法操作。防御XSS需过滤输入、转义输出、避免危险API并启用CSP；防御CSRF应使用CSRF Token、校验Referer/Origin、设置SameSite Cookie及二次验证。
前端安全是Web开发中不可忽视的一环，尤其是面对常见的XSS与CSRF攻击。这两种攻击方式虽然原理不同，但都可能造成用户数据泄露、身份被冒用等严重后果。理解它们的机制并采取有效防御措施，是每个前端开发者必须掌握的技能。
什么是XSS攻击
XSS（跨站脚本攻击）是指攻击者通过在网页中注入恶意脚本，使其在用户浏览器中执行。这类攻击通常发生在输入未经过滤或输出未正确转义的场景中。
常见形式包括：
- 存储型XSS：恶意脚本被永久保存在目标服务器上，例如评论内容、用户资料等，所有访问该页面的用户都会受影响
- 反射型XSS：攻击者诱导用户点击包含恶意脚本的链接，脚本通过URL参数传入并立即执行
- DOM型XSS：不经过后端，完全在前端通过JavaScript操作DOM触发，比如直接使用location.hash修改页面内容
举例来说，如果页面直接将URL参数渲染到HTML中：
document.getElementById('msg').innerHTML = getUrlParam('msg');
攻击者构造链接：http://example.com?msg=，用户打开即执行脚本。
如何防御XSS
防御XSS的核心原则是：**永远不要信任用户输入，输出时务必转义**。
立即学习“Java免费学习笔记（深入）”；
- 对用户输入进行严格校验和过滤，移除或编码特殊字符如、&、"、'
- 在输出到HTML时使用转义函数，例如将转换为zuojiankuohaophpcn
- 避免使用innerHTML、document.write、eval等危险API，优先使用textContent
- 设置Content-Security-Policy（CSP）响应头，限制可执行脚本的来源，有效阻止内联脚本运行
- 对富文本内容使用专门的库（如DOMPurify）进行白名单过滤
什么是CSRF攻击
CSRF（跨站请求伪造）是指攻击者诱导用户在已登录状态下访问恶意网站，从而以用户身份发送非本意的请求。例如，在用户登录银行系统后，访问一个恶意页面自动提交转账请求。
这种攻击之所以能成功，是因为浏览器会自动携带用户的Cookie发送请求，而服务器仅凭Cookie判断身份。
典型场景：
用户登录了bank.com，攻击者在evil.com放置一个隐藏表单，自动提交到bank.com/transfer，完成转账操作。
如何防御CSRF
防御CSRF的关键是确保请求来自合法的源，并且是用户真实意图。
- 使用CSRF Token：服务器在返回页面时嵌入一个随机token，每次提交请求时需携带该token，服务器验证其有效性
- 检查请求头中的Referer或Origin字段，确认请求来源是否合法
- 对敏感操作要求二次验证，如输入密码或短信验证码
- 使用SameSite Cookie属性：Set-Cookie: session=xxx; SameSite=Strict或Lax，防止跨站请求携带Cookie
基本上就这些。XSS关注的是“执行恶意脚本”，CSRF关注的是“伪造用户请求”。两者防御策略不同，但在实际项目中往往需要同时防范。保持输入过滤、输出转义、合理使用安全头和Token机制，能大幅提升前端应用的安全性。
