[深入17] HTTP 和 HTTPS

2021-08-21  本文已影响0人  woow_wu7

导航

[深入01] 执行上下文
[深入02] 原型链
[深入03] 继承
[深入04] 事件循环
[深入05] 柯里化 偏函数 函数记忆
[深入06] 隐式转换 和 运算符
[深入07] 浏览器缓存机制(http缓存机制)
[深入08] 前端安全
[深入09] 深浅拷贝
[深入10] Debounce Throttle
[深入11] 前端路由
[深入12] 前端模块化
[深入13] 观察者模式 发布订阅模式 双向数据绑定
[深入14] canvas
[深入15] webSocket
[深入16] webpack
[深入17] http 和 https
[深入18] CSS-interview
[深入19] 手写Promise
[深入20] 手写函数

[react] Hooks

[部署01] Nginx
[部署02] Docker 部署vue项目
[部署03] gitlab-CI

[源码-webpack01-前置知识] AST抽象语法树
[源码-webpack02-前置知识] Tapable
[源码-webpack03] 手写webpack - compiler简单编译流程
[源码] Redux React-Redux01
[源码] axios
[源码] vuex
[源码-vue01] data响应式 和 初始化渲染
[源码-vue02] computed 响应式 - 初始化,访问,更新过程

前置知识

一些单词

protocol:协议
permanent:永久的
permanently:永久地
temporary:暂时的
grammar:语法

TCP/IP协议 - 应用层,传输层,网络层,数据链路层

( TCP和UDP ) 传输层协议使用 ( IP协议 )网络层协议 从一个网络传送数据包到另一个网络

image

TCP首部图解

image
image

TCP三次握手

三次握手:指的是建立TCP链接时,需要客户端和服务端总的发送的三个包

image image

TCP建立链接 - 为什么需要第三次握手

为什么只有三次握手,才能确认双方的发送和接收能力是否正常,而两次却不可以??

四次挥手

TIME_WAIT状态 - 2MSL状态

为什么第四次挥手后,客户端要进入TIME_WAIT状态,而不是直接关闭

一些重要的HTTP状态码

100 Continue ------------------------- 客户端应继续请求
101 Switching Protocols -------------- 切换协议,协议升级

200 ok ------------------------------- 请求被正常处理
201 created -------------------------- http-post请求的结果,表示 ( 成功创建一个或多个资源 )
202 accepted ------------------------- http-post请求的结果,表示 ( 接受请求,但尚未处理完成 )
204 no content ----------------------- 请求处理成功,但没有资源可以返回
206 partial content ------------------ 请求部分资源

301 moved permanently ---------------- 永久重定向,需要变更书签引用
302 Found ---------------------------- 临时重定向
303 set other ------------------------ 临时重定向,应采用 GET 方法获取资源
304 not modified --------------------- 资源未被修改,协商缓存
307 Temporary Redirect --------------- 临时重定向

400 bad request ---------------------- 错误的请求
401 unauthorized --------------------- 认证失败 ------------------------- (未授权)
403 forbidden ------------------------ 认证成功,但权限不够 ------------- (权限不够)
404 not found ------------------------ 资源未找到
405 method not allowed --------------- 请求方法错误

500 Internal Server Error ------------ 服务端错误
502 Bad Gateway ---------------------- 网关错误
503 Service Unavailable -------------- 服务器过载
504 Gateway Time Out ----------------- 网关超时

HTTP

HTTP的缺点

<table bgcolor=orange><tr><td>HTTP是 明文传播,可能会遭到 窃听</td></tr></table>

加密的对象有哪些 - (加密处理防止被窃听)

通信线路的加密

通信内容的加密

<table bgcolor=orange><tr><td>HTTP不验证通信双方的身份,可能会遭遇伪装</td></tr></table>

不验证通信双方的隐患

image

<table bgcolor=orange><tr><td>HTTP无法验证报文的完整性,可能会被篡改</td></tr></table>

什么是中间人攻击

使用http协议确认确认报文完整性的方法

HTTP报文 = 报文首部 + 空行 + 报文主体

请求报文首部 = 请求行 + 请求头

响应报文首部 = 响应行 + 响应头

image image image image image

HTTPS

HTTPS = HTTP + 加密 + 认证 + 完整性保护

image image image image

