常见的web安全问题及解决方案

随着互联网的快速发展和前端的多样性，浏览器已经成一种十分重要的上网工具，也是要有越来越多的交互操作需要浏览器来支持，所以针对浏览器的安全问题也越来越重要。
浏览器安全其实是受同源策略（同域名、同端口、同协议名）保护的，但是<script>、<img>、<iframe>、<link>等标签都可以跨域加载资源，而不受同源策略的限制。
1》这些带"src"属性的标签每次加载时，浏览器会发起一次GET请求。
2》通过src属性加载的资源，浏览器限制了javascript的权限，使其不能读、写返回的内容。
常见的六大安全问题有：XSS、CSRF、点击劫持、URL跳转漏洞、SQL注入、OS命令注入攻击

===1.XSS===

XSS (Cross-Site Scripting)，跨站脚本攻击，因为缩写和 CSS重叠，所以只能叫 XSS。
XSS 的原理是恶意攻击者往 Web 页面里插入恶意可执行网页脚本代码，当用户浏览该页之时，嵌入其中 Web 里面的脚本代码会被执行，从而可以达到攻击者盗取用户信息或其他侵犯用户安全隐私的目的。
1.非持久型 XSS（反射型 XSS ）

一般是通过给别人发送带有恶意脚本代码参数的 URL，当 URL 地址被打开时，特有的恶意代码参数被 HTML 解析、执行。
非持久型 XSS 漏洞攻击有以下几点特征：
1>即时性，不经过服务器存储，直接通过 HTTP 的 GET 和 POST 请求就能完成一次攻击，拿到用户隐私数据。
2>攻击者需要诱骗点击,必须要通过用户点击链接才能发起
3>反馈率低，所以较难发现和响应修复
4>盗取用户敏感保密信息

2.持久型 XSS（存储型 XSS）

持久型 XSS 漏洞，一般存在于 Form 表单提交等交互功能，如文章留言，提交文本信息等，黑客利用的 XSS 漏洞，将内容经正常功能提交进入数据库持久保存，当前端页面获得后端从数据库中读出的注入代码时，恰好将其渲染执行。
持久型 XSS 有以下几个特点：
1.持久性，植入在数据库中
2.盗取用户敏感私密信息
3.危害面广

如何防御？

1》设置白名单CSP
通常可以通过两种方式来开启 CSP：
设置 HTTP Header 中的 Content-Security-Policy
设置 meta 标签的方式 <meta http-equiv="Content-Security-Policy">
Content-Security-Policy: default-src 'self' //只允许加载本站资源
Content-Security-Policy: img-src https://* //只允许加载 HTTPS 协议图片
Content-Security-Policy: child-src 'none' //允许加载任何来源框架

2》用户的输入永远不可信任的，最普遍的做法就是转义输入输出的内容，对于引号、尖括号、斜杠进行转义

3》HttpOnly Cookie。
这是预防XSS攻击窃取用户cookie最有效的防御手段。Web应用程序在设置cookie时，将其属性设为HttpOnly，就可以避免该网页的cookie被客户端恶意JavaScript窃取，保护用户cookie信息。

===2.CSRF===

CSRF(Cross Site Request Forgery)，即跨站请求伪造，是一种常见的Web攻击，它利用用户已登录的身份，在用户毫不知情的情况下，以用户的名义完成非法操作。

如何防御？

1》可以对 Cookie 设置 SameSite 属性。该属性表示 Cookie 不随着跨域请求发送，可以很大程度减少 CSRF 的攻击，但是该属性目前并不是所有浏览器都兼容。

2》通过Referer限制！Referer信息告诉服务器是从哪个页面链接过来的

3》目前比较完善的解决方案是加入Anti-CSRF-Token,即发送请求时在HTTP 请求中以参数的形式加入一个随机产生的token，服务器读取浏览器当前域cookie中这个token值，进行比较校验。

4》验证码操作，体验上不是很好

===3.点击劫持===

通过iframe透明化，漏出来一个按钮，诱惑用户点击。

如何防御？

1》X-FRAME-OPTIONS是一个 HTTP 响应头，在现代浏览器有一个很好的支持。这个 HTTP 响应头 就是为了防御用 iframe 嵌套的点击劫持攻击。X-FRAME-OPTIONS有3个值可选：
DENY，表示页面不允许通过 iframe 的方式展示
SAMEORIGIN，表示页面可以在相同域名下通过 iframe 的方式展示
ALLOW-FROM，表示页面可以在指定来源的 iframe 中展示
2》通过js的方法判断，来隐藏iframe显示的页面。

<script>
    if (self == top) {
      var style = document.getElementById('click-jack')
      document.body.removeChild(style)
    } else {
      top.location = self.location
    }
  </script>

===4.url跳转漏洞===

借助未验证的URL跳转，将应用程序引导到不安全的第三方区域，从而导致的安全问题。

1》referer的限制
如果确定传递URL参数进入的来源，我们可以通过该方式实现安全限制，保证该URL的有效性，避免恶意用户自己生成跳转链接
2》加入有效性验证Token
我们保证所有生成的链接都是来自于我们可信域的，通过在生成的链接里加入用户不可控的Token对生成的链接进行校验，可以避免用户生成自己的恶意链接从而被利用，但是如果功能本身要求比较开放，可能导致有一定的限制。

===5.SQL注入===

SQL注入的本质:数据和代码未分离，即数据当做了代码来执行。
有可能会造成获取数据库信息、管理员后台用户名和密码、读取服务器敏感文件等问题，甚至修改数据库内容。

如何防御？

1》严格限制Web应用的数据库的操作权限，给此用户提供仅仅能够满足其工作的最低权限，从而最大限度的减少注入攻击对数据库的危害
2》后端代码检查输入的数据是否符合预期，严格限制变量的类型，例如使用正则表达式进行一些匹配处理。
3》对进入数据库的特殊字符（'，"，，<，>，&，，; 等）进行转义处理，或编码转换*。基本上所有的后端语言都有对字符串进行转义处理的方法，比如 lodash 的 lodash._escapehtmlchar 库。
4》所有的查询语句建议使用数据库提供的参数化查询接口，参数化的语句使用参数而不是将用户输入变量嵌入到 SQL 语句中，即不要直接拼接 SQL 语句。例如 Node.js 中的 mysqljs 库的 query 方法中的 ? 占位参数。

===6.OS命令注入攻击===

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

如何防御？

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