在如今大前端的潮流趋势下，我们平常使用到的各种框架极大地简化了我们的开发流程。我相信觉得多数多同学都是完成了项目需求就万事大吉了，包括我自己也是。这让我们往往忽略了网站的安全性。前几天腾讯QQ大规模被盗的事件大家可有耳闻？
今天让我们来简单撩一撩前端攻击中的CSRF~~
What is CSRF
CSRF英文全称Cross-site request forgery，中文的意思是伪造跨站请求
Can do waht
光知道它的英文名还不够呀，通过csrf到底能够干什么呢？
通过csrf攻击，攻击者可以获取到被攻击者的一些关键网站信息。从而攻击者可以以被攻击者的身份发送信息、发送邮件、盗取账号，网页购买商品等等。比如我们常见到的一些撸羊毛的脚本就是利用了csrf攻击的特性。
扒一扒原理
通过上图可以看到完成csrf攻击，被攻击者需要完成至少两个操作：
1用户访问并登录网站1，网站1返回用户cookie
2用户未登出网站1的情况下访问了攻击者的网站2
这时你就好奇了，这样的csrf攻击条件不是挺麻烦的么？只要我没有操作这两者中的任意一个步骤就不行了呀~想象是美好的，但是现实是骨感的，你无法保证其他的用户也能像你一样下载了国家反诈app具有高度的自我保护意识。
举个栗子：
一天小明正在掘金写文章讲述自己3000多天签到的心酸历程以及炫耀自己的100w矿石。这个时候屏幕右下角蹦出来个弹窗本来想去点关闭的，可谁知一下就打开了个新tab窗口蹦到了一个有颜色的网站，这时有颜色的网站里有这样一条代码
<img src='http://juejin.cn/api/drawLottery?suoha=yes&user=wangwu&address=xxxx&tel=1333333333'>
心情澎湃了一会后小明关了有颜色的网站，突然发现自己的100w矿石被梭哈了还中了匿名一等奖，可是领奖信息却已经被填写了。这是怎么回事呢？
攻击者利用颜色网站中的img通过get的方式请求第三方资源，这时浏览器就会带上小明的掘金用户信息向掘金发出了梭哈请求。所以小明的100w矿石就灰飞烟灭了~~
可以简单的看出来csrf的攻击是因为web的一些隐试身份验证机制，web的这种隐试身份验证机制虽然可以保证请求是来自某个用户的浏览器，但无法保证这种请求是用户自己发起的。
如何防御csrf
可以从服务端和用户端两个方向思考，很容易想到效果最好的就是在服务端进行防御，因为你无法验证所有的客户端防御情况。
通常都是在后端进行处理的，比如一些重要的请求需要验证码进行验证，没有验证码的请求直接ban掉。又或者对请求参数加密处理，服务端令牌核对等等方式~~ \