HTTPS的加密方式 - 混合加密,即对称加密和非对称加密一起使用

image

公开密钥加密方式 - 无法证明公开密钥本身就是货真价实的公开密钥

证明公开密钥正确定的证书

数字证书认证机构的业务流程

image image

https的通信过程 - SSL握手过程

image

url到页面显示过程

  1. DNS域名解析 // 将域名解析成IP地址
  2. 建立TCP链接 // 三次握手
  3. 客户端发起HTTP请求
  4. 服务器处理请求,并返回HTTP报文
  5. 浏览器解析渲染页面
  6. 断开TCP链接 // 四次挥手
url到页面显示的过程


1. DNS域名解析
- DNS是 ( domain name system ) 域名系统的缩写
- 将域名解析成ip地址
- 一个域名对应一个以上的ip地址
- 为什么要将域名解析成ip地址?
    - 因 ( 为TCP/IP网络 ) 是通过 ( ip地址 ) 来确定 ( 通信对象 ),不知道ip就无法将消息发送给对方
- DNS域名解析的过程:// 递归查询和迭代查询
1. ( 浏览器 ) 中查询 DNS 缓存,有则进入建立tcp链接阶段,下面同理
2. ( 本机的操作系统 ) 中查询 DNS 缓存
3. ( 本机的host ) 文件中查找 DNS 缓存
4. ( 路由器 ) 中查询 DNS 缓存
5. ( 运营商服务器 ) 中查询 DNS 缓存
6. 迭代查询 // 根域名/一级域名/二级域名 ....blog.baidu.com
    - .com
    - .baidu
    - blog
    - 还未找到就报错
7. DNS域名解析总结:
  - 1. 浏览器DNS缓存 => 操作系统DNS缓存 => 本机host文件 => 路由器 => 运营商 => 以上都没有DNS缓存,就递归查询一级/二级/三级域名
  - 2. ( 递归查询 ) 和 ( 迭代查询 ) 的区别
    - 递归查询: 询问者的角色是变化的,a->b->c->d->c->b->a
    - 迭代查询: 询问者的角色始终保持不变,每次都会将询问结果返回给同一个询问者,然后迭代,直到找到想要的结果; a->b->a, a->c->a 



2. 建立tcp链接 // 三次握手
- 第一次握手
    - 客服端发送一个 标志位SYN=1,序号Seq=x的链接包给服务端
        - SYN:表示发起一个新链接,( Synchronize Sequence Numbers )
        - Seq:序号是随机的
- 第二次握手
    - 服务端发送一个 标志位SYN=1,ACK=1,确认号Ack=x+1,序号Seq=y的确认包给客户端
    - 标志位 ACK 表示响应
- 第三次握手
    - 客户端发送一个 SYN=0,ACK=1,确认号Ack=y+1,序号Seq=x+1的确认包给服务器
    - 为什么需要三次握手
        - 之所以要第三次握手,主要是因为避免无效的连接包延时后又发送到服务器,造成服务器以为又要建立链接的假象,造成错误
        
        
3. 客户端发送http请求
4. 服务端处理请求,并返回http响应报文


5. 浏览器解析渲染
  - 遇见HTML标记,浏览器调用HTML解析器,解析成Token并构建DOM树
  - 遇见style/link标记,浏览器调用css解析器,解析成CSSOM树
  - 遇见script标记,浏览器调用js解析器,处理js代码(绑定事件,可能会修改DOM tree 和 CSSOM tree)
  - 将DOM 和 CSSOM 合并成 render tree
  - 根据render tree计算布局(layout布局)
  - 将各个节点的颜色绘制到屏幕上(paint渲染)
  - 如果paint存在分层,则需要 (composite合成)



6. 断开TCP链接 // 四次挥手,( FIN : 表示释放链接 )
- 第一次挥手:浏览器发起,告诉服务器我请求报文发送完了,你准备关闭吧
- 第二次挥手:服务器发起,告诉浏览器我请求报文接收完了,我准备关闭了,你也准备吧
- 第三次挥手:服务器发起,告诉浏览器,我响应报文发送完了,你准备关闭吧
- 第四次挥手:浏览器发起,告诉服务器,我响应报文接收完了,我准备关闭了,你也准备吧
- 先是服务器先关闭,再是浏览器关闭

递归查询 和 迭代查询 的区别

image

