前端安全性问题和解决防范

一、常见的安全性问题

• 1、XSS(Cross-Site Scripting)脚本攻击漏洞；
• 2、CSRF（Cross-sit request forgery）漏洞；
• 3、iframe安全隐患问题；
• 4、本地存储数据问题；
• 5、第三方依赖的安全性问题；
• 6、HTTPS加密传输数据；
• 7、SQL注入
• 8、文件上传漏洞

二、XXS攻击（Cross Site Scripting）（跨站脚本攻击）

通过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)>

解决方案：(使用正则匹配去除某些字符串、过滤域名)

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;
}

方案总结
1、输入过滤：在js中对用户输入的数据进行过滤
2、将输出的字符串中的反斜杠进行转义
3、从url中获取的信息，在前端进行转义后再输出
4、使用Cookie的onlyhttp属性

三、CSRF安全漏洞（跨站请求伪造）

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

以用户的名义伪造请求发送给被攻击站点，从而在未授权的情况下进行权限保护的操作。

解决方案

1、客户端带一个特定标识到服务端，比如token，服务端检查token
2、服务端判断refer,对refer的域名进行过滤和拦截(Referer Check：检查请求来源来防御CSRF)

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

四、SQL注入

SQL注入的本质：数据和代码未分离，即数据当做了代码来执行。

应用程序在向后台数据库传递SQL时，攻击者将SQL命令插入到web表单提交或输入域名或页面请求的查询字符串，最终达到欺骗服务器执行的恶意SQL命令。

解决方案
1、防止系统敏感信息泄露：该方法主要是在后台实现
2、数据转义
3、增加黑名单或白名单验证

五、文件上传漏洞

解决方案
1、检查服务器是否判断了上传文件类型及后缀
2、定义上传文件类型白名单
3、文件上传目录禁止直行脚本解析

六、OS命令注入攻击

OS命令注入攻击指通过web应用，执行非法的操作系统命令达到攻击的目的。

如何防御
1、后端对前端提交内容进行规则限制（比如正则表达式）
2、在调用系统命令前对所有传入参数进行命令行参数转义过滤
3、不要直接拼接命令语句，借助一些工具做拼接、转义预处理，例如Node.js的shell-escape npm包