【安全】XSS 类型
后面会把前端进阶的课程内容都总结一遍。有些都是很常见的知识，但是为了梳理自己的知识树，所以尽量模糊的地方都会记录
笔记列表在公众号右下角
网页的安全是我们前端必须掌握的一个知识点
我们需要了解网页有会有哪些安全漏洞，他们是怎么攻击的，我们要怎么防止攻击
而今天要突破的一个 web 安全点就是 XSS
XSS 我早就知道了，但是却不一定能完整准确地表达出来，所以请拒绝一知半解
今天要记录的内容是
1、XSS 是什么2、XSS 攻击类型3、XSS 攻击载体4、常见 的 XSS 攻击
XSS 简介
XSS 全名是， Cross-Site Script
中文名是，跨站脚本攻击
没错，就是表面意思，使用脚本，跨站攻击！
具体意思是
黑客往网页注入恶意脚本代码，通过恶意脚本，获取和控制用户信息
也许你会有一个问题
XSS 全名 的简写不是 CSS 吗？
没错！就是 CSS，但是 CSS 这个名称已经名花有主，所以为了区别，改成 XSS
XSS 类型
上面说了 XSS ，是 注入恶意脚本 的攻击方式，那么都是怎么注入的呢？
有三种方式
1、反射型，非持久性，XSS
2、存储型，持久性，XSS
3、DOM-Based 型 XSS
这名字看着挺玄乎的，完全懵圈
下面我们就来一个个介绍好了
1反射型 XSS
诱导用户点击 恶意链接，来造成一次性 XSS 攻击 的 行为，就是 反射型 XSS 攻击
这个恶意链接，通常会在末尾包含一些 恶意脚本url 作为参数
什么是恶意脚本url 作为参数？
比如这样的 url
http://xxx.com?username = <script>alert(1)</script>直接把 script 脚本当做 参数拼接在 url 上
怎么攻击？
如果你的网站没有做安全防范处理，直接获取 url 上的参数就插入 html 文档中
那么此时 脚本就会执行，就可以获取你的用户信息
我为什么要把 url 参数插入 文档中？
常见在搜索页，搜索的时候会跳转，为了通信，我们需要把搜索内容放在链接上
然后搜索结果页，需要显示当前搜索的是什么内容，所以就会把 链接上的 搜索内容 插入到页面中
比如在淘宝首页中输入信息
点击搜索，跳到商品页
看到我们输入的商品名被放到链接上了
并且被用到了页面中（也就是会插入到 HTML 文档）
如果我们不做处理，直接插入，那么参数是脚本的话，直接执行就会导致攻击的发生
还有一个问题
用户怎么才能点击我这个带有脚本的链接？
当然是给你发这个链接了
比如说你已经登录了淘宝网，浏览器存储了你的 cookie
此时，黑客给你发了一个链接 也是淘宝网，但是拼接上了他的脚本作为参数
此时当你点开这个链接的话，假设淘宝没做处理，那么这个脚本就会被插入到页面中
脚本就会执行，就可以获取到你的 cookie
这样黑客就可以登录你的 淘宝了啊！
你就会问了
谁会随便点别人发的链接？
当然是放些诈骗信息啊，在早期大家都玩 QQ 空间的时候
如果你登录了 QQ 空间（再次假设QQ 不做处理）
然后有人在群里发了一条链接（很常见）
今天是马总女儿的生日，点击链接马上送 999 Q币
现在的你当然不会点了，可是以前的你，肯定手贱点过
那么黑客不就得逞了？广撒网，总会有沙皮上钩的....
当然了，也不一定要别人发，可能是你要浏览的网页被人劫持了，
然后注入了一个恶意链接，并且显得非常诱人，你忍不住一点，然后就......
为什么叫做反射型？
服务器不安全处理请求参数，直接把请求参数原封不动 反射 在响应页面中
为什么叫做一次性和非持久性？
因为是链接，点一次才会攻击一次，点击多次就攻击多次，所以叫一次性
因为恶意脚本数据 是通过链接发送，并且由服务器直接返回给用户造成的
并没有存储在服务器，所以也称为 非持久型
2存储型XSS
存储型 XSS，把 恶意脚本 存储到 服务器中
然后当用户请求网页时，服务器就把恶意脚本返回给用户网页一加载，恶意脚本执行，于是发起攻击
具体是怎么做的呢？
我们都玩过贴吧，如果我们发表评论的时候，我们输入评论内容是恶意脚本
服务如果不作处理，直接把我们的评论内容存到服务器，然后又直接返回给用户
那么所有浏览到这个评论的用户都会执行恶意脚本，也就会被攻击了
3DOM-Base 型 XSS
dom-base 攻击是基于DOM的一种漏洞，使用 DOM 相关的属性和方法，把脚本插入到标签中
常用攻击手法就是， 闭合属性引号，强行给 标签添加额外 内容
我来假设一个场景
比如你有一个输入框，输入内容之后就生成一个内容的搜索链接插入到页面中（很傻逼的功能）
str 就是你输入的内容，会拼接到 a 标签上
'<a href="http://baidu.com?search='+ str + '"></a>'然后在输入框输入
" onclick='alert(1)' "点击搜索之后，就把输入框的内容当做 str 拼接到 a 标签中
'<a href="http://baidu.com?search='+ ' " style="box-sizing: border-box; color: rgb(0, 128, 128);">1)' " '+ '"></a>'1、使用第一个引号，把前面的地址给闭合起来
2、插入自己想要的内容
3、插入最后一个引号，闭合另一个引号
然后 JS 使用 innerHTML 插入这个 a 标签
document.body.innerHTML='<a href="http://baidu.com?search='+ str + '"></a>'这样就成功地给标签添加上了 click 事件，攻击一触即发！
加一个时间可能没什么卵用，但是我们要插入 script 标签，作用就大了
怎么插呢？
先闭合前面的 a 头标签，中间写 script 脚本，然后再闭合 尾部的 a 标签
比如这样
str = ' " > </a> <script>alert(1)</script> <a href="# '怎么攻击？
上面是攻击的原理，但是没有说怎么开始攻击的
他的攻击方式跟 反射型 XSS 很像，都是把恶意脚本当做参数 放到 url 上
然后当前端把 url 上的恶意脚本插入拼接到 dom 上时，攻击就发生了
然后呢？怎么去攻击别人啊？
额，就是把 这个带有恶意脚本的链接发给别人......
当别人点击之后，脚本被插入，脚本被执行，那么攻击就发生了
那 DOM-base 和 反射型 看起来没什么区别啊？
1、恶意脚本 都放在 url 上
2、url 都要发给别人，别人点击才能触发攻击
网上都有说他们的区别是，是否经过服务器处理
说反射型需要经过服务器，而 DOM-base 不需要经过服务器
我想了想
他们最终无非都是把 恶意脚本插入到页面中
可能是以前网页都是后端渲染，恶意脚本插入页面 的动作 是 服务器完成的，所以说反射型跟服务器有交互
而 dom-base 操作dom 只在前端，所以区别就在于是否跟服务器有交互
但是现在 前后端分离了，后端已经很少去渲染页面了， 插入恶意脚本的这个动作交给 前端来做了
那么此时，服务器可能已经不参与攻击其中了，还能说 反射型 和 dom-base 的区别 是服务器吗？
所以我个人认为
他们的区别现在不是服务器，但是还是有区别（强行区别）
反射型和 DOM-base 虽然攻击手法一样，但是
1、恶意脚本形式不一样，
2、插入点不一样
反射型，是直接插入到文档中，恶意脚本可以直接写成脚本形式
DOM-base，是利用标签的特点，插入到标签中间，但是需要对标签前后进行处理，不是一个纯粹的脚本形式
号外号外
现在插入 script 的方式已经完全不起作用了
浏览器把你插入的 script 脚本当做字符串处理了，不会执行你的脚本了
所以别妄想在 url 上添加你的 恶意脚本了，XSS 当场去世
看下我的插入 script 动态，然并卵
XSS 攻击载体
我们已经明白了，XSS 攻击的最根本就是 使用 恶意脚本
那么能产生攻击的恶意脚本，就是 XSS 攻击的载体
也有一个专业的名称，叫做 XSS playload
所以说
恶意脚本 = xss payload
恶意脚本，就是脚本，就是 JS，所以 所有 JS 能做的，恶意脚本都可以做
那通常使用 恶意脚本做什么呢？
1、窃取用户 cookie。
cookie 是表示用户登陆态的用户信息，拿到 cookie 之后，我们就能假冒用户，去做一些我们想做的事情
2、识别用户浏览器。
为了恶意脚本兼容。你知道的我们正常脚本要兼容，恶意脚本当然也要兼容。
因为不知道用户的浏览器类型和 版本，所以需要识别浏览器，用于编写兼容的恶意脚本
真的恐怖，恶意脚本都要兼容
3、伪造请求。
只要你执行了 恶意脚本，那么在脚本中就可以制造 get 、post 等请求
用于传输你的用户信息
4、配合钓鱼网站进行攻击
具体看下个模块
常见XSS攻击
1XSS钓鱼
在我们生活中，无处不见 钓鱼网站
其中最有效的攻击手段就是使用 XSS 配合 钓鱼网站进行攻击
这个行为又称作 XSS 钓鱼，就是 XSS + 钓鱼网站的意思
什么是钓鱼网站？
就是那些高仿的网站，比如说 高仿 淘宝，高仿 QQ空间等
XSS 钓鱼的目的是什么？利用高仿网站，骗你输入账号密码，从而盗号
怎么让你进入钓鱼网站呢？
没错，就是使用 XSS
比如使用存储型 XSS，在帖子评论中输入一个链接标签，然后存到服务器上，链接地址就是钓鱼网站，名字起得诱人
比如叫做，点击立送 999 Q币，一点，就跳到高仿网站上
然后在高仿网站上，展示一些诱人的信息，登陆立送 999Q币，诱导你去登陆
你一登陆，输入账号密码，对不起，你就被盗号了
说到这里，我有话说，我曾经QQ被盗号就是因为这个
好友给我发了信息
"我刚在相册里面发了你的相片，快去看看吧"
然后附上一条链接，
一点进去，是 QQ 空间登陆，我毫不犹豫输入密码，见登不上，还输了好几次
结果，没错，第二天就被盗号了
那么，这个攻击的重点是什么？
重点不是用户点击的链接，而是用户的输入。
我窃取你的 cookie，假冒登陆已经不适合我了，我现在要的，是你的账号密码！
所以，不要点不知名的链接，不要随便在没查清楚情况下输入账号密码！！！
2XSS 蠕虫
蠕虫，就是可以不断繁殖的意思。
而 XSS 蠕虫 也是让用户一传十，十传百这么去大范围感染的一种攻击
具体是怎么攻击的呢？
比如在博客网站
1、一个黑客发表了一篇博客，其中加入了一段恶意脚本。这个恶意脚本的作用是，执行之后，就会复制这篇带有恶意脚本的博客进行发表
2、某个用户浏览到这个博客，恶意脚本被执行，不知情情况下被复制了这个 带有恶意脚本的博客 ，然后发表在自己的博客中
因为用户登录的时候，本地会保存服务端返回的cookie，之后任何请求都会自动携带 cookie，方便让服务端知道这是哪个用户的操作
自然而然，恶意脚本调用发表博客的接口时，也会携带上用户的 cookie，这样服务端以为是用户自己发表博客，而正常响应
3、用户一浏览就会发表一篇恶意脚本的博客，用户的好友再浏览，又会发表，好友的好友浏览....
于是这样无止尽的恶意脚本的传播，就被称之为 XSS 蠕虫
我们要怎么去防御？
1、接口使用验证码。
恶意脚本发送的请求，用户是不知道的。
所以我们为了确认是用户的操作，而不是 脚本自动发起的攻击，我们可以给每个接口使用验证码。
而 脚本是很难破解 验证码的内容的，所以这是种很安全的方法。但是不排除可以暴力破解的方法
2、XSS 过滤。
当然了，上面我们提到的所有 XSS 防御方法都是能用的，只要恶意脚本不被插进来，任你是谁都无法进行攻击
最后
本次记录 XSS 到此结束了，我们已经明白了 XSS 是什么，XSS 有什么攻击方式，和 XSS 攻击载体，还有 生活遇到的 XSS 攻击