提到前端安全，往往离不开xss(跨站脚本攻击)、xsrf(跨站伪造请求)，在此记录一下关于前端安全的学习过程。

什么是xss？

跨站脚本攻击(Cross Site Scripting)，为了不和css(层叠样式表)混淆，故记为xss。其原理是利用用户对某个指定网站的信任，被恶意用户进行了web攻击(通常这种攻击会利用js实现)。

简单攻击场景

某用户A逛网站时发现某可以分享文章的论坛，非常感兴趣，写下以下文章
用户A：你好，我是用户A，<script>alert(3)</script>
然后用户A将此文章提交至论坛上，假设论坛没有做任何安全防护。
用户B看见了此文章，点进去时会出现以下情景，网站蹦出了一个alert事件。
这种就是用户B被脚本进行了攻击。

xss防御

由于xss往往会利用js脚本进行攻击，所以我们可以利用以下方式进行防御

1、输入过滤
对用户的输入进行过滤，包括text、post等等所有输入进行可靠性检测。
也可以制作一个白名单，一但输入中的字符不在白名单内，自动过滤掉。
2、转义
与正则的思想类似，对比如<、>等等特殊字符进行转义处理。

什么是xsrf？

xsrf 的全称是“跨站请求伪造”，它利用的是服务器对客户端浏览器的信任，从而伪造用户向服务器发送请求，从而欺骗服务器达到一些目的。

简单情景

1、用户A登陆了某银行网站取钱，此时会保留cookie；
(大家有没有遇见过，如果在短时间内登陆某APP，关闭APP后(不是退出账号密码)，快速再次登陆此App，此时会不用再次登陆app)
2、用户B在知道A在某银行取钱后，利用各种信息诱导进入某另一网站***.****.com
3、此时网站***.****.com存在一张图片，图片指向一个取钱的http请求
<img src=http://www.mybank.com/Transfer.php?toBankId=11&money=1000>
4、此时如果用户A点击了该图片，他就会丢失1000元。因为该请求是从A用户的网站发出去的，而不巧的是用户A刚不久之前访问某银行网站，此时请求会携带有效cookie，并且服务器的session还有效。
5、A的钱被偷了。

需要注意的一点是用户B无法窃取用户A的cookie，他只是利用用户A在不知情的情况下，发出了http请求，借助服务器对于用户浏览器的信任，实现了非法转账(攻击)。

xsrf防御

明白了以上xsrf的原理，那该如何防御呢？

1、token验证
由于恶意用户无法窃取cookie，只能利用用户cookie模拟未携带token的http请求，那只要在服务器端进行token验证就可以防御xsrf的攻击。比如我们可以将token存储在localStorage中。
2、验证码
需要用户自己来填写验证码从而识别是否是用户主动发起的该请求。
其优点：简单粗暴、低成本
缺点：用户体验不好，需要多次验证。
3、Referer 字段
利用 HTTP 头中的 Referer 判断请求来源是否合法，Referer记录了该 HTTP 请求的来源地址。

参考：
Web 安全之 XSS 和 CSRF：http://jartto.wang/2017/12/15/xss-and-csrf/
XSS和 CSRF攻击详解：https://www.jianshu.com/p/64a413ada155