前后端分离下如何防御CSRF攻击

网上有很多关于防御CSRF攻击的文章，大都雷同。方法主要有三种：

1. 检查Referer
2. 使用CSRF Token
3. 使用验证码

第二种方法大都是通过在form中填充隐藏的csrf_token。这种方法适用于服务器端渲染的页面，对于前后端分离的情况就不太适用了。

针对前后端分离情况，我有两种方法。

1. Cookie-to-header token
   浏览器索要登录页面的时候，服务器生成一个随机的csrf_token，放入cookie中。

Set-Cookie: Csrf-token=i8XNjC4b8KVok4uw5RftR38Wgp2BFwql; expires=Thu, 23-Jul-2015 10:25:33 GMT; Max-Age=31449600; Path=/

浏览器通过JavaScript读取cookie中的Csrf_token，然后在发送请求时作为自定义HTTP头发送回来。

X-Csrf-Token: i8XNjC4b8KVok4uw5RftR38Wgp2BFwql

服务器读取HTTP头中的Csrf_token，与cookie中的Csrf_token比较，一致则放行，否则拒绝。

这种方法为什么能够防御CSRF攻击呢？
关键在于JavaScript读取cookie中的Csrf_token这步。由于浏览器的同源策略，攻击者是无法从被攻击者的cookie中读取任何东西的。所以，攻击者无法成功发起CSRF攻击。

2. JWT(Json Web Token)
   这个就不展开讲了。