前端宝典十三：node网络详解Tcp/IP/Http及网络安全防御

讨论网络相关的问题前，我们首先看一下从浏览器输入 URL 到显示前端页面的流程，首先从TCP的应用层、传输层、网络层、数据链路层开始看：

一、应用层、传输层、网络层、数据链路层

以下是从浏览器输入 URL 到显示前端页面的流程顺序解析，涵盖客户端和服务端的应用层、传输层、网络层、数据链路层：

1、客户端

1. 应用层：

• 用户在浏览器地址栏输入 URL。浏览器解析 URL 确定协议、主机名、端口号、路径等信息。
• 若为域名，启动 DNS 查询。向本地 DNS 服务器发送请求，经过一系列查询最终获得目标服务器的 IP 地址。
• 构建 HTTP 请求报文，包含请求方法、路径、协议版本、请求头等信息。

2. 传输层：

• 确定目标服务器 IP 地址后，使用该 IP 地址和服务器端口号尝试建立 TCP 连接。进行三次握手，发送 SYN 包、接收 SYN/ACK 包、再回复 ACK 包，建立连接。
• 通过 TCP 连接将 HTTP 请求报文发送给服务器。

3. 网络层：

• 发送 HTTP 请求前，根据 IP 地址和子网掩码确定目标服务器不在本地网络。将 HTTP 请求报文封装在 IP 数据包中，设置源 IP 地址为客户端 IP，目标 IP 地址为服务器 IP。
• 依据路由表选择下一跳路由器地址，将 IP 数据包发送出去。

4. 数据链路层：

• 将 IP 数据包封装在数据链路层帧中，添加源 MAC 地址（客户端网卡 MAC 地址）和目标 MAC 地址（下一跳路由器 MAC 地址）。
• 通过物理层将数据帧发送到网络中。

2、服务端

1. 数据链路层：

• 服务器接收到数据帧后，根据数据链路层协议进行解析，提取出 IP 数据包。

2. 网络层：

• 服务器所在网络中的路由器接收 IP 数据包后，根据目标 IP 地址进行路由选择，逐步转发到服务器所在网络。
• 服务器接收到 IP 数据包。

3. 传输层：

• 服务器的传输层接收到 TCP 连接请求后，进行三次握手过程建立连接。
• 接收客户端发送的 HTTP 请求报文，并将其传递给应用层。

4. 应用层：

• 服务器上的 Web 服务器软件在应用层监听特定端口。接收到 HTTP 请求后，根据请求的路径和方法进行处理。
• 若为静态资源请求，直接从文件系统中读取相应文件；若为动态资源请求，将请求转发给相应的应用服务器进行处理。
• 构建 HTTP 响应报文，包含协议版本、状态码、响应头等信息以及请求的资源内容。

3、客户端（响应接收与页面显示）

• 浏览器接收 HTTP 响应报文，开始解析页面。
• 解析 HTML 文档，构建文档对象模型（DOM）树。同时解析 CSS 样式表，构建样式规则树，并将 CSS 规则应用到 DOM 树中的元素上确定最终样式。
• 如果有 JavaScript 代码，下载并执行。JavaScript 可以操作 DOM 和 CSSOM，改变页面结构和样式。
• 进行布局确定每个元素在页面上的位置和大小，最后绘制页面到屏幕上，呈现给用户。

整个流程中涵盖了网络相关的知识点，tcp/udp、url规则、页面解析、dns解析、cdn、负载均衡，我们挨个进行分析：

二、网络请求涵盖的知识点

当在浏览器中输入 URL 到显示前端页面，这个过程涉及多个复杂的步骤和技术，以下是详细的过程：

1、URL 规则

URL（统一资源定位符）由不同部分组成：

• 协议：如http或https，用于指定如何访问资源。
• 主机名：标识资源所在的服务器，可以是域名（如www.example.com）或 IP 地址。
• 端口号（可选）：如果不指定，对于 HTTP 通常是 80 端口，HTTPS 是 443 端口。
• 路径：服务器上资源的具体位置。
• 查询参数（可选）：用于向服务器传递额外的信息。

2、DNS 解析

1. 当输入 URL 后，浏览器首先检查自身缓存中是否有该域名对应的 IP 地址。如果有，直接使用；如果没有，进入下一步。
2. 浏览器查询操作系统缓存，看是否有该域名的 IP 地址记录。
3. 如果操作系统缓存中也没有，浏览器会向本地 DNS 服务器发送查询请求。本地 DNS 服务器通常由你的互联网服务提供商（ISP）提供。
4. 本地 DNS 服务器首先检查自身缓存。如果有记录，返回给浏览器；如果没有，它会向根域名服务器发起查询。
5. 根域名服务器返回顶级域名服务器的地址。
6. 本地 DNS 服务器向顶级域名服务器发起查询，顶级域名服务器返回权威域名服务器的地址。
7. 本地 DNS 服务器向权威域名服务器发起查询，权威域名服务器返回该域名对应的 IP 地址。
8. 本地 DNS 服务器将 IP 地址返回给浏览器。

