前端安全：XSS与CSRF防御技巧

从现在开始，努力学习吧！本文《前端安全：XSS与CSRF防御指南》主要讲解了等等相关知识点，我会在golang学习网中持续更新相关的系列文章，欢迎大家关注并积极留言建议。下面就先一起来看一下本篇正文内容吧，希望能帮到你！

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的核心原则是：**永远不要信任用户输入，输出时务必转义**。

• 对用户输入进行严格校验和过滤，移除或编码特殊字符如<、>、&、"、'
• 在输出到HTML时使用转义函数，例如将<转换为<
• 避免使用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机制，能大幅提升前端应用的安全性。

本篇关于《前端安全：XSS与CSRF防御技巧》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！