浏览器本地存储：Cookie \ WebStorage \ IndexeDB
WebStorage :分为LocalStorage 和 sessionStorage
Cookie（状态存储）:
最开始的设计目的是为了弥补HTTP在状态管理上的不足，HTTP本身是一个无状态协议：客户端发送请求给服务器，服务器响应，就没了，下次请求，服务器并不知道客户端是谁
想同一个域名下发送请求，都会携带相同的Cookie，服务器拿到Cookie进行解析，便能拿到客户端的状态
- 容量缺陷，上限只有4KB
- 性能缺陷，Cookie紧跟域名，不管需不需要，都会携带，造成一些性能浪费
- 安全缺陷，纯文本形式的Cookie 在客户端和服务器之间传递，很容易被截获，在有效期内可以重新发送给服务器。HttpOnly为false的情况下，Cookie信息可以直接通过JS读取
- 容量，上限是5MB，仅对于同一个域名持久存储
- 只存在客户端，默认不参与客户端和服务器之间的通信，避免性能和劫持安全问题
- 接口封装，setItem getItem 进行操作
sessionStorage：
- 容量。容量上限也为 5M。
- 只存在客户端，默认不参与与服务端的通信。
- 接口封装。除了
sessionStorage名字有所变化，存储方式、操作方式均和localStorage一样。
sessionStorage和localStorage有一个本质的区别，那就是前者只是会话级别的存储，并不是持久化存储。会话结束，也就是页面关闭，这部分sessionStorage就不复存在了。IndexedDB：
是运行在浏览器的非关系型数据库，本质上是一个数据库，理论上容量没有上限
- 键值对存储。内部采用
对象仓库存放数据，在这个对象仓库中数据采用键值对的方式来存储。 - 异步操作。数据库的读写属于 I/O 操作, 浏览器中对异步 I/O 提供了支持。
- 受同源策略限制，即无法访问跨域的数据库。
从输入URL到页面呈现发生了什么？
网络请求阶段：
- 构建请求：浏览器会先构建请求行：GET / HTTP/1.1
- 查找强缓存 ：先检查强缓存，命中直接执行，否则进入下一步
- DNS解析： 浏览器有提供DNS数据缓存，如果缓存中有，会直接走缓存，如果没有指定端口，默认采用对应IP的80端口
- 建立TCP链接：TCP 传输控制协议 面向链接的，可靠的，基于字节流的传输层通信协议
TCP的三次握手： - 发送HTTP请求：请求行、请求头、请求体
- 响应行、响应头、响应体：由HTTP协议版本、状态码、状态描述组成
- keep-alive
XSS攻击
- 窃取Cookie
- 监听用户行为，比如输入了账号密码信息直接发送给黑客服务器
- 修改DOM伪造登录表单
- 在页面生成悬浮广告
存储型：恶意脚本存储到服务端的数据库，然后客户端执行脚本，从而达到攻击效果
常见场景：留言评论区提交一段脚本代码，如果前后端没有做好转义的工作，那评论内容存到了数据库，在页面直接执行
反射型：恶意脚本作为网络请求的一部分
文档型：在数据传输的过程中劫持到网络数据包，然后修改了里面的html文档
比如：WiFi路由器劫持、本地恶意软件等
解决：不要相信客户端的输入，转义，过滤等
利用CSP和HttpOnly属性
CSRF攻击
利用服务器的验证漏洞和用户之前的登录状态来模拟用户进行操作。
诱导点击图片或链接，自动发送GET、POST请求、诱导发送请求
防范措施：
利用Cookie的SameSite属性：strict lax none
