你必须掌握的HTTP与HTTPS的那些事儿

TCP/IP网络模型

该部分内容参考自Fundebug的博客《一文搞懂TCP与UDP的区别》 网络协议是每个前端工程师都必须要掌握的知识，TCP/IP 中有两个具有代表性的传输层协议，分别是 TCP 和 UDP。 TCP/IP 是互联网相关的各类协议族的总称，比如：TCP，UDP，IP，FTP，HTTP，ICMP，SMTP 等都属于 TCP/IP 族内的协议。 这些协议可以划分为四层，分别为链路层、网络层、传输层和应用层。

  • 链路层：负责封装和解封装IP报文，发送和接受ARP/RARP报文等。
  • 网络层：负责路由以及把分组报文发送给目标网络或主机。
  • 传输层：负责对报文进行分组和重组，并以TCP或UDP协议格式封装报文。
  • 应用层：负责向用户提供应用程序，比如HTTP、FTP、Telnet、DNS、SMTP等。

TCP

当一台计算机想要与另一台计算机通讯时，两台计算机之间的通信需要畅通且可靠，这样才能保证正确收发数据。 例如，当你想查看网页或查看电子邮件时，希望完整且按顺序查看网页，而不丢失任何内容； 当你下载文件时，希望获得的是完整的文件，而不仅仅是文件的一部分，因为如果数据丢失或乱序，都不是你希望得到的结果，于是就用到了TCP。 TCP协议全称是传输控制协议是一种面向连接的、可靠的、基于字节流的传输层通信协议，由 IETF 的RFC 793定义。 TCP 是面向连接的、可靠的流协议。流就是指不间断的数据结构，你可以把它想象成排水管中的水流。

TCP的三次握手及四次挥手

TCP(Transmission Control Protocol)传输控制协议 TCP是主机对主机层的传输控制协议，提供可靠的连接服务，采用三次握手确认建立一个连接，四次挥手断开连接。

  • 三次握手
  1. 首先发送方主机向接收方主机发起一个建立连接的同步（SYN）请求； Client -> SYN -> Server
  2. 接收方主机在收到这个请求后向发送方主机回复一个同步/确认（SYN/ACK）应答； Server -> SYN / ACK -> Client
  3. 发送方主机收到此包后再向接收方主机发送一个确认（ACK），服务端收到后连接建立。 Client -> ACK -> Server
  • 四次挥手
  1. 客户端发送 FIN 给服务器； Client -> FIN -> Server
  2. 服务端收到后发送 ACK 给客户端； Server -> ACK -> Client
  3. 服务端发送FIN给客户端； Server -> Fin -> Client
  4. 客户端收到后，发送 ACK 给服务端，服务端关闭，客户端等待 2MSL 后关闭。 Client -> ACK -> Server -> CLOSED Client -> 2MSL的时间 -> CLOSED

值得注意的是： ACK 是一种确认应答，在数据通信传输中，接收站发给发送站的一种传输控制字符。它表示确认发来的数据已经接受无误。 SYN 请求建立连接，并在其序列号的字段进行序列号的初始值设定。 FIN 希望断开连接。

UDP

UDP协议全称是用户数据报协议，在网络中它与TCP协议一样用于处理数据包，是一种无连接的协议。在OSI模型中，在第四层——传输层，处于IP协议的上一层。UDP有不提供数据包分组、组装和不能对数据包进行排序的缺点，也就是说，当报文发送之后，是无法得知其是否安全完整到达的。

TCP和UDP的比较

对比

UDPTCP
是否连接无连接面向连接
是否可靠不可靠传输，不使用流量控制和拥塞控制可靠传输，使用流量控制和拥塞控制
连接对象个数支持一对一，一对多，多对一和多对多交互通信只能是一对一通信
传输方式面向报文面向字节流
首部开销首部开销小，仅8字节首部最小20字节，最大60字节
适用场景适用于实时应用（IP电话、视频会议、直播等）适用于要求可靠传输的应用，例如文件传输

总结

  • TCP向上层提供面向连接的可靠服务，UDP向上层提供无连接不可靠服务。
  • 虽然 UDP 并没有 TCP 传输来的准确，但是也能在很多实时性要求高的地方有所作为。
  • 对数据准确性要求高，速度可以相对较慢的，可以选用TCP。