3、建立 TCP 连接

通常情况下，HTTP/HTTPS 使用 TCP

1. 浏览器获得 IP 地址后，使用该 IP 地址和服务器的端口号（通常是 80 或 443）尝试建立 TCP 连接。
2. 首先进行三次握手：

浏览器向服务器发送一个

SYN

（同步）包。

服务器收到 SYN 包后，回复一个

SYN/ACK

（同步确认）包。

浏览器收到 SYN/ACK 包后，再回复一个

ACK

（确认）包，此时 TCP 连接建立成功。

4、发送 HTTP 请求

1. 浏览器构建 HTTP 请求报文，包含请求方法（如 GET、POST 等）、路径、协议版本、请求头（如用户代理、接受的内容类型等）和请求体（如果有）。
2. 将 HTTP 请求报文通过建立好的 TCP 连接发送给服务器。

5、服务器处理请求

1. 服务器接收到 HTTP 请求后，根据请求的路径和方法进行相应的处理。
2. 如果请求的是静态资源（如 HTML、CSS、JavaScript 文件等），服务器直接从文件系统中读取相应的文件并返回。
3. 如果请求的是动态资源（如 PHP、JSP、ASP.NET 等生成的内容），服务器会执行相应的程序代码，生成动态内容后返回。

6、响应返回

1. 服务器构建 HTTP 响应报文，包含协议版本、状态码（如 200 表示成功、404 表示未找到等）、响应头（如内容类型、内容长度等）和响应体（包含请求的资源内容）。
2. 将 HTTP 响应报文通过 TCP 连接发送回浏览器。

7、浏览器解析页面

1. HTML 解析： - 浏览器接收到 HTML 内容后，开始解析 HTML 文档。- 构建文档对象模型（DOM）树，将 HTML 标签转换为 DOM 节点，并按照标签的嵌套关系建立父子关系。
2. CSS 解析： - 同时，浏览器会解析 CSS 样式表，构建样式规则树。- 将 CSS 规则应用到 DOM 树中的元素上，确定每个元素的最终样式。
3. JavaScript 执行： - 如果页面中有 JavaScript 代码，浏览器会下载并执行 JavaScript 文件。- JavaScript 可以操作 DOM 和 CSSOM，改变页面的结构和样式。
4. 布局（Layout）： - 浏览器根据 DOM 树和计算出的样式，确定每个元素在页面上的位置和大小。
5. 绘制（Paint）： - 最后，浏览器根据布局结果，将页面绘制到屏幕上，呈现给用户。

8、CDN（内容分发网络）

1. 作用：CDN 是一组分布在不同地理位置的服务器，用于缓存和分发静态内容，如图片、视频、CSS、JavaScript 文件等。
2. 工作原理： - 当浏览器请求一个资源时，如果该资源在 CDN 上有缓存，CDN 会根据用户的地理位置和网络状况，选择最近的服务器将资源返回给用户。- 这样可以大大减少资源的加载时间，提高用户体验。

9、负载均衡

1. 作用：负载均衡用于将用户的请求分发到多个服务器上，以平衡服务器的负载，提高系统的可用性和性能。
2. 工作原理： - 当用户请求到达时，负载均衡器会根据一定的算法（如轮询、加权轮询、最少连接等）将请求转发到其中一个服务器上。- 服务器处理请求后，将响应返回给负载均衡器，负载均衡器再将响应转发给用户。

三、http攻击

HTTP 攻击是指利用 HTTP 协议的漏洞或弱点进行的恶意攻击行为，可能导致网站瘫痪、数据泄露等严重后果。以下是一些常见的 HTTP 攻击及对应的安全防御方法：

1、SQL 注入攻击

1. 攻击方式：- 攻击者在 HTTP 请求中通过输入恶意的 SQL 语句，利用应用程序对用户输入的不恰当处理，来获取或修改数据库中的数据。- 例如，在登录页面的用户名输入框中输入包含 SQL 语句的字符串，如'or 1=1--，可能绕过登录验证直接进入系统。
2. 防御方法：- 使用参数化查询：避免将用户输入直接拼接到 SQL 语句中，而是使用参数化查询的方式，让数据库引擎对参数进行处理，防止 SQL 注入。- 输入验证：对用户输入进行严格的验证，包括数据类型、长度、格式等，只接受符合预期的输入。- 最小权限原则：确保数据库用户只具有完成其任务所需的最小权限，减少攻击成功后的影响。

2、跨站脚本攻击（XSS）

