攻击原理
从上图可以看出，要完成一次CSRF攻击，受害者必须依次完成两个步骤
1.登录受信任网站A，并在本地生成Cookie
2.在不登出A的情况下，访问危险网站B
防御原理
csrf能防御的本质是，黑客虽然携带了合法的cookie，但是他不知道带了什么，也没有跨域权限读取网页的任何信息，而网站可以。
1. 判断请求来源
•The Referer header （防火墙，浏览器插件或处于隐私策略会被删除）
•The Origin header （老版本浏览器不支持）
2.表单token验证，在提交表单的请求中添加token参数，后台验证（token需要存储在服务器端，占用内存资源）
3.重复携带token验证，提交请求时前端取到token（可放在页面中或cookie中），后台只需要对比提交的参数和cookie中的token是否相等即可。
未来浏览器的防御方式
通过设置cookie的SameSite属性，来限制请求是否携带cookie，关于samesite的说明如下图
落地措施
前端代码
csrf_token可放在meta，页面，cookie中都可以
1. 表单提交，把csrf_token值放在隐藏域即可
2. 简单get请求，csrf_token拼接到url参数中即可
3. AJax请求：
- jQuery:
$(“body”).bind(“ajaxSend”, function(elm, xhr, s){
If(csrf_token)
xhr.setRequestHeader(‘X-CSRF-Token’, csrf_token);
});
- axios：
设置axios.defaults属性即可：
xsrfCookieName: ‘XSRF-TOKEN’, // default
xsrfHeaderName: ‘X-XSRF-TOKEN’, // default
- Fetch API（如果可以使用Fetch，那肯定可以使用orgin判断来源，这样更好）
•const getHeaders = () => {
• let headers = new window.Headers({
• ‘Content-Type’: ‘application/json’,
• ‘Accept’: ‘application/json’,
• ‘X-Requested-With’: ‘XMLHttpRequest’
• })
• const csrfToken = document.head.querySelector(“[name=‘csrf-token’]”)
• if (csrfToken) { headers.append(‘X-CSRF-Token’, csrfToken) }
• return headers
•}
•export const createRequest = (url, method = ‘get’) {
• const request = new window.Request(url, {
• headers: getHeaders(),
• method: method,
• credentials: ‘same-origin’,
• dataType: ‘json’
• })
• return request
•}
后台代码（此处只描述逻辑）
if(Referer存在且不在白名单) retrun “非法”
if(Origin存在且不在白名单) retrun “非法”
if(对比header中的X-CSRF-Token和cookie中X-CSRF-Token的值，不等) retrun “非法”
