跨站脚本攻击（XSS）
什么是 XSS 攻击
XSS（Cross Site Scripting），为了与 CSS 区分开来，简称 XSS，就是 跨站脚本。
XSS 攻击是指黑客往 HTML 文件中或者 DOM 中 注入恶意脚本，当 用户浏览页面时利用注入的恶意脚本对用户实施攻击的⼀种手段。
XSS 有哪些的危害
1. 窃取 cookie 信息
恶意的 JS 可以通过 document.cookie 获取 Cookie 信息，然后通过 XMLHttpRequest 或者 Fetch 加上 CORS 功能将数据发送给恶意服务器；恶意服务器拿到用户的 Cookie 信息之后，就可以在其他电脑上模拟用户的登录，然后进行恶意等操作；
2. 监听用户行为
可以通过 addEventListener 事件 监听键盘事件， 比如 input 框的输入 获取账号或者密码 等私密信息，然后发送给 黑客，之后 就能拿到这些私密信息做违法的事情。
3. 修改 DOM 伪造登陆窗口，用来欺骗用户输入私密信息
通过 Dom 的基本操作，伪造一些输入私密信息的窗口诱导用户输入，比如 js 脚本 document.createElement ，appendChild 等 伪造 input 输入框，注入当前页面。
4. 在页面生成浮窗广告，影响用户体验
XSS 是如何注入的
1. 存储型 XSS 攻击
页面注入JS脚本，所有和用户交互的地方（永远不要相信用户的输入），比如评论区(所有的 input 标签)，写 script 标签 。
攻击步骤如下：
1. 黑客利用站点漏洞将⼀段恶意 JavaScript 代码提交到网站的数据库中;
比如 在评论区 input 中输入 <script>alert(1)</script>，后台将这段代码保存到数据库中；
2. 其他用户浏览了包含了恶意 JavaScript 脚本的页面，恶意脚本就会将用户的Cookie信息等数据上传到服务器。
上面的例子中 其他用户 看到了这条评论 都会 执行 这个 alert 操作。
存储型 XSS 攻击
2. 反射型 XSS 攻击
反射型 XSS 攻击 常见于 一些 诱导用户点击的 恶意链接。
Web 服务器不会存储反射型 XSS 攻击的恶意脚本，这是和存储型 XSS 攻击不同的地方。
攻击步骤如下：
1. 黑客通过 诱导用户去点击 恶意链接，这些 恶意链接 通过 URL 的方式 传递给了 服务器；
比如 用户点击 http://localhost:3000/?xss==<script>alert('你被xss攻击了')</script>
2. 服务器接收到请求，把 不加处理的把脚本 反射给了 浏览器端，使访问者的浏览器执行相应的脚本
反射型 XSS 的触发有后端的参与，要避免反射性 XSS，必须需要后端的协调，后端解析前端的数据时首先做相关的字串检测和转义处理。
反射型 XSS
比如 用户 访问 一个 恶意链接 http://localhost:3000/error?type=<script>alert('恶意内容')</script>
后台 nodejs 会把 用户传递给后台的 type 参数 不经处理的直接返回前端，这样就执行了<script>alert('恶意内容')</script>，这个脚本就会执行相应的逻辑。
app.get('/error',function(req,res){
res.send(`${req.query.type}`); //拿到 url 上的 type 参数，并返回给前端
});
这些还是 黑客 抓住了 网站的一些漏洞，做出的 恶意链接，如果自己做的网站处理了相应的处理，那么就没有给黑客机会钻这个漏洞。
3. 基于 DOM 的 XSS 攻击
基于 DOM 的 XSS 攻击是不牵涉到页面 Web 服务器的。具体来讲，黑客通过各种手段将恶意脚本注入用户的页面中，比如通过网络劫持在页面传输过程中修改 HTML 页⾯的内容，这种劫持类型很多，有通过 WiFi 路由器劫持的，有通过本地恶意软件来劫持的，它们的共同点是在 Web 资源传输过程或者在用户使用页面的过程中修改 Web 页面的数据。
预防措施
1. 服务器对输入脚本进行过滤或转码
转义字符&、<、>、"，'
转移字符
2. CSP 内容安全策略
CSP 的作用： 1. 限制资源获取（可以设置禁止外链的资源，只能获取本站的资源）；2. 禁止向第三方域提交数据，这样用户数据也不会外泄；3. 禁止执行内联脚本和未授权的脚本；4. 报告资源获取越权，这样可以帮助我们尽快发现有哪些XSS攻击，以便尽快修复问题。
限制方式
default-src 限制全局
制定资源类型：connect-src、img-src、media-src.........
头部设置 'Content-Security-Policy'：default-src 'self'；......
3. HttpOnly
很多 XSS 攻击 是为了 盗取 Cookie 的， 因此可以通过 使用 HttpOnly 属性来保护我们的 Cookie。HttpOnly 的作用是禁止使用 JS 来获取 Cookie， 只能在 Http 请求过程中使用。
React、Vue等框架都从框架层面引入了 XSS 防御机制，React DOM 在渲染所有输入内容之前，默认会进行转义。它可以确保在你的应用中，永远不会注入那些并非自己明确编写的内容。所有的内容在渲染之前都被转换成了字符串。