1. 攻击方式：- 攻击者在目标网站中注入恶意的 JavaScript、HTML 或其他脚本代码，当其他用户访问该网站时，这些恶意代码会在用户的浏览器中执行。- 例如，在评论区输入<script>alert('XSS')</script>，如果网站没有进行适当的过滤，其他用户查看评论时就会弹出警告框。
2. 防御方法：- 输入过滤和输出编码：对用户输入进行严格的过滤，去除可能的恶意脚本代码。在将用户输入显示到页面上时，进行适当的编码，防止脚本执行。- 内容安全策略（CSP）：通过设置 CSP 头，限制页面可以加载的资源来源，防止恶意脚本的加载和执行。- HttpOnly cookie：对于包含敏感信息的 cookie，设置 HttpOnly 属性，防止 JavaScript 访问，减少 XSS 攻击的影响。

3、跨站请求伪造（CSRF）

1. 攻击方式：- 攻击者诱导用户在已登录的目标网站上执行恶意操作，通常是通过发送包含恶意请求的链接或表单。- 例如，攻击者发送一封包含恶意链接的电子邮件，诱导用户点击，该链接会在用户不知情的情况下向目标网站发送一个请求，执行诸如转账等操作。
2. 防御方法：- 验证请求来源：在服务器端验证请求的来源，确保请求来自合法的用户。可以通过检查 Referer 头、使用 token 等方式实现。- SameSite cookie：设置 cookie 的 SameSite 属性，限制 cookie 在跨站请求中的发送，减少 CSRF 攻击的可能性。- 双重验证：对于敏感操作，要求用户进行额外的验证，如输入密码、验证码等。

4、拒绝服务攻击（DoS/DDoS）

1. 攻击方式：- 攻击者通过向目标服务器发送大量的请求，耗尽服务器的资源，使服务器无法正常处理合法用户的请求。- DoS 攻击通常由单个攻击者发起，而 DDoS 攻击则是利用大量的傀儡机同时发起攻击，威力更大。
2. 防御方法：- 流量清洗：使用专业的 DDoS 防护服务，对进入服务器的流量进行清洗，过滤掉恶意流量。- 限制请求速率：在服务器端设置请求速率限制，防止单个 IP 或用户在短时间内发送过多的请求。- 负载均衡：使用负载均衡技术，将请求分发到多个服务器上，提高系统的抗攻击能力。

5、HTTP 协议降级攻击

1. 攻击方式：- 攻击者诱导客户端和服务器之间的通信从安全的 HTTPS 协议降级为不安全的 HTTP 协议，从而进行中间人攻击，窃取敏感信息。
2. 防御方法：- HSTS（HTTP Strict Transport Security）：服务器通过设置 HSTS 头，告诉浏览器在一段时间内只使用 HTTPS 协议访问该网站，防止协议降级攻击。- 证书锁定：客户端可以对特定的服务器证书进行锁定，只接受具有特定证书的服务器连接，防止中间人攻击。

四、HTTP/2 和 HTTP/1 有以下主要区别：

1、二进制分帧层

HTTP/2：引入了二进制分帧层，将 HTTP 消息分解为独立的帧，并对其进行二进制编码。这使得在同一个连接上可以并行传输多个请求和响应，提高了传输效率。

HTTP/1：以文本形式传输消息，请求和响应是按顺序逐个发送和接收的，不能很好地支持并行处理。

2、多路复用

HTTP/2：实现了多路复用，多个请求和响应可以在同一个连接上同时传输，无需建立多个连接。这大大减少了连接建立的开销和延迟，提高了性能。

HTTP/1：通常每个请求都需要建立一个单独的连接，或者使用有限的连接进行复用，但容易出现队头阻塞问题，即一个请求的阻塞会影响后续请求的处理。

3、头部压缩

HTTP/2：采用 HPACK 算法对头部进行压缩，减少了头部信息的大小。在多个请求和响应中，相同的头部字段只需要传输一次变化的值，进一步提高了传输效率。

HTTP/1：头部信息通常以文本形式传输，没有进行有效的压缩，可能会导致较大的头部开销。

4、服务器推送

HTTP/2：服务器可以主动向客户端推送资源，而无需等待客户端请求。例如，当客户端请求一个 HTML 页面时，服务器可以同时推送该页面所需的 CSS 和 JavaScript 文件，减少了客户端的请求次数和延迟。

HTTP/1：没有服务器推送功能，客户端需要逐个请求所需的资源。

5、优先级设置

HTTP/2：允许为每个流设置优先级，客户端和服务器可以根据重要性和依赖关系来确定请求和响应的处理顺序。这有助于确保关键资源优先传输，提高用户体验。

HTTP/1：没有明确的优先级设置机制，请求的处理顺序主要取决于发送的顺序和网络状况。