这是我参与「第五届青训营」伴学笔记创作活动的第 2 天
这次大项目的网络安全模块有考虑到防范跨站请求伪造，那今天来聊聊CSRF 跨站请求伪造

一、 CSRF及其实现原理

CSRF是CROSS Site Request Forgy的缩写，即跨站请求伪造。我们来看看它的攻击原理

CSRF 攻击过程

用户登录信任网站A
登录成功后网站A会向浏览器cookies设置登录验证的信息
用户在未网站Acookies信息尚未过期的情况下访问了危险网站B
网站B会诱导用户甚至在用户不知情的情况下带着cookie向网站A发送危险请求
网站A不知道请求是用户发出的还是网站B发出的做了正常的响应

CSRF 攻击方式

GET请求

<!DOCTYPE html>
<html>
  <body>
    <h1>黑客的站点</h1>
    <img src="https://www.bank.com/withdraw?amount=1000?for=hacker">
  </body>
</html>

黑客将转账的请求接口隐藏在 img 标签内，欺骗浏览器这是一张图片资源。
当该页面被加载时，浏览器会自动发起 img 的资源请求，
如果服务器没有对该请求做判断的话，那么服务器就会认为该请求是一个转账请求，
于是用户账户上的 100 就被转移到黑客的账户上去了。

POST请求

<form action="http://bank.com/withdraw" method=POST>
    <input type="hidden" name="account" value="xiaoming" />
    <input type="hidden" name="amount" value="10000" />
    <input type="hidden" name="for" value="hacker" />
</form>
<script> document.forms[0].submit(); </script> 
访问该页面后，表单会自动提交，相当于模拟用户完成了一次POST操作。

诱导点击
前面两种只要访问了网站就会自动发送请求

链接类型的CSRF a标签
<a href="http://bank.com/withdraw?amount=1000&for=hacker" taget="_blank">重磅消息！！<a/>
只要用户点击了，就会被攻击成功

二、 CSRF 防范手段

同源检测

CSRF大多来自第三方网站，我们可以直接禁止外域（或者不受信任的域名）对我们发起请求。
请求头有 Origin Header、Referer Header，这两个Header在浏览器发起请求时，大多数情况会自动带上，并且不能由前端自定义内容。服务器可以通过解析这两个Header中的域名，确定请求的来源域。

双Token验证

CSRF利用用户浏览器的cookie信息，但是攻击者无法知道cookie的真实内容。我们可以在cookie设置token的同时在query、body或者form处多加一个token的请求参数，这样子攻击者也无法伪造token，从而防范了跨域请求伪造攻击。

CSRF | 青训营笔记