这是我参与「第四届青训营 」笔记创作活动的的第11天
初识 HTTP
背景知识
当我们在浏览器中输入 toutiao.com 回车后：
首先，我们在地址栏里面输入了一个字符串，比如说这里输入的是 toutiao.com，之后浏览器会有专门来处理输入信息的部分，他会识别出你的意图，是想访问 www.toutiao.com ，处理之后得到了一个完整的请求地址，交给浏览器专门发起请求的内核部分，发起一个真实请求，然后经过网络到达所部署的服务器。当然，服务器也不是说单一一台服务器，前面还会有一些复杂的处理过程。服务器能够输入到这个请求，并且处理到响应了之后经由互联网，把最后的结果交给浏览器，浏览器读取响应，然后经过一些渲染的过程，最后就是我们所看到的界面了。
概念
什么是 HTTP：
超文本传输协议 (HTTP) 是万维网的基础，用于通过超文本链接加载网页。HTTP 是应用层协议，基于 TCP 协议，旨在在联网设备之间传输信息，并在网络协议栈的其他层之上运行。HTTP 上的典型流涉及客户端计算机向服务器发出请求，然后服务器发送响应消息。
特点
- 每个 HTTP 请求都会分为请求和响应两部分
- 简单可扩展
- 无状态，每一个协议之间都是相互孤立的
协议分析
发展历程
HTTP/2：更快、更稳定、更简单
有别于 HTTP/1.1 在连接中的明文请求，HTTP/2 将一个 TCP 连接分为若干个流（Stream），每个流中可以传输若干消息（Message），每个消息由若干最小的二进制帧（Frame） 组成。HTTP/2 中，每个用户的操作行为被分配了一个流编号（Stream ID），这意味着用户与服务端之间创建了一个 TCP 通道；协议将每个请求分割为二进制的控制帧与数据帧部分，以便解析。
帧 (frame)
HTTP/2 通信的最小单位，每个帧都包含帧头，至少也会标识出当前帧所属的数据流。
消息
与逻辑请求或响应消息对应的完整的一系列帧。
数据流
已建立的连接内的双向字节流，可以承载一条或多条消息。
特性：
- HTTP/2 连接都是永久的，而且仅需要每个来源一个连接
- 流控制：阻止发送方向接收方发送大量数据的机制
- 服务器推送：服务端向客户端发送比客户端请求更多的数据。这允许服务器直接提供浏览器渲染页面所需资源，而无须浏览器在收到、解析页面后再提起一轮请求，节约了加载时间。
HTTPS (Hypertext Transfer Protocol Secure)
HTTPS（安全的HTTP）是 HTTP 协议的加密版本。它通常使用 SSL 或者 TLS 来允许网上加密客户端和服务器之间的所有通信。
加密
- 对称加密：加密和解密都是使用同一个密钥
- 非对称加密，加密和解密需要使用两个不同的密钥：公钥（public key） 和 私钥（private key）
demo
报文结构
HTTP 协议采用了请求/响应模型。客户端向服务器发送一个请求，请求头包含请求的方法、URI、协议版本、以及包含请求修饰符、客户信息和内容的类似于 MIME 的消息结构。服务器以一个状态行作为响应，相应的内容包括消息协议的版本，成功或者错误编码加上包含服务器信息、实体元信息以及可能的实体内容。
HTTP 协议的请求报文和响应报文的结构基本相同，由三大部分组成：
- 起始行（start line）：描述请求或响应的基本信息；
- 头部字段集合（header）：使用 key-value 形式更详细地说明报文；
- 消息正文（entity）：实际传输的数据，它不一定是纯文本，可以是图片、视频等二进制数据。
请求行
请求行由三部分构成：
- 请求方法：是一个动词，如 GET/POST，表示对资源的操作；
- 请求目标：通常是一个 URI，标记了请求方法要操作的资源；
- 版本号：表示报文使用的 HTTP 协议版本。
Method
| 请求方法 | |
|---|---|
| GET | 请求一个指定资源的表示形式。使用GET的请求应该只被用于获取数据 |
| POST | 用于将实体提交到指定的资源，通常导致在服务器上的状态变化或副作用 |
| PUT | 用请求有效载荷替换目标资源的所有当前表示 |
| DELETE | 删除指定的资源 |
| HEAD | 请求一个与GET请求的响应相同的响应，但没有响应体 |
| CONNECT | 建立一个到由目标资源标识的服务器的隧道 |
| OPTIONS | 用于描述目标资源的通信选项 |
| TRACE | 沿着到目标资源的路径执行一个消息环回测试 |
| PATCH | 用于对资源应用部分修改 |
特点：
- Safe（安全的）：不会修改服务器的数据的方法。如：GET、HEAD、OPTIONS
- Idempotent（幂等）：同样的请求被执行一次与连续执行多次的效果是一样的，服务器的状态也是一样的。
- 所有 safe 的方法都是 Idempotent 的。如：GET、HEAD、OPTIONS、PUT、DELETE
状态行
状态行同样也是由三部分构成：
- 版本号：表示报文使用的 HTTP 协议版本；
- 状态码：一个三位数，用代码的形式表示处理的结果，比如 200 是成功，500 是服务器错误；
- 原因：作为数字状态码补充，是更详细的解释文字，帮助人理解原因。
状态码
常见状态码
- 200 OK —— 客户端请求成功
- 301 —— 资源（网页等）被永久转移到其它URL
- 302 —— 临时跳转
- 401 Unauthorized —— 请求未经授权
- 404 —— 请求资源不存在，可能是输入了错误的URL
- 500 —— 服务器内部发生了不可预期的错误
- 504 GatewayTimeout —— 网关或者代理的服务器无法在规定的时间内获得想要的响应
RESTful API
RESTful API ：一种API设计风格；
REST —— Representational State Transfer
- 每一个URI代表一种资源；
- 客户端和服务器之间，传递这种资源的某种表现层；
- 客户端通过 HTTPmethod，对服务器端资源进行操作，实现"表现层状态转化"。
demo
| 请求 | 返回码 | 含义 |
|---|---|---|
| GET /zoos | 200 OK | 列出所有动物园，服务器成功返回了 |
| POST /zoos | 201 CREATED | 新建一个动物园，服务器创建成功 |
| PUT /zoos/ID | 400 INVALID REQUEST | 更新某个指定动物园的信息（提供该动物园的全部信息）。用户发出的请求有错误，服务器没有进行新建或修改数据的操作 |
| DELETE /zoos/ID | 204 NO CONTENT | 删除某个动物园，删除数据成功 |
常用请求头
| Accept | 接收类型，表示浏览器支持的MIME类型（对标服务端返回的Content-Type） |
| Content-Type | 客户端发送出去实体内容的类型 |
| Cache-Control | 指定请求和响应遵循的缓存机制，如no-cache |
| If-Modified-Since | 对应服务端的Last-Modified，用来匹配看文件是否变动，只能精确到1s之内 |
| Expires | 缓存控制，在这个时间内不会请求，直接使用缓存，服务端时间 |
| Max-age | 代表资源在本地缓存多少秒，有效时间内不会请求，而是使用缓存 |
| If-None-Match | 对应服务端的ETag，用来匹配文件内容是否改变（非常精确） |
| Cookie | 有cookie并且同域访问时会自动带上 |
| Referer | 该页面的来源URL(适用于所有类型的请求，会精确到详细页面地址，csrf拦截常用到这个字段) |
| Origin | 最初的请求是从哪里发起的（只会精确到端口），Origin比Referer更尊重隐私 |
| User-Agent | 用户客户端的一些必要信息，如UA头部等 |
常用响应头
| Content-Type | 服务端返回的实体内容的类型 |
| Cache-Control | 指定请求和响应遵循的缓存机制，如no-cache |
| Last-Modified | 请求资源的最后修改时间 |
| Expires | 应该在什么时候认为文档已经过期,从而不再缓存它 |
| Max-age | 客户端的本地资源应该缓存多少秒，开启了Cache-Control后有效 |
| ETag | 资源的特定版本的标识符，Etags类似于指纹 |
| Set-Cookie | 设置和页面关联的cookie，服务器通过这个头部把cookie传给客户端 |
| Server | 服务器的一些相关信息 |
| Access-Control-Allow-Origin | 服务器端允许的请求Origin头部（譬如为*） |
缓存
浏览器缓存分为强缓存和协商缓存：
强缓存
强缓存是根据返回头中的 Expires 或者 Cache-Control 两个字段来控制的，都是表示资源的缓存有效时间。
- Expires，时间戳
- Cache-Control
- 可缓存性
- no-cache：协商缓存验证
- no-store：不使用任何缓存
- 到期
- max-age：单位是秒，存储的最大周期，相对于请求的时间
- 重新验证 重新加载
- must-revalidate：一旦资源过期，在成功向原始服务器验证之前，不能使用。
- 可缓存性
协商缓存
协商缓存是由服务器来确定缓存资源是否可用。
- Etag/If-None-Match：资源的特定版本的标识符，类似于指纹
- Last-Modified/If-Modified-Since：最后修改时间
请求流程
cookie
当服务器收到 HTTP 请求时，服务器可以在响应头里面添加一个Set-Cookie选项。浏览器收到响应后通常会保存下 Cookie，之后对该服务器每一次请求中都通过Cookie请求头部将 Cookie 信息发送给服务器。另外，Cookie 的过期时间、域、路径、有效期、适用站点都可以根据需要来指定。
| 键值对 | 作用 |
|---|---|
| Name=value | 各种cookie的名称和值 |
| Expires=Date | Cookie 的有效期，缺省时Cookie仅在浏览器关闭之前有效。 |
| Path=Path | 限制指定Cookie 的发送范围的文件目录，默认为当前 |
| Domain=domain | 限制cookie生效的域名，默认为创建cookie的服务域名 |
| secure | 仅在 HTTPS 安全连接时，才可以发送 Cookie |
| HttpOnly | JavaScript 脚本无法获得Cookie |
| SameSite=[None|Strict|Lax] | • None 同站、跨站请求都可发送 • Strict 仅在同站发送 • Lax 允许与顶级导航一起发送，并将与第三方网站发起的GET请求一起发送 |
场景分析
静态资源
可以看到，状态码为 200，from disk cache 表示来自磁盘缓存，说明这个请求是从本地缓存里拿到的响应。
静态资源部署方案
静态资源方案：缓存 + CDN + 文件名 hash
-
CDN ：Content Delivery Network
- 通过用户就近性和服务器负载的判断，CDN 确保内容以一种极为高效的方式为用户的请求提供服务
- 通过用户就近性和服务器负载的判断，CDN 确保内容以一种极为高效的方式为用户的请求提供服务
-
文件名 hash
- 为了解决强缓存更新问题，将文件摘要（
hash）作为资源路径 (URL) 构成的一部分。
- 为了解决强缓存更新问题，将文件摘要（
小结：
一般静态资源部署的时候会设置一定缓存的策略，然后把这个资源放到 CDN 边上，然后同时在打包的时候，对文件名做一些版本号，或者是根据内容 hash 打包策略。这三部完整的加一起是一个比较常用的静态资源的一个部署方案。
登录
- 业务场景：表单登录
- 技术方式：SSO
跨域
首先一个 url 是由：协议、域名、端口三部分组成。（一般端口默认80）如：blog.moonlet.cn:80
当一个请求url的协议、域名、端口三者之间的任意一个与当前页面 url 不同即为跨域。
解决方案
CORS (Cross-Origin Resource Sharing)：跨域资源共享
- 预请求：获知服务端是否允许该跨源请求（复杂请求）
- 相关协议头
- Access-Control-Allow-Origin
- Access-Control-Expose-Headers
- Access-Control-Max-Age
- Access-Control-Allow-Credentials
- Access-Control-Allow-Method
- Access-Control-Allow-Headers
- Access-Control-Request-Method
- Access-Control-Request-Headers
- Origin
代理服务器
同源策略（Same Orgin Policy） 是一种约定，它是浏览器核心也最基本的安全功能，它会阻止一个域的js脚本和另外一个域的内容进行交互，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。
浏览器先访问代理服务器，让代理服务器作为代理去访问服务器，拿到之后再返回数据给浏览器。
登录
1. 向什么地址做了什么动作？
- 使用 POST 方法
- 目标域名 sso.toutiao.com
- 目标 path/quick_login/v2/
2. 携带了哪些信息，返回了哪些信息
- 携带信息
- Postbody，数据格式为 form
- 希望获取的数据格式为 json
- 已有的 cookie
- 返回信息
- 数据格式 json
- 种 cookie 的信息
下一次进入页面为什么能记住登陆态呢？
Session + cookie
cookie 存储用户 sessionID，刷新页面时发送身份匹配验证请求。用户存在登陆 session 即为登录状态，否则为未登录或登录超时。
Session 是指服务器为某个会话开启的一段独特的存储空间（会话是指一个终端用户与交互系统进行通讯的过程，比如说我先登录，再查看我的邮箱内容，这个过程就是一个会话），一个 Session 用唯一的 SessionId 对应一段存储空间。
JWT(JSON web token)
客户端通过登录验证后，服务器会返回给客户端一个加密的 token，然后当客户端再次向服务器发起连接时，带上 token，服务器直接对 token 进行校验即可完成权限校验。
SSO (Single Sign On)：单点登录
单点登录 (SSO) 是一种身份认证方法，用户一次可通过一组登录凭证登入会话，在该次会话期间无需再次登录，即可安全访问多个相关的应用程序和服务。
- 点击右上角——发文章
- 跳转后的网站为什么自动登录？
流程：
SSO 身份验证的一般工作原理是：
- 用户使用 SSO 登录凭证登录到一个可信的应用程序或连接所有可信应用程序的中央门户网站。
- 用户成功通过身份验证后，SSO 解决方案将生成一个会话身份验证令牌，其中包含关于用户身份的特定信息。 该令牌会存储在用户的 Web 浏览器或 SSO 或 IAM 服务器上。
- 用户尝试访问其他可信的应用程序中时，该应用程序会检查 SSO 或 IAM 服务器，以确定用户是否通过会话身份验证。 若通过，SSO 解决方案会使用由数字证书签署的身份验证令牌来验证用户，并为用户提供该应用程序的访问权限。 若未通过，则会提示用户重新输入登录凭证。
