各位看官大家好哇，先给大家拜个晚年吧，二月份整整一个月没更新过，不禁自己有种深深的罪恶感。前几天面试被人问到了XSS攻击，懵掉了~回到家一看原来就是这怂，其实之前了解过一点但是没当回事，今天我就刨根问底儿的再把它学习一遍吧！
XSS, 全名叫做Cross Site Scripting, 中文名为跨站脚本, 其本质就是在用户访问的页面中插入了一段罪恶的script脚本。
——高级装逼工程师 Yubble
罪恶的脚本什么概念呢？做前端的我们都知道，不管是react还是vue，打包出来的dist其实就是一个html文件引入一个js文件（业务没那么复杂的状态下哦），页面样式逻辑全部归js控制。那如果这时候有人能在页面插入一条script脚本，在下突然觉得自己好像岛国女主一样无助...
那有没了解过的客爷就问了，咦~尼这瓜娃净瞎掰扯，老子的线上网页怎么能被他嵌入js嘛。还记得几年前中秋节阿里员工写js脚本抢月饼的事吗？这位小哥用离职的代价挖出了本司的安全漏洞问题好不啦。
文字总是苍白无力的~下面我们开始撸代码吧~
比如我有这么一个贫瘠的页面，您可以想象它是一个留言提交功能部分。当我在输入框中输入信息并点击提交表单按钮后输入的信息会在页面回显。上代码！
上后台！
配了个cors跨域，将前端传输过来的参数原样返回。
此时节，我们不管在输入框中输入什么文本，都会在底下的面板原样输出~
好戏要上演了哟，如果我们在输入框中输入一段script脚本会怎么样嘞，看图说话！
本来要回显的这段script被html当做脚本给编译了，弹出了一个不太友好的弹窗喵，这和我们原本的设想大相径庭了吧喵。
您可能觉得，就这点攻击对网站也没什么损伤嘛，那请您再看下一段情景
基本原理说完了，来点真的吧。当我们访问pc端网页的时候，总会有cookie提示我们是否需要存储用户名密码，方便我们下次登录的时候不用再手动输入对伐，一个温柔的陷阱可能就挖好了🤡。
恰恰是这一个疏漏，可能会引起我们用户名与密码的泄露，这问客爷可能想到了，就是js，它可以访问到登录用户的cookie对吧！
首先我会在这个网站的留言板或者哪个输入框中输入一个js的线上地址：http://suibian.com/test.js
这段js中是这么写的：
有没有一点亲切感，是不是看到了久违的jsonp？是的，我就是用了script标签不受同源策略影响的特点来发动getCookie请求，这样我就可以获得了这个倒霉蛋儿的cookie，现在我要做的就是静静地等着倒霉蛋儿来访问我这篇留言~
现在有一个用户到了登录页，看到了个特别貌似忠良的登录框：
如果用户输入了自己的姓名和密码，登录成功，那么这个挨千刀的后端就会脑残的用cookie记录下用户名密码~（跨域的请求如果需要传递cookie，需要改Access-Control-Allow-Credentials为true哦）
紧接着只要坐等这个倒霉的用户去留言区观察留言或评价，一开始被我在留言板上嵌入的script标签就会运行，去给我的getCookie接口送去cookie大礼了。
这位客爷又该说了，现在哪还有开发会把用户名密码存cookie这么肉鸡。是的，现在我们都不会用cookie来存储用户信息了，但是服务器依旧会采用session来开拓存储用户信息的对吗，而sessionId也是由cookie来保存的~
解决方案：
都说到这里了就顺便聊聊xss的防御措施吧~依在下愚见的话就从两个方面着手：
1，从根源避免问题，阻止不法者将代码提交到服务器
2，退而求其次，阻止不法者获取cookie
咱们先来聊聊第一种哈，这一道栏杆应该加在哪儿呢？输入框？还是提交时的数据校验？我认为都需要，只要是用户输入的地方严禁出现一些敏感字眼，script，src，onerror等等。
但是我国劳动人民的智慧是不可估量的，他们会使用各种空格断句来绕过我们的正则检查，而且其实不光是script具有跨域的特性，只要是带有src的标签都可以跟一段其他域的请求~
下面我们说说第二种，这种方式其实配置起来也很简单，在后端配置好httpOnly: true就好了，个人更偏向这种方式，比较省事...，但是我们前端如果要想获取到也是不可能的了~
其实不法分子XSS攻击有时候无非是想在我们的页面用js植入一段广告，用iframe包一下就塞到别人家页面去了。要防止这种恶心的寄生可以从服务器方面下手，配置一下响应头中的 X-Frame-Options 就可以了，它的作用就是把那些其他域名下的Iframe都屏蔽掉。
下面又到了废话时间，在下现在还清楚地记得自己还是个一年经验的小切图工，去找工作面试官问我如果想在一个网站中植入广告怎么整？还提示性的问我跨域应该怎么做？写完了这篇博客简直豁然开朗啊~
说起面试这几天我也一直在跑，不得不说深切的感觉到今年的竞争真的激烈呀，一次次的发挥充实，感觉自己胜券在握，又一次次的石沉大海。不过好在都有收获，之前一直在固定技术栈里工作的我跑了几回中关村才发现自己有多弱小，不愧是北京互联网的发源地哈！不过我的同事就没我幸运了，昨天面试了第十五家，面试官说了句：“你四年经验和应届生有什么区别”？她一下就哭了，回来和我聊天自己也特别后悔，说这几年公司同事都对她特别照顾，不会的都有人帮，所以自己也没积累下什么。她已经尝到了自己种下的恶果，但是这位面试官，不知道你是什么大牛水平，如果你看不上别人的技术，那也请不要伤害吧，毕竟都是来这座城市打工的~
说点高兴的吧，二月份的时候我向我女朋友求婚了，她沉浸在烛光音乐的气氛就答应了，嘿嘿，但是前几天的连续面试失利把我压的有些忧郁了，从来对面试都很有信心的我这次充满了挫败感，感觉让她失望了，甚至有点对不起这个小胖未婚妻。就在昨天晚上，还在床上无精打采的我收到了她的一条微信，看过之后我把这条微信收藏了，并且重新振奋精神开始着手写这篇博客。
嘿嘿嘿嘿，在下打算在她最喜欢的教堂再庄严地求一次婚，无所谓，反正她也不看我的博客~🤣
下一个系列打算好好把设计模式整整，也费心思学了这么久呢，一面试好像什么也不会一样，这哪儿行！
网友评论