攻击原理

从上图可以看出，要完成一次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 "非法"

引用：

• https://erlend.oftedal.no/blog/static-130.html?blogid=130

• https://www.jianshu.com/p/14f569b13dcc

• https://www.cnblogs.com/qiantan/p/10755172.html

• https://www.acunetix.com/blog/articles/chrome-tightens-csrf-protection/

• https://www.cnblogs.com/ziyunfei/p/5637945.html

• https://www.jianshu.com/p/66f77b8f1759

• https://github.com/axios/axios

• https://github.com/github/fetch/issues/424

• https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=7_7&index=5

• https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=4_3