背景
1、什么是CSRF攻击?
这里不再介绍CSRF，已经了解CSRF原理的同学可以直接跳到：“3、前后端分离下有何不同?”。
不太了解的同学可以看这两篇对CSRF介绍比较详细的参考文章：
如果来不及了解CSRF的原理，可以这么理解：有一个人发给你一个搞(mei)笑(nv)图片链接，你打开这个链接之后，便立刻收到了短信：你的银行里的钱已经转移到这个人的帐户了。
2、有哪些防御方案?
上面这个例子当然有点危言耸听，当然可以确定的是确实会有这样的漏洞：你打开了一个未知域名的链接，然后你就自动发了条广告帖子、你的Gmail的邮件内容就泄露了、你的百度登录状态就没了……
防御方案在上面的两篇文章里也有提到，总结下，无外乎三种：
第一种方案明显严重影响了用户体验，而且还有额外的开发成本;第二种方案成本最低，但是并不能保证100%安全，而且很有可能会埋坑;第三种方案，可取!
token验证的CSRF防御机制是公认最合适的方案，也是本文讨论的重点。
3、前后端分离下有何不同?
《CSRF 攻击的应对之道》这篇文章里有提到：
要把所有请求都改为 XMLHTTPRequest 请求，这样几乎是要重写整个网站，这代价无疑是不能接受的
我们前端架构早已经告别了服务端语言(PHP/java等)绑定路由、携带数据渲染模板引擎的方式(毕竟是2011年的文章了，我们笑而不语)。
当然， 前端不要高兴的太早：前后端分离之后，Nodejs不具备完善的服务端SESSION、数据库等功能。
总结一下，在“更先进”的前端架构下，与以往的架构会有一些区别：
实现思路
如上文提到，这里仅仅讨论在“更先进”的前端后端架构背景下的token防御方案的实现。
1、可行性方案
token防御的整体思路是：
上文提到过，前后端分离状态下，Nodejs是不具备SESSION功能的。那这种token防御机制是不是就无法实现了呢?
肯定不是。我们可以借助cookie把这个流程升级下：
当然这样实现也有需要注意的：
现在方案确定了，具体该如何实现呢?
2、具体实现
我们的技术栈是 koa(服务端) + Vue.js(前端) 。有兴趣可以看这些资料：
在服务端，实现了一个token生成的中间件，koa-grace-csrf：
在前端代码中，对发送Ajax请求的封装稍作优化：
总结一下：
这里依旧有个细节值得提一下：Nodejs的上层一般是nginx，而nginx默认会过滤头信息中不合法的字段(比如头信息字段名包含“_”的)，这里在写头信息的时候需要注意。
上文也提到，通过cookie及http头信息传递加密token会有很多弊端;有没有更优雅的实现方案呢?
3、更优雅的架构
首先，我们明确前后端分离的一些基本原则：
后端(Java / PHP )职责：
前端(Nodejs + Javascript)职责：
我们提到，前端Nodejs层不负责实现任何SESSION和数据库功能，但有没有可能把后端缓存系统做成公共服务提供给Nodejs层使用呢?想想感觉前端整条路都亮了有木有?!这里先挖一个坑，后续慢慢填。
4、延伸
这里再顺便提一下，新架构下的XSS防御。
犹记得，在狼厂使用PHP的年代，经常被安全部门曝出各类XSS漏洞，然后就在smaty里添加各种escape滤镜，但是添加之后发现竟然把原始数据也给转义了。
当然，现在更多要归功于各种MVVM单页面应用：使得前端完全不需要通过读取URL中的参数来控制VIEW。
不过，还有一点值得一提：前后端分离框架下，路由由Nodejs控制;我自己要获取的后端参数和需要用在业务逻辑的参数，在主观上前端同学更好把握一些。
所以， 在koa(服务端) + Vue.js(前端)架构下基本不用顾虑XSS问题(至少不会被全安组追着问XSS漏洞啥时候修复)。
总结
要不学PHP、看Java、玩Python做全栈好了?
大一点的公司基本都不用，用也是作为前端脚本，模板引擎来用，意思就是说前后端分离架构里面担任着解析数据工作，跟nodejs和jsp之类的一个工作，当然写个博客什么的很不错的选择。
发表评论