【内容总结自：极客时间：浏览器工作原理与实现--李兵】仅作为自己学习记录总结
什么是 XSS？
XSS 全称是 Cross Site Scripting，为了与“CSS”区分开来，故简称 XSS，翻译过来就是“跨站脚本”。
XSS 攻击可以做什么？
- 窃取 Cookie 信息。通过“document.cookie”获取 Cookie 信息
- 监听用户行为。使用“addEventListener”接口来监听键盘事件，获取用户输入的信息
- 修改 DOM 伪造假的登录窗口，获取用户的登录信息等（还可生成广告，影响用户体验）
- ......等
如何发起XSS攻击？
通常情况下，主要有存储型 XSS 攻击、反射型 XSS 攻击和基于 DOM 的 XSS 攻击三种方式来注入恶意脚本
存储型xss攻击：
攻击者：将一段恶意JavaScript代码提交到服务器数据库中保存
浏览器：渲染了一个公共页面，显示了【攻击者】提交的数据
用户：用户浏览的页面，包含了【攻击者】的恶意JavaScript代码
结果：【攻击者】的脚本代码就可能获取到【用户】的相关信息等
情景描述：比如一个仓库，没有大门也没有门卫（网站没做任何安全措施）。一个坏蛋（黑客）光明正大的走了进去，并找了一个空地，埋下了一颗地雷（恶意脚本）。然后有一个普通人走进了仓库（浏览页面），在普通人没有靠近地雷区域的时候，他都是出于安全的状态。普通人在仓库里逛啊逛，突然走到了地雷区域（有恶意脚本的页面），然后不小心踩到了，就炸了（xss攻击）。
反射型 XSS 攻击：
在一个反射型 XSS 攻击过程中，恶意 JavaScript 脚本属于用户发送给网站请求中的一部分，随后网站又把恶意 JavaScript 脚本返回给用户。
比如一个网址：https://www.xxx.com?name=zhangsan
通过带参数的形式，把 zhangsan 渲染到页面上
这个时候，就可以修改链接：https://www.xxx.com?name=<script>alert('你被xss攻击了')</script>
存储型和反射型的区别：一个保存在服务器的数据库中个 ，一个只是伪装在链接的参数上。
基于 DOM 的 XSS 攻击
基于 DOM 的 XSS 攻击是不牵涉到页面 Web 服务器的。具体来讲，黑客通过各种手段将恶意脚本注入用户的页面中，比如通过网络劫持在页面传输过程中修改 HTML 页面的内容，这种劫持类型很多，有通过 WiFi 路由器劫持的，有通过本地恶意软件来劫持的，它们的共同点是在 Web 资源传输过程或者在用户使用页面的过程中修改 Web 页面的数据。
如何阻止 XSS 攻击？
存储型xss攻击 和 反射型xss攻击 属于 服务端 的问题 而 基于DOM的xss攻击 则是 前端 的责任
不管是哪种类型的攻击，都是往浏览器中注入恶意脚本，然后再通过恶意脚本将获取到的信息发送到黑客部署的服务器中
1. 服务器对输入脚本进行过滤或转码
不管是反射型还是存储型 XSS 攻击，都可以在服务器端将一些关键的字符进行转码
比如最典型的
// 过滤前
code:<script>alert('xss攻击');</script>
// 过滤后
code:
除了直接过滤掉 <script>xxx</script> 之外，还可以对关键字符进行转码
// 还是上面的代码
code:<script>alert('xss攻击');</script>
// 转码后
code:<script>alert('你被xss攻击了')</script>
2. 充分利用 CSP
为了解决 XSS 攻击，浏览器中引入了内容安全策略，称为 CSP。
CSP 的核心思想是让服务器决定浏览器能够加载哪些资源，让服务器决定浏览器是否能够执行内联 JavaScript 代码。通过这些手段就可以大大减少 XSS 攻击。
在服务端对数据进行过滤和转码可以阻止xss的攻击，但是这还是不够的。还需要充分利用 CSP 等策略。
具体来讲 CSP 有如下几个功能：
- 限制加载其他域下的资源文件，这样即使黑客插入了一个 JavaScript 文件，这个 JavaScript 文件也是无法被加载的；
- 禁止向第三方域提交数据，这样用户数据也不会外泄；
- 禁止执行内联脚本和未授权的脚本；
- 还提供了上报机制，这样可以帮助我们尽快发现有哪些 XSS 攻击，以便尽快修复问题。
3. 使用 HttpOnly 属性
xss攻击主要都是来盗用 cookie 信息的。因此可以使用 HttpOnly 来保护 cookie 的安全
在服务器端给 header 设置 HttpOnly 属性
总结：
- XSS 攻击就是黑客往页面中注入恶意脚本，然后将页面的一些重要数据上传到恶意服务器。
- 常见的三种 XSS 攻击模式是存储型 XSS 攻击、反射型 XSS 攻击和基于 DOM 的 XSS 攻击。
- 这三种攻击方式的共同点是都需要往用户的页面中注入恶意脚本，然后再通过恶意脚本将用户数据上传到黑客的恶意服务器上。
- 而三者的不同点在于注入的方式不一样，有通过服务器漏洞来进行注入的，还有在客户端直接注入的。
- 针对这些 XSS 攻击，主要有三种防范策略，第一种是通过服务器对输入的内容进行过滤或者转码，第二种是充分利用好 CSP，第三种是使用 HttpOnly 来保护重要的 Cookie 信息。
- 当然除了以上策略之外，我们还可以通过添加验证码防止脚本冒充用户提交危险操作。
- 而对于一些不受信任的输入，还可以限制其输入长度，这样可以增大 XSS 攻击的难度。