前端内参安全攻防：XSS与CSRF攻击原理与防御策略
项目地址: https://gitcode.com/gh_mirrors/fr/frontend-hard-mode-interview 《前端内参》作为帮助前端工程师夯实技术基础的知识分享项目，涵盖JavaScript、编程范式、设计模式等大前端范畴内容，旨在助力开发者通过一线互联网企业技术面试。在Web应用开发中，安全攻防是不可忽视的重要环节，其中XSS与CSRF攻击是常见的安全威胁，掌握其原理与防御策略对保障应用安全至关重要。
一、XSS攻击：跨站脚本的潜伏威胁
Cross Site Script（跨站脚本攻击）是攻击者在网站注入恶意客户端代码，通过篡改客户端网页，在用户浏览时控制浏览器或获取隐私数据的攻击方式。
1. XSS攻击的三种类型
反射型XSS：将用户输入数据“反射”给浏览器，通常诱使用户点击恶意链接或提交表单，注入脚本。例如攻击者构造恶意链接，用户点击后页面执行注入的脚本，可能导致隐私数据泄露。
存储型XSS：把含恶意脚本的用户输入数据存储在服务器端，当浏览器请求数据时，服务器返回脚本并执行。比如在评论区提交包含恶意脚本的内容，其他用户查看评论时脚本被执行。
基于DOM的XSS：纯粹发生在客户端，通过恶意脚本修改页面DOM结构。攻击者构造特殊链接，用户点击后页面DOM被篡改，执行恶意脚本。
2. XSS攻击的防范措施
内容安全策略（CSP）：用于检测和减轻XSS、数据注入等攻击，通过限制资源加载来源等方式增强页面安全性。
HttpOnly标记：为Cookie设置HttpOnly标记，使JavaScript无法访问，防止XSS攻击后的Cookie劫持。
输入检查与过滤：前端框架通常有decodingMap，对用户输入的特殊字符或标签进行编码或过滤，如vue中的相关处理机制。也可使用专门的XSS过滤库，如将<script>alert("xss");</script>过滤为<script>alert("xss");</script>。
前端内参安全知识体系.png)
二、CSRF攻击：跨站请求伪造的隐蔽手段
Cross Site Request Forgery（跨站请求伪造）是劫持受信任用户向服务器发送非预期请求的攻击方式，借助受害者的Cookie骗取服务器信任，在用户不知情的情况下以其名义伪造请求。简单来说，CSRF就是利用用户的登录态发起恶意请求。
1. CSRF攻击场景举例
攻击者准备恶意页面，当已登录目标网站的用户访问该页面时，页面会向目标网站发起伪造请求。由于用户登录态存在，服务器可能误认为是用户的合法操作，从而执行非预期行为。
2. CSRF的有效防御规则
验证码：保证用户必须与应用交互才能完成请求，防止攻击者自动发起请求。
验证Referer：检查请求的Referer值，判断请求来源是否合法，如只允许特定域名的请求。
添加Token验证：在HTTP请求中加入随机产生的token，服务器端验证token，无token或token不正确则拒绝请求。因为攻击者无法伪造token，从而有效抵御CSRF。
设置SameSite Cookie：要求Cookie在跨站请求时不被发送，阻止跨站请求伪造，但目前并非所有浏览器都支持。
三、XSS与CSRF的对比总结
- XSS是利用用户对指定网站的信任；
- CSRF是利用网站对用户的信任。
深入理解XSS与CSRF攻击原理，采取有效的防御策略，是保障Web应用安全的关键。更多安全攻防知识可参考项目中的壹.5.5 XSS与CSRF攻击。
函数调用栈示意图.png)
通过学习《前端内参》中的安全知识，前端工程师能够更好地应对实际开发中的安全挑战，构建更安全可靠的Web应用。若需获取项目完整内容，可通过git clone https://gitcode.com/gh_mirrors/fr/frontend-hard-mode-interview克隆仓库进行学习。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
