Web前端安全策略之CSRF的攻击与防御

跨站请求伪造（CSRF）

---

跨站请求伪造，英文全称为Cross Site Request Forgery ， 缩写CSRF，这种攻击模式用通俗易懂的话来讲就是：攻击者借用你的用户身份，来完成一些需要依靠用户信息来完成的事情，例如转账 、发送邮件……

（1）跨站请求伪造的例子

我们来以转账为例，假设下面是一个转账支付页面：

这一段转账的流程很重要，一定要看懂：

1. 只要用户登录了自己的账户，这个支付页面就会显示用户的名称 、以及余额， 在下面的表单里，只要填上目标账户名（target_user）以及转账金额（money），点击提交， 客户端就会将 target_user 和 money 两个参数发送给服务器。

2. 服务器接收到该请求，并且接收到了这两个参数。 然后判断转账用户是否已登录（实质就是判断客户端是否有该用户的cookie信息），是的话就将该账户里的余额转一定金额（money）给目标账户（target_user），这样就完成了钱的转账。

我们了解完正常的转账流程，我们再来看看攻击者是如何进行跨站域请求伪造的：

1. 首先攻击者自己模仿这个转账网页， 写了一个表单， 表单的参数名也都写的跟这个网页相同，并且直接填好了提交表单的参数（转账的目标账户：攻击者自己的账户，转账金额：看攻击者想要多少钱了），如下面的代码

2. 攻击者再设置一个非常吸引人的网页，比如说该网页里面有很多美女的图片， 同时攻击者在里面放了一个 iframe标签，并且该标签设置为不可见，让别的用户无法察觉，该标签里面加载的是步骤1中设置的网页，代码如下：

3. 当用户被攻击者诱导着去点击了这个诱人的网站以后， 用户正开心的欣赏着网页里的图片呢，但是这个隐藏的 iframe 标签已经加载了攻击者设计的自动提交表单页面， 此时提交的表单参数就是攻击者设计好的，即 target_user=blackPerson&money=1000 ，该表单请求正常发送给服务器。

4. 服务器接收到该表单请求，同时接收到请求参数。先判断用户是否登录（判断是否存在用户的 cookie 信息），因为这个请求是在正常用户浏览器上发送的， 所以服务器会判断为该用户已登录；然后就将该用户的钱转1000（money）到 blackPerson （target_user） 的账户上。

5. 就这样，一次跨站请求伪造就完成了，看看你们以后谁还敢乱登网站看图片哈哈哈哈哈，废话不多说，我们接下来看看如何防御这种攻击吧。

（2）防御跨站请求伪造

防御跨站请求伪造的方式一共有三种：

1. 增加一个验证码， 服务端判断验证码是否正确

2. 使用refer验证

3. 参数伪造 token

• 增加一个验证码， 服务端判断验证码是否正确

该方法好处就是可以防御跨站请求伪造，因为攻击者设计的自动表单提交无法自动判断验证码是多少；坏处就是用户体验感会差，因为每次提交转账都要输入验证码。

这里推荐一个 node.js 的一个自动生成验证码的库svg-captcha，具体使用方式可以自己去github上查看，使用十分简单，下面放上一个链接——GitHub sva-captcha

• 使用referer验证

什么是referer呢？ referer表示该请求来自哪个网页

前端框架

前端框架太多了，真的学不动了，别慌，其实对于前端的三大马车，Angular、React、Vue 只要把其中一种框架学明白，底层原理实现，其他两个学起来不会很吃力，这也取决于你以后就职的公司要求你会哪一个框架了，当然，会的越多越好，但是往往每个人的时间是有限的，对于自学的学生，或者即将面试找工作的人，当然要选择一门框架深挖原理。

以 Vue 为例，我整理了如下的面试题。