虽然现在是后端存储数据，前端做数据前端处理，但是由于HTTP很大程度是靠不住的，故前端安全问题一直比较受重视。今天我们就来聊聊前端开发中需要注意的安全方面知识。

XSS(Cross Site Scriting)跨站脚本攻击

顾名思义，XSS指的是受害者的浏览器中执行攻击者的JS脚本，为达到用户回话、破坏网络或将用户重定向到其他恶意站点。XSS又主要分为存储型以及反射型，我们一一列举：

1）存储型

也称为持久型，是最常见的XSS，是在input，textarea等输入文本信息的区域，输入<script src=‘恶意网站’>，提交后信息会存在在服务器中，用户再次打开网站请求到相应数据。这里用数据库举例最合适，输入的数据会存入数据库，在每次页面重新加载后，都会从数据库中调出进行显示。打开页面，恶意脚本就会将用户的Cookie信息等数据上传到hacker server，造成的影响是持续的。

2）反射型

将修改好的连接发送给用户，用户点击后攻击，只能一次性通过参数提交的方式。为什么不要乱点链接？因为可能是反射型的XSS，偷取你的数据。（来骗，来偷袭）

比如这样弹出cookie<script>alert(document.cookie);</script>是最基础的反射型XSS，严重的是逻辑错误漏洞，可以修改用户的密码等信息，甚至能绕过验证码验证等防御。

如何预防

对于服务端来说，可以采取

1.限制JS读取cookie的做法，比如cookie设置secure以及httponly这两个必要属性。

2.过滤敏感标签，如script、iframe、form等。

对于客户端： 

1.输入检查，防止输入敏感字段如JS，cookie

2.输出检查，因为脚本都混淆在HTML中

CSRF(Cross-site request forgery)跨站请求伪造

攻击者诱导受害者进入第三方网站，向被攻击网站发送跨站请求。利用某受害者在被攻击网站已经获取的注册凭证，绕过后台用户验证，冒充用户对被攻击的网站执行某项操作的目的。

通俗的讲就是登录验证能够阻挡非登录用户的侵扰，但是CSRF会通过已登录的用户搞事，比如通过一张图片（这种图片通常是不可见的）发起get请求，又或者通过ajax发起post请求，甚至通过诱导用户点击表单来进行post请求。

CSRF的不同请求类型

如何预防？

目前主要有以下策略：

阻止不明外域的访问——同源检测

即验证 HTTP Referer 字段，Referer 值会记录下用户的访问来源，以此来查看是否是自己的站点，但是Referer并不完全靠谱，如果众多二级域名之间需要通信，目标涉及很多。或是历史原因一些 Refferer 为空的请求会漏过校验，但取消Referer字段可能导致部分安全网站无法被访问。所以这种方式只是提高了破解成本，并不能完全杜绝。

提交时要求附加本域才能获取的信息——CSRF Token

比较通用的解决方案，在HTTP请求中添加anti-CSRF token。

两者差别在于：XSS利用用户对指定网站的信任，CSRF利用的是网站对于用户网页浏览器的信任，CSRF的目的是守住你的登录信息(cookie)，如果被XSS攻击获取cookie，那么仅仅靠CSRF是行不通的，马奇诺防线了属于是。

参考文章：认识前端安全