TCP 和 UDP 的区别

image

HTTP1.0 和 HTTP1.1 的区别

HTTP1.0

HTTP1.0

(1) 无状态
1. 服务器不跟踪记录请求过的状态
2. 对于无状态的特性可以借助 ( cookie/session ) 机制来做 ( 身份认证 ) 和 ( 状态记录 )

(2) 无连接
- 无连接导致的性能缺陷主要有两种:
    - 无法复用链接
        - 每次发送请求,都需要进行tcp链接,即三次握手和四次挥手,使得网络的利用率极低
    - 对头阻塞
        - http1.0规定,在前一个请求响应到达之后,下一个请求才能发送,如何前一个请求阻塞,后面的就都会阻塞

HTTP1.1

HTTP1.1解决HTTP1.0的性能缺陷

HTTP1.1

(1) 长连接
- HTTP1.1默认保持长连接,数据传输完成,保持tcp链接不断开,继续使用这个通道传输数据
- 响应头:Connection: Keep-Alive
- 响应头:Keep-Alive: timeout=5, max=1000
          - timeout:指定了一个空闲连接需要保持打开状态的最小时长(以秒为单位)
          - max:在连接关闭之前,在此连接可以发送的请求的最大值

(2) 管道化
- http1.0
    - 请求1 > 响应1 --> 请求2 > 响应2 --> 请求3 > 响应3
- http1.1
    - 请求1 --> 请求2 --> 请求3 > 响应1 --> 响应2 --> 响应3
- 虽然管道化一次可以发送多个请求,但响应仍然是顺序返回,仍然无法解决对头阻塞的问题

(3) 缓存处理
- HTTP1.1新增 Cache-Control 字段
    - http1.0  =>  expires           => 是一个绝对时间点,用GMT时间格式
    - http1.1  =>  Cache-Control     => 是一个相时时间段,以秒为单位
- Cache-control: no-cache,private,max-age=123123
    - no-cache:不使用强缓存,使用协商缓存
    - max-age: 一个时间段,单位是秒
    - public:允许所有服务器缓存该资源
    - private:表示该资源仅仅属于发出请求的最终用户,这将禁止中间服务器(如代理服务器)缓存此类资源
               对于包含用户个人信息的文件,可以设置private
- Expires 和 Cache-Control 对比
    - 如果同时开启,Cache-Control 的优先级高于 Expires
    - expires是一个用GMT时间表示的时间点,Cach-Control是用秒表示的时间段,都是和浏览器本地时间做对比
    - Cache-Control 比 Expires 更加精确

(4) 断点续传
- 请求头:Range
- 响应头:Content-Range
- 原理
    - 在上传/下载资源时,如果资源过大,将其分割为多个部分,分别上传/下载
    - 如果遇到网络故障,可以从已经上传/下载好的地方继续请求,不用从头开始,提高效率
- 案例:
    - Range: bytes=0-801
    - Content-Range: bytes 0-800/801

HTTP2.0

HTTP2.0

(1) 二进制分帧
- 将所有传输的信息分割为更小的消息和帧,并对它们采用二进制格式的编码

(2) 多路复用
- 基于二进制分帧
- 在同一域名下所有访问都是从同一个tcp连接中走,http消息被分解为独立的帧,乱序发送,服务端根据标识符和首部将消息重新组装起来
image
image
image

PUT 和 POST 的区别

PUT 和 PATCH 的区别

二进制分帧

多路复用

(1) 帧和流

(2) 多路复用总结

为什么http1.0不能实现多路复用 ?

资料

HTTP和HTTPS简介 https://juejin.im/post/6844903781704925198
三次握手 https://juejin.im/post/6844903826747555847
三次握手四次挥手 https://juejin.im/post/6844903826290376717
TCP报文 https://juejin.im/post/6844903510119546887
为什么需要三次握手大白话 https://github.com/jawil/blog/issues/14
四次挥手 https://juejin.im/post/6844903958624878606#heading-7
URL到页面渲染 https://juejin.im/post/6844903761639374856
TCP和UDP:https://juejin.im/post/6844903533393788941
HTTP1.0 HTTP1.1 HTTP2.0 https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/232
关于三次握手与四次挥手面试官想考我们什么? https://juejin.im/post/6844903834708344840

上一篇下一篇

猜你喜欢

热点阅读