前端常见安全问题及解决方案

xss安全漏洞

XSS漏洞是通过URL带入的，这种带入主要是前端解析url中的参数，并对数参数执行了innerHTML或者html或者append操作。在将参数html()或者append()到html文件中时，会执行其中的js代码，被错误用户获取到cookie等信息。

原始链接： 
https://xx.xxx.com/index.html?nick=aa
被xss注入之后的链接： 
https://xx.xxx.com/index.html?nick=qqqa<img src=1 onerror=alert(document.cookie)>
xss漏洞修复:
function filterXss(str, regExp){
  // var regex = /<(\S*?)[^>]*>.*?|<.*? \/>/gi;
  // 去除包含<>内容的，防止xss漏洞
  var filterValue = str.replace(/<.*?>/g,'');
  // 去除<开头类型的xss漏洞
  filterValue = str.replace(/<+.*$/g,'');

  if(regExp && !regExp.test(filterValue)){
    filterValue = '';
  }
  return filterValue;
}

修复方式:
对URL中的参数包含<>标签的内容进行过滤，防止任何js代码执行的可能性。同时可以对带有url的参数(比如用户的头像图片链接)进行域名限制，通过域名限制可以不需要再过滤类型，只需要限制域名，因为这里用户有可能输入了一些可以下载内容的URL，让用户下载一些并不需要的东西，此时过滤域名最安全。

---

csrf安全漏洞

csrf是通过仿造客户端的请求获取信息的，对于jsonp的请求，客户端确实可以仿造，但是因为对于ajax的请求，有同源策略限制，已经做了域名过滤，所以一般不会有问题。

修复方案：

1. 客户端带一个特定标识到服务端，比如token，服务端检查token
2. 服务端判断refer，对refer的域名进行过滤和拦截

refer指向原则：

1. 在a.html里面发送了ab.json请求，则服务端拿到的refer地址是a.html的地址，即当前页面的html地址
2. 直接在浏览器里面输入该地址（html或者json），则refer为空
3. 从上个页面a.html跳转到b.html，则b.html的refer地址为a.html