前端javascript防止xss攻击

背景：同事的项目受到了xss攻击，组长要求我把之前的项目都加入xss攻击，但是我本人对这个很不了解。所以花了一下午的时间，查阅了一些资料，稍微明白了一点，所以记录下来

什么是xss:

XSS（Cross Site Scripting），跨站脚本攻击，是一种允许攻击者在另外一个用户的浏览器中执行恶意代码脚本的脚本注入式攻击。本来缩小应该是CSS,但是因为和层叠样式表重名，所以改为XSS

对于攻击者来说，能够让受害者浏览器执行恶意代码的唯一方式，就是把代码注入到受害者从网站下载的网页中。

类型：

1，持续型xss攻击

攻击者通过评论，表单提交的方式将<script>alert('xss')</script>提交到网站

服务端假如没有做任何处理，直接把数据返回给前端，前端展示在页面中，所有的的用户打开页面，也会弹出这个弹窗

这种攻击恶意代码会被存储在数据库中，其他用户访问也会被攻击，影响比较大

所以项目中有输入框和富文本编辑的需要注意下

2，反射型xss攻击

用户点开了带攻击的url,比如http://xxx?key=<script></script>

服务端给这个用户返回的内容包含这个恶意文本

用户的浏览器受到文本后，如果前端在代码中，正好用到这个key,那么就会出现弹窗

这种攻击方式是诱导用户去点击带攻击的链接才会出现

3，基于dom的反射型xss攻击：

用户点击带攻击的url,但是正好js中用了被攻击的这个参数，那么网页中就会弹出弹窗

这个攻击发生在js执行中，服务器无法检测我们的请求是否有被攻击的危险

危害：

比如一个h5购物页面，当用户正在浏览时，突然出现一个不合时宜的关于赌博的广告图片，那么这个时候可能就是被攻击了，这样就会严重影响用户的体验。或者是攻击者通过修改DOM在页面上插入假的登录框。或者是把表单的action属性指向他自己的服务器地址。这样都可以获取用户的敏感信息（所以，一般的小网站，或者是看着感觉有问题的网站，最好不要输入自己的个人信息或银行卡密码）

如何防止攻击：

看了一圈资料，感觉校验是最好的方式，对用户的输入和请求都进行检查，设置输入的规则，比如电话号码输入框，那就是尽量做到只允许输入数字。

对于持续型和反射型攻击，服务端是必须要验证的

对于DOM的反射型攻击，客户端是一定要检查的。

总结：对于各种攻击，最好客户端和服务端都要做处理。

举例：

同事的项目遇到了的攻击就属于反射型xss攻击,

他请求了一个接口，这个接口返回了一个HTML文档，文档内容如下：

name等于returnUrl的标签里的value就是被攻击的。这个value是请求的接口传的一个入参返回的，入参：

http://baidu.com'><ScRiPt>alert(document.cookie)</ScRiPt>

服务端返回的html 里没有对他做处理，直接返回给了客户端，当用户打开这个页面，就会弹出这个弹窗