HTTP与HTTPS

参考自：《HTTP与HTTPS，四次握手过程》 《那些年与面试官交手过的HTTP问题》 《在浏览器地址栏中输入URL后发生了什么》 超文本传输协议HTTP协议被用于在Web浏览器和网站服务器之间传递信息，HTTP协议以明文方式发送内容，不提供任何方式的数据加密，如果攻击者截取了Web浏览器和网站服务器之间的传输报文，就可以直接读懂其中的信息，因此，HTTP协议不适合传输一些敏感信息，比如：信用卡号、密码等支付信息。 为了解决HTTP协议的这一缺陷，需要使用另一种协议：安全套接字层超文本传输协议HTTPS，为了数据传输的安全，HTTPS在HTTP的基础上加入了SSL协议，SSL依靠证书来验证服务器的身份，并为浏览器和服务器之间的通信加密。

HTTP与HTTPS的基本概念

HTTP：是互联网上应用最为广泛的一种网络协议，是一个客户端和服务器端请求和应答的标准(TCP)，用于从WWW服务器传输超文本到本地浏览器的传输协议，它可以使浏览器更加高效，使网络传输减少。

HTTP是一个在计算机世界里专门在两点之间传输文字，图片，音频，视频等超文本数据的约定和规范。

HTTPS：是以安全为目标的HTTP通道，简单讲说是HTTP的安全版，即HTTP下加入SSL层，HTTPS的安全基础是SSL，因此加密的详细内容就需要SSL。 HTTPS协议的主要作用可以分为两种：一种是建立一个信息安全通道，来保证数据传输的安全；另一种就是确认网站的真实性。

HTTP与HTTPS有什么区别

HTTP协议传输的数据都是未加密的(明文)，因此使用HTTP协议传输隐私信息非常不安全，为了保证这些隐私数据能加密传输，于是网景公司设计了SSL(Secure Sockets Layer)协议用于HTTP协议传输的数据进行加密，从而就诞生了HTTPS。 简单来书，HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，要比http协议安全。

SSL四次握手的过程，如下图所示： {% asset_img https.png SSL的四次握手 %}

总结区别主要如下：

  1. https协议需要到ca申请证书，一般免费证书较少，因而需要一定费用。
  2. http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。
  3. http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。
  4. http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。

HTTP状态码汇总

1XX 指示信息，表示请求已接收，继续处理，HTTP/1.0不支持

  • 100 Continue： 上传大文件前使用；
  • 101 Switch Protocols：协议升级使用；
  • 102 Processing：服务器已经收到并正在处理请求，但无响应可用。

2XX 成功，表示请求已被成功接收、理解、接受

  • 200 OK：成功返回响应；
  • 201 Created：有新资源在服务器端被成功创建；
  • 202 Accepted：服务器接受并开始处理请求，但请求未处理完成；
  • 206 Partial Content：使用range协议时返回部分响应内容时的响应码。

3XX 重定向，要完成请求必须进行更进一步的操作

  • 300：特殊的重定向状态码，会返回一个有多个链接选项的页面，由用户自行选择；
  • 301：永久性重定向；
  • 302：临时性重定向；
  • 303：类似于302，重定向后的请求方法改为GET方法；
  • 304：特殊重定向状态码，服务端验证过期缓存有效后，要求客户端使用该缓存；
  • 307：类似于302，含义比302更明确，重定向后请求的方法和实体不允许变动；
  • 308：类似于301，代表永久重定向，重定向后请求的方法和实体不允许变动。

4XX 客户端错误，请求有语法错误或请求无法实现

  • 400 Bad Request：服务器认为客户端出现了错误，但不明确，一般是HTTP请求格式错误；
  • 401 Unauthorized：用户认证信息确实或者不正确；
  • 403 Forbidden：服务器理解请求的含义，但没有权限执行；
  • 404 Not Found：服务器没有找到对应的资源；
  • 407 Proxy Authentication Required：对需要经由代理的请求，认证信息未通过代理服务器的验证；
  • 408 Request Timeout：服务器接收请求超时。

