持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第11天，点击查看活动详情
写在前面
在上一篇文章中 面试官：网络安全了解多少，简单说说？ 介绍了 XSS 相关的攻击原理、攻击步骤以及攻击的防范措施，那么这一篇就来介绍下另外一个前端基础的网络安全攻击漏洞 CSRF。
CSRF 攻击
CSRF（Cross-site request forgery）简称：跨站请求伪造，攻击者通过伪造用户的浏览器的请求，向访问一个用户自己曾经认证访问过的网站发送出去，使目标网站接收并误以为是用户的真实操作而去执行命令。常用于盗取账号、转账、发送虚假消息等。攻击者利用网站对请求的验证漏洞而实现这样的攻击行为，网站能够确认请求来源于用户的浏览器，却不能验证请求是否源于用户的真实意愿下的操作行为。
攻击过程
1、登录网站
如上图所表达的过程，第一步用户按往常正常登录网站A，再提交账号和密码后，用户从网站A获得相关的 cookie 值并保存到浏览器中
2、访问恶意网站
当用户登录成功，获得了相关 cookie 等认证信息后，这个时候黑客通过广告、邮件等方式，对用户发送黑客自建的恶意网站B的链接，这个时候，若用户点击了恶意链接，将自动访问网站B
3、窃取信息
当用户点击了恶意链接，访问恶意网站B，这个时候，网站B会要求提取 cookie 并发送到网站B
4、实施攻击
当恶意网站B收集到网站A相关的信息后，就可以假冒用户的身份，给网站A发送恶意操作请求了
典型案例
假设用户在第一步登录时，登录的是一个银行网站，然后该网站向用户发送了对应的 cookie 值，这个时候，黑客给用户发送了一个诱导邮件，用户直接打开了邮件并访问了邮件中的一个恶意链接，直接跳转到黑客网站，这个时候，黑客便接收到了 银行网站对应的认证信息 cookie，这个时候，黑客利用该 cookie 假装用户，向银行网站提交转账请求，于是，用户的钱将不翼而飞。
防范措施
1、验证 HTTP Referer 字段
我们都知道 Referer 只要用于验证发送 HTTP 请求的来源地址，当攻击者拿到 cookie 后，将 cookie 用于构造恶意请求发送到目标服务器，但是如果开启了 Referer 认证，这个时候攻击者发送到目标服务器的请求就能够被识别为非法请求，进而拦截攻击
2、添加验证码
对重要的操作添加验证码确认机制，当黑客盗用了 cookie 进行恶意操作提交时，会触发验证码机制，从而对攻击进行拦截，当加入了验证码，也就不会出现我们完全不察觉的情况下账号被直接进行恶意操作提交
3、添加 token
在 header 中添加自定义字段，使用 token 验证，这种方式 token 由服务器生成，并在客户端每次请求时携带在 header 中，黑客无法猜测到 token，本质上与 Referer 验证方式相同，都是用来区分是否为源网站发起的请求
往期好文推荐
面试官：说说从输入 URL 到页面显示到底经历了什么，体现一下你的知识广度
面试官：HTTPS 采用的是对称加密还是非对称加密？具体说说其加密过程
面试官：你就只会 npm run build 吗？（Webpack 配置 Vue+Ts）
面试官：连VuePress都没搭过还说开发过组件库？（VuePress 搭建）
面试官: 连 Vue 视图更新都不会写？（Vue视图更新原理【一】）
面试官: 能不能手写 Vue 响应式？（Vue2 响应式原理【完整版】）
面试官：能不能手写 Vue3 响应式（Vue3 原理解析之响应系统的实现）
面试官：说一下这个Loading动画实现思路 (CSS3 实现 Loading 动画)
面试官：你确定你说的防抖不是节流吗？( 面试题梳理系列 （二）)
面试官：除了 HTTP，你还用过什么通信协议？(Websocket 在数字孪生中的应用)
面试官：你真的理解 Event Loop 吗?( JS 事件循环 )
面试官：v-for 中 key 为什么不能用 index，从原理层面聊聊？
面试官：vue-router 的 hash 与 history 哪个模式会刷新页面?
面试官：说说你平时用过的自适应方案（数字孪生可视化自适应方案）
写在最后
博主接下来将持续更新好文，欢迎关注博主哟！！
如果文章对您有帮助麻烦亲点赞、收藏 + 关注和博主一起成长哟！！❤️❤️❤️
