前端安全修养

前言

随着互联网的高速发展，信息安全问题已经成为国家高度关注的问题。
在现代web开发中，几乎大部分的安全问题都需要服务器端进行处理。前端因为面向客户端一直被称之没有安全可言。 本篇讲解的安全内容只是为了大家做好防护，切记遵纪守法。

1、跨站脚本攻击XSS

XSS概念

Cross-Site Scripting（跨站脚本攻击）简称 XSS，是一种代码注入攻击。攻击者通过在目标网站上注入恶意脚本，使之在用户的浏览器上运行。利用这些恶意脚本，攻击者可获取用户的敏感信息如 Cookie、SessionID 等，进而危害数据安全。为了和 CSS 区分，这里把攻击的第一个字母改成了 X，于是叫做 XSS。

XSS一直被认为是web安全中危害较大的漏洞，在owasp的top10排行（OWASP是一个开源的、非盈利的全球性安全组织，致力于应用软件的安全研究）中一直处于前三。

本质原理包含：
在HTML中内嵌的文本中，恶意内容以script标签形成注入。

<div>123</div>   //本来div里面要渲染123
<div><script src="xxxx"></script></div>   //结果注入了一个script标签加载了一段恶意代码

在标签属性中，恶意内容包含引号，从而突破属性值的限制，注入其他属性或者标签。

 <input value="123">   //本来value里面要渲染123
 <input value="1"><script src="xxx"></script>">  
 1"/><script src="xxx"></script>  //一段恶意代码

在标签的 href、src 等属性中，包含 javascript: 等可执行代码。

 <a href="xxx">跳转</a> //本来href里面要渲染一个跳转地址
 <a href="javascript:alert(1);">跳转</a> //结果里面加入了js代码

在 onload、onerror、onclick 等事件中，注入不受控制代码。

<input value="123">   //本来value里面要渲染123
<input value="123"/> <img src=# onerror="alert(1)">  
1"/> <img src=# οnerrοr="alert(1)  //一段恶意代码

• 在 style 属性和标签中，包含类似 background-image:url("javascript:..."); 的代码
  注意：很多新版本浏览器已经可以防范

XSS的分类

反射性XSS

有些情况下用户在请求后台时候，会携带一部分数据。当客户端进行访问某条链接时，攻击者可以将恶意代码植入到URL，如果服务端没有对URL携带的参数做判断或者过滤处理，直接返回响应页面，那么XSS攻击代码就会一起被传输到用户的浏览器，从而触发反射型XSS。

例如，当用户进行搜索时，返回结果通常会包括用户原始的搜索内容，如果攻击者精心构造包含XSS恶意代码的链接，诱导用户点击并成功执行后，用户的信息就可以被窃取，甚至可以模拟用户进行一些操作。它的利用过程如图所示。

反射性特点

反射型XSS不会永久存储用户的数据，仅发生在用户的一次访问过程之后。这个过程就像一次反射，因此得名反射型XSS。反射型XSS的触发条件比较苛刻，需要攻击者想方设法引导用户点击链接，但产生的危害不容忽视。

反射性解决方案：

• 后端: 对搜索的
  1、内容进行过滤
  2、白名单处理
  3、对敏感字符进行转义

• 前端: 对展示到前端的数据
  1、用innerText进行处理
  2、转义处理escapeHTML()
  3、白名单助理过滤到非法内容

存储型XSS（持久性）

存储型XSS又称持久型XSS，攻击脚本将被永久地存放在目标服务器的数据库或文件中，具有很高的隐蔽性。
攻击方式：这种攻击多见于论坛、博客和留言板，攻击者在发帖的过程中，将恶意脚本连同正常信息一起注入帖子的内容中。随着帖子被服务器存储下来，恶意脚本也永久地被存放在服务器的后端存储器中。当其他用户浏览这个被注入了恶意叫你本的帖子时，恶意脚本会在他们的浏览器中得到执行。

存储型和反射性的区别：反射性是一次性的，存储型是存储到服务器，他的扩散性危害性更大。
防御方式：和反射型一样，因为都是要经过服务器，所以大部分还是要靠服务器端解决。前端只能在接收数据后，渲染前进行防护。
不管是反射型还是存储型前端都不能在发送前处理，因为前端在发送前的数据都是可以伪造的。

DOM型XSS

DOM型XSS是基于DOM文档对象模型的一种漏洞。攻击者通过拼接有恶意地址发给受害者，受害者点击后，在用户页面插入隐蔽标签，引入外部js，向攻击者发送受害者的隐私信息

和反射型XSS以及储存型XSS不同的是，DOM型XSS没有经过服务器。所以DOM型的XSS需要前端程序员进行优化
XSS攻击案例

1. 银川XSS案件 https://mp.weixin.qq.com/s/5zif8NMftemFoQoXiHj43w
2. 2007年12月，百度空间收到蠕虫攻击，用户之间开始转发垃圾短消息。
3. QQ 邮箱 m.exmail.qq.com 域名被发现反射型 XSS 漏洞
4. 2011年新浪微博曾被黑客 XSS 攻击，黑客诱导用户点击一个带有诱惑性的链接，便会自动发送一条带有同样诱惑性链接微博。攻击范围层层扩大，也是一种蠕虫攻击。

XSS的危害

1. 网络钓鱼，包括盗取各类用户账号；
2. 窃取用户cookies资料，从而获取用户隐私信息，或利用用户身份进一步对网站执行操作；
3. 劫持用户（浏览器）会话，从而执行任意操作，例如进行非法转账、强制发表日志、发送电子邮件等；
4. 强制弹出广告页面、刷流量等；
5. 网页挂马；
6. 进行恶意操作，例如任意篡改页面信息、删除文章等；
7. 进行大量的客户端攻击，如DDoS攻击；
8. 结合其他漏洞，如CSRF漏洞，实施进一步作恶；
9. 传播跨站脚本蠕虫等。

XSS的防范

反射型XSS和储存型的XSS是利用完善的后台过滤方式进行预防的。
前端在发送数据时无法对这两种类型的XSS进行有效的防护，因为所有的请求都可以拦截伪造。只有在展示数据的时候进行过滤优化。
而DOM型的XSS是不经过服务器的，所以需要前端程序员进行防护。
在使用 .innerHTML、.outerHTML、document.write() 时要特别小心，不要把不可信的数据作为 HTML 插到页面上，而应尽量使用 .innerText .textContent、.setAttribute() 等。
DOM 中的内联事件监听器，如 location、onclick、onerror、onload、onmouseover 等，<a> 标签的 href 属性，img的onerror属性，JavaScript 的 eval()等，都能把字符串作为代码运行。如果不可信的数据拼接到字符串中传递给这些 API，很容易产生安全隐患，请务必避免。
防范存储型和反射型 XSS 是后端的责任。而 DOM 型 XSS 攻击不发生在后端，是前端的责任。