5XX 服务器端错误，服务器未能实现合法的请求

  • 500 Internal Server Error：服务器内部错误，且不属于以下错误类型；
  • 502 Bad Gateway：代理服务器无法获取到合法响应；
  • 503 Service Unavailable：服务器资源尚未准备好处理当前请求；
  • 505 HTTP Version Not Supported：请求使用的 HTTP 协议版本不支持。

在浏览器地址栏输入URL后发生了什么？

基本流程如下：

  1. 查询IP地址；
  2. 建立TCP连接，接入服务器；
  3. 浏览器发起HTTP请求；
  4. 服务器后台操作并作出HTTP响应；
  5. 网页的解析与渲染。

详细分解步骤：

  • 查询IP地址：
    1. 浏览器解析出url中的域名；
    2. 查询浏览器的DNS缓存；
    3. 浏览器中没有DNS缓存，则查找本地客户端hosts文件有无对应的ip地址；
    4. hosts中无，则查找本地DNS服务器（运营商提供的DNS服务器）有无对应的DNS缓存；
    5. 若本地DNS没有DNS缓存，则向根服务器查询，进行递归查找；
    6. 递归查找从顶级域名开始（如.com）,一步步缩小范围，最终客户端取得ip地址。
  • TCP连接与HTTP连接
    1. http协议建立在tcp协议之上，http请求前，需先进行tcp连接，形成客户端到服务器的稳定的通道。俗称TCP的三次握手。
    2. tcp连接完成后，http请求开始，请求有多种方式，常见的有get，post等。
    3. http请求包含请求头，也可能包含请求体两部分，请求头中包含我们希望对请求文件的操作的信息，请求体中包含传递给后台的参数。
    4. 服务器收到http请求后，后台开始工作，如负载平衡，跨域等，这里就是后端的工作了。
    5. 文件处理完毕，生成响应数据包，响应也包含两部分，响应头和响应体，响应体就是我们所请求的文件。
    6. 经过网络传输，文件被下载到本地客户端，客户端开始加载。
  • HTML渲染
    1. 客户端浏览器加载了html文件后，由上到下解析html为DOM树（DOM Tree）。
    2. 遇到css文件，css中的url发起http请求。
    3. 这是第二次http请求，由于http1.1协议增加了Connection: keep-alive声明，故tcp连接不会关闭，可以复用。
    4. http连接是无状态连接，客户端与服务器端需要重新发起请求—响应。在请求css的过程中，解析器继续解析html，然后到了script标签。
    5. 由于script可能会改变DOM结构，故解析器停止生成DOM树，解析器被js阻塞，等待js文件发起http请求，然后加载。这是第三次http请求。js执行完成后解析器继续解析。
    6. 由于css文件可能会影响js文件的执行结果，因此需等css文件加载完成后再执行。
    7. 浏览器收到css文件后，开始解析css文件为CSSOM树（CSS Rule Tree）。
    8. CSSOM树生成后，DOM Tree与CSS Rule Tree结合生成渲染树（Render Tree）。
    9. Render Tree会被css文件阻塞，渲染树生成后，先布局，绘制渲染树中节点的属性(位置，宽度，大小等)，然后渲染，页面就会呈现信息。
    10. 继续边解析边渲染，遇到了另一个js文件，js文件执行后改变了DOM树，渲染树从被改变的dom开始再次渲染。
    11. 继续向下渲染，碰到一个img标签，浏览器发起http请求，不会等待img加载完成，继续向下渲染，之后再重新渲染此部分。
    12. DOM树遇到html结束标签，停止解析，进而渲染结束。

从此可以得出网站的一些优化的方法: ① 减少DNS查询:将服务器域名的ip信息加入本地host文件。 ② 减少http请求数量，对于图片使用雪碧图,对于html文件和css文件，js文件分别进行合并操作。 ③ 减少下载时间：压缩图片，使用压缩应用压缩文档中的空格，删除文件多余的语句和注释，创造自己的js精简库和精简框架,使用本地浏览器缓存。 ④ 提前渲染开始时间：将css链接放在html头部。 ⑤ 减轻解析器的阻塞：将js链接放在body尾部。