最全HTTP/HTTPS面试题整理（三）

最全HTTP/HTTPS面试题整理（三）
什么是同源策略？

同源策略（Same-Origin Policy）是一种浏览器安全机制，用于限制一个网页从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。"同源"指的是协议（protocol）、域名（domain）和端口号（port）都相同。
同源策略的主要目的是防止恶意网站通过在用户浏览器中加载来自其他源的恶意代码，从而保护用户的隐私和安全。同源策略对以下几个方面进行了限制：
1. JavaScript 访问：
- 同源策略阻止通过 JavaScript 在一个源中的页面访问另一个源的文档的 DOM。
1. Cookie、LocalStorage 和 IndexDB 访问：
- 页面的 JavaScript 不能访问不属于该页面的 Cookie、LocalStorage 和 IndexDB。
1. XMLHttpRequest 请求：
- 使用 XMLHttpRequest 对象发起的 HTTP 请求受到同源策略的限制，不能跨域发起请求。
1. Frame 和 iframe 访问：
- 页面中的和 </code> 元素也受到同源策略的限制，无法直接访问其他源的内容。</li></ul> <ol start="5"><li>跨窗口通信：</li></ol> <ul><li><code>window.postMessage()</code> 方法是唯一允许跨源窗口通信的标准机制，其他方式都受到同源策略的限制。</li></ul> 虽然同源策略提高了安全性，但有时需要通过其他手段实现跨域资源共享。例如，使用 CORS（Cross-Origin Resource Sharing）标头允许服务器声明哪些来源是被允许的，以及哪些操作是被允许的。这样，服务器可以明确地指示浏览器绕过同源策略的限制。 <h2><a name="t1"></a><a id="CORS_16"></a>什么是CORS（跨域资源共享）？</h2> CORS（Cross-Origin Resource Sharing）是一种机制，它使用额外的 HTTP 头来告诉浏览器，允许在一个 Web 页面上的脚本访问来自另一个域的资源。浏览器的同源策略限制了在一个域中加载的文档或脚本如何与来自另一个域的资源进行交互。CORS 通过在 HTTP 头中添加一些特定的字段来授权跨域请求。以下是 CORS 的关键组成部分： <ol><li>Origin（来源）：</li></ol> <ul><li>在 HTTP 请求头中，包含一个 Origin 字段，表示请求的来源（协议、域名和端口）。例如：<code>Origin: http://example.com</code></li></ul> <ol start="2"><li>Access-Control-Allow-Origin（允许的来源）：</li></ol> <ul><li>服务器在 HTTP 响应头中包含 <code>Access-Control-Allow-Origin</code> 字段，表示允许哪些来源的请求访问资源。可以是特定的域名，也可以是通配符 <code>*</code>，表示允许任意来源访问资源。</li></ul> <pre data-index="0" class="set-code-show prettyprint"><code class="has-numbering" onclick="mdcp.signin(event)" style="position: unset;">Access-Control-Allow-Origin: http://example.com <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> <ol start="3"><li>其他 CORS 相关头部：</li></ol> <ul><li>除了 <code>Access-Control-Allow-Origin</code>，还可能包括其他一些 CORS 相关的头部，例如： <ul><li><code>Access-Control-Allow-Methods</code>: 允许的 HTTP 方法。</li><li><code>Access-Control-Allow-Headers</code>: 允许的请求头。</li><li><code>Access-Control-Allow-Credentials</code>: 指定是否允许发送 Cookie。</li></ul> </li></ul> CORS 被广泛用于解决浏览器的同源策略限制，使得在跨域请求中能够安全地进行数据交互。在使用 CORS 时，服务器端需要配置相应的响应头，而客户端的请求会在浏览器中自动添加相应的请求头。 <h2><a name="t2"></a><a id="HTTP2HTTP11_34"></a>什么是HTTP/2？它相对于HTTP/1.1的改进是什么？</h2> HTTP/2（Hypertext Transfer Protocol version 2）是 HTTP 协议的一个新版本，旨在提供更高的性能和更有效的数据传输。相对于 HTTP/1.1，HTTP/2 引入了一些重要的改进： <ol><li>多路复用（Multiplexing）：</li></ol> <ul><li>HTTP/2 支持在单个 TCP 连接上同时发送多个请求和响应，避免了 HTTP/1.1 中的队头阻塞问题。多路复用允许在同一连接上并发传输多个资源，提高了页面加载速度。</li></ul> <ol start="2"><li>二进制传输（Binary Protocol）：</li></ol> <ul><li>HTTP/2 使用二进制格式而非文本格式传输数据，更加紧凑和高效。这种格式的解析速度更快，减少了头部大小，提高了传输效率。</li></ul> <ol start="3"><li>头部压缩（Header Compression）：</li></ol> <ul><li>HTTP/2 使用 HPACK 算法对请求和响应头部进行压缩，减少了数据传输时的带宽占用。这减轻了网络负担，尤其是对于小型设备或高延迟网络环境更为明显。</li></ul> <ol start="4"><li>服务器推送（Server Push）：</li></ol> <ul><li>HTTP/2 允许服务器在客户端请求之前将相关的资源推送给客户端，从而避免了客户端在解析 HTML 后再发起对其他资源的请求。这有助于提高性能，减少延迟。</li></ul> <ol start="5"><li>流优先级（Stream Prioritization）：</li></ol> <ul><li>HTTP/2 允许客户端指定请求的优先级，服务器可以根据这些优先级来更有效地处理请求。这有助于优化资源的加载顺序，提升页面渲染速度。</li></ul> <ol start="6"><li>支持头部字段增强：</li></ol> <ul><li>HTTP/2 在协议层面支持一些头部字段的功能，如支持优先级和依赖关系，使得一些服务端和客户端的功能能够更好地协同工作。</li></ul> HTTP/2 的目标是通过引入这些改进，提高页面加载速度、降低延迟和带宽占用，从而提供更优秀的用户体验。虽然 HTTP/1.1 仍然是广泛使用的协议，但 HTTP/2 的特性对于现代 Web 应用的性能提升至关重要。 <h2><a name="t3"></a><a id="_51"></a>什么是队头阻塞问题？</h2> 在HTTP中，队头阻塞问题通常指的是在使用持久连接的情况下，由于先前的请求响应未完成，后续的请求被阻塞等待。这主要涉及到HTTP/1.1中的管道（Pipeline）和HTTP/2中的多路复用（Multiplexing）。 <ol><li>HTTP/1.1 管道（Pipeline）：</li></ol> <ul><li>在HTTP/1.1中，客户端可以通过管道方式发送多个请求，但服务器必须按照请求的顺序逐个响应。如果先前的请求响应较慢，后续的请求就会被阻塞等待，导致队头阻塞问题。</li></ul> <ol start="2"><li>HTTP/2 多路复用（Multiplexing）：</li></ol> <ul><li>HTTP/2引入了多路复用机制，允许多个请求和响应同时在一个连接上进行。虽然解决了HTTP/1.1中的队头阻塞问题，但在某些情况下，如果某个请求的优先级较高或者占用资源较多，仍然可能影响其他请求的响应。</li></ul> 解决HTTP中的队头阻塞问题的方法： <ol><li>并发连接： 使用多个并发连接，每个连接独立处理请求和响应，避免一个连接中的一个慢速请求影响其他请求。</li><li>资源优化： 优化每个请求的资源使用，确保请求尽量迅速完成，减少队头阻塞的可能性。</li><li>使用CDN： 使用内容分发网络（CDN）可以将内容就近缓存，减少请求的传输时间，从而减轻队头阻塞问题。</li><li>升级到HTTP/2： 如果可能，将协议升级到HTTP/2，以利用其多路复用特性，降低队头阻塞的影响。</li><li>异步加载： 在前端，通过异步加载资源，避免阻塞页面渲染，提高用户体验。</li></ol> <h2><a name="t4"></a><a id="HTTP2__66"></a>HTTP/2 怎么解决队头阻塞问题的？</h2> HTTP/2 解决队头阻塞问题的主要机制是多路复用（Multiplexing）。以下是 HTTP/2 中多路复用如何解决队头阻塞问题的关键点： <ol><li>并行处理： HTTP/2 允许在单个 TCP 连接上同时发送多个请求和接收多个响应。这意味着多个请求可以并行处理，而不必等待前一个请求的响应完成。</li><li>帧与流： HTTP/2 将数据分割成小的帧（frames），每个帧属于一个虚拟的流（stream）。多个流可以在同一个 TCP 连接上并行传输，且彼此独立。这样，即使一个流受到阻塞，其他流依然可以继续传输。</li><li>优先级： HTTP/2 支持为每个流设置优先级。服务器可以根据优先级来确定响应的顺序。这样，即使某个请求的响应较慢，高优先级的请求仍然可以在低优先级的请求之前获得响应，减轻队头阻塞的影响。</li></ol> 通过这些机制，HTTP/2 能够更有效地处理多个请求和响应，提高性能并减少队头阻塞的问题。但是 HTTP/2 只是解决了在应用层的队头阻塞，没有解决传输层 TCP 存在的队头阻塞。 <h2><a name="t5"></a><a id="HTTP2_74"></a>什么是流量控制和拥塞控制？HTTP/2中是如何处理这两个问题的？</h2> 流量控制（Flow Control） 和 拥塞控制（Congestion Control） 是两个不同的网络管理概念。 <ol><li>流量控制： 是为了确保通信的两端之间的数据流平衡，防止发送方发送速度过快导致接收方无法及时处理。在传输层，TCP协议通过窗口大小（Window Size）来实现流量控制，即接收方通告发送方可以发送多少字节的数据。</li><li>拥塞控制： 是为了避免网络中的拥塞，即过多的数据被注入到网络中导致网络性能下降。TCP协议中使用的拥塞控制算法包括慢启动、拥塞避免、快速重传和快速恢复等，通过动态调整发送速率来适应网络状况。</li></ol> HTTP/2 中的处理： 在HTTP/2中，引入了一种流量控制机制，称为 流量控制窗口（Flow Control Window）。每个HTTP/2流（stream）都有自己的流量控制窗口，用于控制对应流上的数据流动。流量控制窗口的大小是动态调整的，接收方可以通过更新窗口大小来通知发送方可以发送的数据量。 另外，HTTP/2还使用了 多路复用（Multiplexing） 技术，允许在单个连接上同时发送多个请求和响应。这减少了连接的数量，减轻了网络拥塞的风险。每个流都有独立的流量控制窗口，因此一个流的拥塞不会影响其他流。 <h2><a name="t6"></a><a id="HTTP3HTTP2_83"></a>什么是HTTP/3？与HTTP/2有什么不同？</h2> HTTP/3 是 HTTP 协议的最新版本，它的底层传输协议是基于 QUIC（Quick UDP Internet Connections）协议的。与 HTTP/2 相比，HTTP/3 引入了一些显著的变化： <ol><li>基于QUIC协议：</li></ol> <ul><li>HTTP/3 使用 QUIC 协议，而不是 HTTP/2 中的 TCP 协议。QUIC 是一个基于 UDP 的协议，结合了 TCP 和 TLS 的功能，旨在提供更快的连接建立和更可靠的数据传输。</li></ul> <ol start="2"><li>多路复用（Multiplexing）：</li></ol> <ul><li>HTTP/3 保留了 HTTP/2 中的多路复用功能，允许在单个连接上同时传输多个请求和响应，避免了队头阻塞问题。</li></ul> <ol start="3"><li>头部压缩（Header Compression）：</li></ol> <ul><li>HTTP/3 采用类似于 HTTP/2 的头部压缩技术，使用 QPACK 算法对请求和响应头进行压缩。这有助于减少数据传输时的带宽占用。</li></ul> <ol start="4"><li>流控制（Flow Control）：</li></ol> <ul><li>HTTP/3 引入了基于流的流控制机制，以提高传输的可靠性。这使得客户端和服务器能够更好地适应网络条件，避免过载和延迟。</li></ul> <ol start="5"><li>快速握手（Fast Handshake）：</li></ol> <ul><li>QUIC 协议具有快速握手的特性，可以在连接建立时更迅速地进行身份验证和密钥交换，降低延迟。</li></ul> <ol start="6"><li>抗丢包重传（Packet Loss Recovery）：</li></ol> <ul><li>QUIC 具有内建的丢包恢复机制，通过在协议层面进行快速的重传，提高了对丢包的抗性。</li></ul> <ol start="7"><li>连接迁移（Connection Migration）：</li></ol> <ul><li>HTTP/3 允许连接在不中断的情况下从一个 IP 地址迁移到另一个 IP 地址，增加了连接的灵活性。</li></ul> 总体而言，HTTP/3 主要通过引入 QUIC 协议来改进传输层的性能，以提高连接建立速度、降低延迟、增强连接的可靠性。虽然 HTTP/3 的使用逐渐增多，但它仍然处于逐步演进的阶段，需要服务器和客户端的支持，以及适应它的网络基础设施。 <h2><a name="t7"></a><a id="_QUIC__102"></a>什么是 QUIC 协议？</h2> QUIC（Quick UDP Internet Connections）是一种由Google设计和开发的网络传输协议，旨在提供更快的连接建立和更低的延迟。以下是QUIC的一些关键特点和详细介绍： <ol><li>基于UDP： QUIC建立在UDP协议之上，而不是像传统的HTTP协议那样使用TCP。UDP的无连接特性使得QUIC更加适应快速的连接建立和动态网络条件。</li><li>零往返时间连接建立（0-RTT）： QUIC允许客户端在首次连接时发送数据，实现零往返时间连接建立。这是通过在第一次握手时使用之前保存的密钥信息来实现的，从而减少了握手时延迟。</li><li>多路复用： 类似于HTTP/2中的多路复用，QUIC允许在一个连接上同时传输多个数据流。这避免了TCP中存在的队头阻塞问题，提高了并行传输效率。</li><li>安全性： QUIC默认使用TLS（Transport Layer Security）进行加密，确保端到端的安全通信。TLS的加密性质提供了隐私和数据完整性的保护。</li><li>自带拥塞控制和错误恢复： QUIC包含内建的拥塞控制和错误恢复机制，使其能够更好地处理网络丢包和切换网络的情况。这有助于提高连接的稳定性和可靠性。</li><li>动态调整： QUIC允许在运行时动态修改连接参数，以适应网络条件的变化。这种灵活性使得QUIC更适用于复杂的网络环境。</li><li>无连接： QUIC是一种无连接协议，不需要像TCP那样进行繁琐的连接建立和关闭过程。这使得QUIC更适用于移动设备等场景，其中连接可能频繁断开和重新建立。</li><li>标准化工作： QUIC的标准化工作正在进行中，其中IETF的QUIC工作组负责推动标准化进程。目前，QUIC的一些版本已经在实际应用中得到了广泛使用。</li></ol> <h2><a name="t8"></a><a id="WebSocketsHTTP_113"></a>什么是WebSockets？与HTTP有什么不同？</h2> WebSocket 是一种在单个持久连接上进行全双工通信的通信协议，用于在 Web 应用程序中实现实时的、双向的数据传输。WebSocket 协议在 RFC 6455 中定义。 与传统的 HTTP 请求-响应模型不同，WebSocket 允许客户端和服务器之间建立长时间的连接，双方可以随时发送数据，而不需要等待或重新建立连接。这使得 WebSocket 适用于需要低延迟和实时性的应用场景，如聊天应用、在线游戏、股票市场数据更新等。 一些与 HTTP 相比的 WebSocket 的特点包括： <ol><li>持久连接：</li></ol> <ul><li>WebSocket 允许在单个连接上持续通信，而不需要为每个请求建立新的连接。这减少了连接的建立和断开的开销，提高了效率。</li></ul> <ol start="2"><li>全双工通信：</li></ol> <ul><li>WebSocket 支持双向通信，客户端和服务器可以同时发送和接收数据，而不需要等待对方的请求或响应。</li></ul> <ol start="3"><li>低延迟：</li></ol> <ul><li>由于是长连接，WebSocket 具有低延迟的优势，适用于需要实时性和即时更新的应用。</li></ul> <ol start="4"><li>轻量级头部：</li></ol> <ul><li>WebSocket 头部相对较轻，因为在初始握手之后，数据帧的头部相对较小，减少了每个数据包的开销。</li></ul> <ol start="5"><li>适用于实时性要求高的应用：</li></ol> <ul><li>WebSocket 适用于需要频繁通信、实时性要求高的应用场景，如在线游戏、即时聊天、网页版笔记等。</li></ul> 尽管 WebSocket 提供了实时性的优势，但并不是适用于所有的场景。在一些场景下，仍然使用传统的 HTTP 请求-响应模型更为合适。WebSocket 主要用于弥补 HTTP 在实时性方面的不足。 <h2><a name="t9"></a><a id="HTTPOPTIONSCORS_130"></a>HTTP请求中的OPTIONS方法有什么作用？和CORS有什么关系</h2> HTTP 请求中的 OPTIONS 方法是用于描述目标资源与客户端或请求中指定的资源之间的通信选项。这个方法被广泛用于跨域资源共享（CORS）和预检请求（Preflight Request）。 <ol><li>CORS 预检请求：</li></ol> <ul><li>在进行跨域请求时，浏览器会在实际请求之前发送一个 OPTIONS 预检请求。该预检请求包含了实际请求中可能包含的 HTTP 方法（如 GET、POST）、自定义的头部信息等，用于检查服务器是否允许实际请求。服务器收到 OPTIONS 请求后，会返回包含 CORS 相关头部的响应，以告知浏览器是否允许实际请求。</li></ul> <ol start="2"><li>确定服务器支持的方法：</li></ol> <ul><li>OPTIONS 请求也可以用于获取服务器支持的方法，以及服务器是否允许在目标资源上执行某些方法。</li></ul> <ol start="3"><li>检查服务器的安全性：</li></ol> <ul><li>OPTIONS 请求还可以用于检查服务器的安全性配置，例如是否启用了特定的安全头部。</li></ul> 一个常见的 CORS 预检请求的流程如下： <ol><li>浏览器发送一个 OPTIONS 预检请求，包含实际请求中可能用到的方法、头部等信息。</li><li>服务器收到 OPTIONS 请求后，检查请求中包含的信息，判断是否允许实际请求。</li><li>如果服务器允许实际请求，它会在响应中包含 CORS 相关的头部，如 <code>Access-Control-Allow-Methods</code>、<code>Access-Control-Allow-Headers</code> 等。</li><li>浏览器根据服务器返回的头部信息判断是否允许继续发送实际请求。</li></ol> 总体而言，OPTIONS 方法在 HTTP 中用于获取关于目标资源的通信选项，主要用于支持跨域请求时的预检和权限确认。 <h2><a name="t10"></a><a id="HTTPHost_148"></a>什么是HTTP报文头部的"Host"字段的作用？</h2> 在HTTP报文头部中，"Host"字段是指定请求的目标主机的域名或IP地址。这字段是HTTP/1.1引入的，在请求报文中是必需的。 <ol><li>多虚拟主机支持：</li></ol> <ul><li>当一个服务器上托管了多个域名对应的不同网站时，"Host"字段用于指定客户端请求的具体是哪个域名下的资源。这使得服务器能够正确地将请求路由到对应的虚拟主机上。</li></ul> <ol start="2"><li>负载均衡：</li></ol> <ul><li>在负载均衡的环境中，多个服务器可能共享一个IP地址。"Host"字段允许负载均衡设备将请求正确地路由到后端的不同服务器上。</li></ul> <ol start="3"><li>反向代理：</li></ol> <ul><li>当存在反向代理时，客户端发送的请求实际上是发送到反向代理服务器，而不是最终的目标服务器。"Host"字段允许反向代理服务器知道请求应该被转发到哪个后端服务器上。</li></ul> 举例来说，如果客户端请求的URL是<code>http://example.com/path/to/resource</code>，那么"Host"字段的值应该是<code>example.com</code>。这样，服务器就能够识别客户端希望访问的是哪个域名下的资源。 <h2><a name="t11"></a><a id="HTTPPOST_159"></a>HTTP中的POST请求的数据传递方式有哪些？</h2> 在HTTP中，POST请求可以通过不同的方式传递数据，常见的方式有： <ol><li>表单形式（application/x-www-form-urlencoded）： 这是最常见的方式，适用于普通的HTML表单。数据会被编码为键值对，以<code>key1=value1&key2=value2</code>的形式发送。</li></ol> <pre data-index="1" class="set-code-show prettyprint"><code class="prism language-http has-numbering" onclick="mdcp.signin(event)" style="position: unset;">POST /submit-form HTTP/1.1 Host: example.com Content-Type: application/x-www-form-urlencoded key1=value1&key2=value2 <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li></ul></pre> <ol start="2"><li>多部分表单形式（multipart/form-data）： 适用于文件上传等需要传输二进制数据的场景。请求的<code>Content-Type</code>会指定为<code>multipart/form-data</code>，数据以多个部分的形式进行编码。</li></ol> <pre data-index="2" class="set-code-show prettyprint"><code class="prism language-http has-numbering" onclick="mdcp.signin(event)" style="position: unset;">POST /upload-file HTTP/1.1 Host: example.com Content-Type: multipart/form-data; boundary=--------------------------- -----------------------------123456789012345678901234 Content-Disposition: form-data; name="file"; filename="example.txt" Content-Type: text/plain ...contents of example.txt... -----------------------------123456789012345678901234-- <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li></ul></pre> <ol start="3"><li>JSON数据（application/json）： 数据以JSON格式发送，适用于需要传输结构化数据的场景。</li></ol> <pre data-index="3" class="set-code-show prettyprint"><code class="prism language-http has-numbering" onclick="mdcp.signin(event)" style="position: unset;">POST /submit-json HTTP/1.1 Host: example.com Content-Type: application/json { "key1": "value1", "key2": "value2" } <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li></ul></pre> <ol start="4"><li>XML数据（application/xml）： 数据以XML格式发送，适用于需要传输结构化数据的场景。</li></ol> <pre data-index="4" class="set-code-show prettyprint"><code class="prism language-http has-numbering" onclick="mdcp.signin(event)" style="position: unset;">POST /submit-xml HTTP/1.1 Host: example.com Content-Type: application/xml <data> <key1>value1</key1> <key2>value2</key2> </data> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li></ul></pre> <h2><a name="t12"></a><a id="HTTPHTTP_Prefetching_208"></a>什么是HTTP预连接（HTTP Prefetching）？如何使用？</h2> HTTP 预连接（HTTP Prefetching）是一种通过提前获取与当前页面相关的资源的机制，以加速页面加载速度。预连接可以使浏览器在后台请求和获取页面可能需要的资源，从而提前缓存这些资源，减少用户点击链接或访问下一个页面时的延迟。 HTTP 预连接的主要目的是优化用户体验，降低页面加载时间，特别是对于那些在用户交互前就可以预测到的资源。 在 HTML 中，可以使用 <code><link></code> 元素来指定预连接的资源。例如： <pre data-index="5" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><link rel="prefetch" href="https://example.com/image.jpg"> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> 上述代码表示浏览器应该在后台提前获取 <code>https://example.com/image.jpg</code> 这个资源，以备将来可能需要使用。可以在页面的 <code><head></code> 部分中添加多个这样的 <code><link></code> 元素，以预连接多个资源。 除了 <code>rel="prefetch"</code>，还有其他一些关系类型，例如 <code>rel="preconnect"</code>、<code>rel="dns-prefetch"</code> 等，用于指示浏览器在后台进行与连接有关的操作。这些关系类型的具体用法如下： <code>**rel="preconnect"**</code>： 提示浏览器建立到指定资源的连接。适用于预先建立连接到域名，以减少后续请求的延迟。 <pre data-index="6" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><link rel="preconnect" href="https://example.com"> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> <code>**rel="dns-prefetch"**</code>： 提示浏览器进行 DNS 预解析，以缓存域名对应的 IP 地址，加速后续的连接建立。 <pre data-index="7" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><link rel="dns-prefetch" href="https://example.com"> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> 这些预连接的技术可以在一定程度上加速网页加载，但需谨慎使用，不应滥用，以免增加不必要的网络负担。 <h2><a name="t13"></a><a id="HTTPConnection_Reuse_228"></a>什么是HTTP中的连接重用（Connection Reuse）？</h2> 连接重用是指在同一连接上进行多次 HTTP 请求和响应的过程。HTTP/1.1 引入了持久连接（persistent connection）机制，允许在单个连接上发送多个请求和接收多个响应，从而减少了连接的建立和关闭的开销，提高了性能。 在持久连接中，客户端和服务器都可以选择在请求头中包含 <code>Connection: keep-alive</code>，以指示它们希望保持连接打开，以备将来可能的请求。服务器也可以在响应头中包含 <code>Connection: keep-alive</code>，以确认连接将被保持打开。 连接重用的好处包括： <ol><li>减少延迟： 不必为每个请求都重新建立连接，减少了请求的响应时间。</li><li>减少资源占用： 较少的连接建立和关闭操作减少了服务器和客户端上的资源占用，特别是在高并发的情况下。</li><li>提高效率： 可以在同一连接上并行发送多个请求，而不必等待先前的请求完成。</li></ol> 在使用持久连接时，需要注意以下几点： <ul><li>连接超时： 长时间保持连接可能导致连接资源的浪费，因此可能需要设置连接超时的机制，当连接空闲一段时间后自动关闭。</li><li>流水线化（Pipeline）： HTTP/1.1 还引入了流水线化机制，允许在不等待响应的情况下发送多个请求。这可以进一步提高效率。</li></ul> 总的来说，连接重用是通过持久连接机制实现的，它在一定程度上优化了HTTP协议，提高了性能，减少了资源浪费。 <h2><a name="t14"></a><a id="HTTPHTTPS_243"></a>HTTP/HTTPS中的会话和持久性连接有什么区别？</h2> 会话（Session） 和 持久性连接（Persistent Connection） 是两个在HTTP/HTTPS中有关联但不同的概念。 <ol><li>会话（Session）：</li></ol> <ul><li>定义： 会话是指从客户端与服务器之间建立连接开始，到连接关闭结束的整个过程。</li><li>特点： 会话通常涉及多个请求和响应，可以包含多个HTTP事务。在会话中，可以通过使用 Cookie 或其他机制来维持客户端和服务器之间的状态。</li><li>实现： 会话状态可以通过在请求和响应中包含标识符（如 Cookie）来跟踪。这样，服务器可以识别与特定用户或客户端相关的会话信息。</li></ul> <ol start="2"><li>持久性连接（Persistent Connection）：</li></ol> <ul><li>定义： 持久性连接是指在单个会话中，通过复用已经建立的连接，减少了每个请求都需要重新建立连接的开销。</li><li>特点： 持久性连接允许在同一个会话中多次使用同一个连接，而不是每次请求都重新建立连接。这可以提高性能，减少延迟。</li><li>实现： 在HTTP/1.1中，默认情况下，连接被视为持久性的，除非明确指定 <code>Connection: close</code>。这允许在同一个TCP连接上发送多个请求和接收多个响应。</li></ul> 区别： <ul><li>会话是整个从连接建立到关闭的过程，而持久性连接是指在这个过程中复用已经建立的连接。</li><li>持久性连接是通过在同一个连接上发送多个请求和接收多个响应来提高性能的一种机制，而会话是一个更广泛的概念，涉及多个连接和状态维护。</li></ul> <h2><a name="t15"></a><a id="HTTPChunked_259"></a>什么是HTTP中的Chunked编码？它的作用是什么？</h2> HTTP 中的 Chunked 编码是一种用于传输不定长度数据的编码方式。它允许将数据分成一系列的块（chunks）进行传输，每个块都包含块的大小信息以及实际的数据。Chunked 编码主要用于在不知道整个消息长度的情况下传输数据，例如在流式传输或实时数据传输的场景。 Chunked 编码的基本工作原理如下： <ol><li>通过在请求或响应头部中添加 <code>Transfer-Encoding: chunked</code> 字段，表明数据将以 Chunked 编码方式传输。</li><li>数据被分成一系列的块，每个块包含块的大小（以十六进制表示的字节数）、CRLF（回车和换行），以及实际的数据。</li><li>每个块的大小为 0 表示数据传输结束，之后再跟随一个表示结束的 CRLF。</li></ol> 示例： <pre data-index="8" class="set-code-show prettyprint"><code class="has-numbering" onclick="mdcp.signin(event)" style="position: unset;">HTTP/1.1 200 OK Content-Type: text/plain Transfer-Encoding: chunked 4 Wiki 6 pedia E in \r\n chunks. 0 \r\n \r\n <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li></ul></pre> 上述示例中，“Wiki” 和 “pedia” 是两个块，它们的大小分别为 4 和 6。最后的块大小为 0，表示数据传输结束。 Chunked 编码的作用： <ol><li>流式传输： Chunked 编码适用于需要流式传输的场景，即数据产生的速度与数据传输的速度不一致的情况。</li><li>未知长度的数据传输： 当发送的数据长度未知时，Chunked 编码允许动态地生成和传输数据，而不需要等待整个消息完全准备好。</li><li>实时通信： 在实时通信或实时更新的场景中，Chunked 编码可以实现实时推送数据到客户端，而不需要等待整个消息准备好。</li></ol> 需要注意的是，并非所有服务器和客户端都支持 Chunked 编码，因此在使用时需要确保双方都支持这种传输编码方式。 <h2><a name="t16"></a><a id="HTTPHTTPS_293"></a>HTTP/HTTPS的性能优化有哪些常见的策略？</h2> HTTP/HTTPS性能优化可以通过多种策略来实现，以下是一些常见的优化策略： <ol><li>使用CDN（内容分发网络）： 将静态资源分发到全球各地的CDN节点，加速资源加载，降低延迟。</li><li>启用压缩： 使用Gzip或Brotli等压缩算法压缩传输的数据，减小文件大小，提高传输速度。</li><li>减少HTTP请求次数： 合并和精简CSS、JavaScript文件，使用CSS Sprites合并小图标，减少页面加载时的HTTP请求次数。</li><li>使用延迟加载： 对于非关键资源，使用延迟加载或异步加载，以避免阻塞主要内容的加载。</li><li>优化图片： 使用适当大小和格式的图片，采用响应式图片设计，推荐使用WebP格式，使用懒加载或占位符等技术。</li><li>使用缓存： 设置适当的缓存策略，利用浏览器缓存和服务端缓存，减少重复加载相同资源。</li><li>最小化重定向： 减少不必要的重定向，直接请求目标URL，避免额外的网络往返。</li><li>域名分片： 将页面资源分布在多个域名上，以提高浏览器的并行加载能力，但要注意不要过度分片。</li><li>使用HTTP/2和HTTPS： HTTP/2支持多路复用和头部压缩，提高性能，同时使用HTTPS可以提供更安全的传输和额外的性能优化。</li><li>优化CSS和JavaScript： 避免使用过多的CSS和JavaScript，使用合适的选择器和函数，减小文件大小。</li><li>使用字体子集： 仅加载字体的部分字符，以减小字体文件大小。</li><li>预加载和预渲染： 使用 <code><link rel="preload"></code> 预加载资源，或使用 <code><link rel="prerender"></code> 预渲染关键页面。</li><li>服务端性能优化： 优化服务器响应时间，使用缓存、负载均衡和反向代理等技术。</li></ol> <h2><a name="t17"></a><a id="HTTPHTTPSHTTP11HTTP11_Pipelining_309"></a>什么是HTTP/HTTPS中的HTTP/1.1管线化（HTTP/1.1 Pipelining）？</h2> HTTP/1.1管线化（HTTP/1.1 Pipelining） 是一种优化技术，旨在减小因网络延迟而引起的性能损失。在不使用管线化时，客户端和服务器之间的每个请求都必须等待前一个请求的响应完成才能发送下一个请求。而使用管线化，多个请求可以在一个连接上同时进行，不需要等待前一个请求的响应。 工作原理： <ol><li>单连接： 在传统的非管线化HTTP/1.1中，一个TCP连接一次只能处理一个请求-响应事务。</li><li>管线化： 使用管线化，客户端可以在不等待响应的情况下发送多个请求到服务器。这样，在一个TCP连接上可以同时存在多个未完成的请求，提高了并发性。</li></ol> <pre data-index="9" class="set-code-show prettyprint"><code class="prism language-http has-numbering" onclick="mdcp.signin(event)" style="position: unset;">GET /page1 HTTP/1.1 Host: example.com GET /page2 HTTP/1.1 Host: example.com GET /page3 HTTP/1.1 Host: example.com <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li></ul></pre> 上述例子中，三个请求通过同一个连接同时发送到服务器。 优势： 减小延迟： 由于多个请求可以在一个连接上并行处理，减小了每个请求之间的等待时间，降低了总体延迟。 注意事项： 响应顺序： 管线化中响应的顺序需要与请求的顺序相匹配，保证每个响应对应正确的请求。 不适用于所有场景： 管线化可能存在一些问题，例如队头阻塞（Head-of-Line Blocking）和不同请求可能对资源产生相互影响。因此，并非所有情况下都适用。 尽管HTTP/1.1管线化可以提高性能，但由于存在一些问题，并没有被广泛采用。后续的HTTP/2引入了更强大的多路复用机制，替代了管线化，更好地解决了并发请求的问题。 <h2><a name="t18"></a><a id="HTTPHTTPSForward_ProxyReverse_Proxy_332"></a>什么是HTTP/HTTPS中的中继代理（Forward Proxy）和反向代理（Reverse Proxy）？</h2> 中继代理（Forward Proxy） 和 反向代理（Reverse Proxy） 是两种常见的代理服务器，它们在HTTP/HTTPS通信中扮演不同的角色。 <ol><li>中继代理（Forward Proxy）：</li></ol> <ul><li>作用： 中继代理位于客户端和原始服务器之间，为客户端提供代理服务，使得客户端可以通过代理访问原始服务器，而不直接连接到服务器。</li><li>用途： 提供匿名性、访问控制、内容过滤等功能。在企业网络中，中继代理常用于限制内部用户对互联网资源的访问。</li></ul> <pre data-index="10" class="set-code-show prettyprint"><code class="has-numbering" onclick="mdcp.signin(event)" style="position: unset;">Client --> [Forward Proxy] --> Internet --> Origin Server <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> <ol start="2"><li>反向代理（Reverse Proxy）：</li></ol> <ul><li>作用： 反向代理位于原始服务器和客户端之间，代表服务器接受并转发来自客户端的请求，将请求分发到后端多个服务器，并将响应返回给客户端。客户端只知道反向代理，不知道真实的服务器。</li><li>用途： 提供负载均衡、安全性、SSL终结、缓存等功能。常用于提高网站的可用性和性能。</li></ul> <pre data-index="11" class="set-code-show prettyprint"><code class="has-numbering" onclick="mdcp.signin(event)" style="position: unset;">Client --> [Reverse Proxy] --> Backend Servers <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> <ul><li>中继代理是为了客户端服务，代理客户端请求；反向代理是为了服务器服务，代理服务器响应。</li><li>中继代理处于客户端和原始服务器之间，而反向代理处于原始服务器和客户端之间。</li><li>中继代理隐藏客户端，反向代理隐藏服务器。</li><li>中继代理常用于提供访问控制，反向代理常用于负载均衡和性能优化。</li></ul> <h2><a name="t19"></a><a id="HTTPRefreshRedirect_353"></a>什么是HTTP中的刷新（Refresh）和重定向（Redirect）？有什么区别？</h2> 刷新（Refresh）和重定向（Redirect） 都是HTTP中用于导航或切换资源的机制，但它们有不同的用途和实现方式。 <ol><li>刷新（Refresh）：</li></ol> <ul><li>作用： 刷新是一种在页面中定时刷新或重新加载的机制。在HTTP头部中使用 <code>Refresh</code> 字段，指定刷新的时间间隔和目标URL。</li><li>实现： 服务器返回带有 <code>Refresh</code> 字段的响应头，客户端收到响应后会在指定时间后重新加载或跳转。</li></ul> <pre data-index="12" class="set-code-show prettyprint"><code class="prism language-http has-numbering" onclick="mdcp.signin(event)" style="position: unset;">HTTP/1.1 200 OK Refresh: 5; url=http://example.com/new-page Content-Type: text/html <html> <head> <title>Refresh Example</title> </head> <body> This page will refresh in 5 seconds. </body> </html> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li></ul></pre> <ol start="2"><li>重定向（Redirect）：</li></ol> <ul><li>作用： 重定向是一种在页面请求后，服务器返回一个重定向响应，告诉客户端去请求另一个URL。</li><li>实现： 服务器返回状态码为3xx的响应，并在响应头中包含新的目标URL，客户端会自动发起新的请求。</li></ul> <pre data-index="13" class="set-code-show prettyprint"><code class="prism language-http has-numbering" onclick="mdcp.signin(event)" style="position: unset;">HTTP/1.1 302 Found Location: http://example.com/new-page <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li></ul></pre> 区别： <ul><li>刷新是在当前页面定时重新加载，而重定向是由服务器指示客户端去请求一个新的URL。</li><li>刷新通过设置 <code>Refresh</code> 字段实现，而重定向通过设置状态码和 <code>Location</code> 字段实现。</li><li>刷新不需要客户端发起新的请求，而重定向需要客户端发起新的请求。</li><li>刷新适用于在一段时间后自动更新页面，而重定向适用于告知客户端从当前URL跳转到新的URL。</li></ul> <h2><a name="t20"></a><a id="HTTPConditional_GET_387"></a>什么是HTTP中的协商缓存（Conditional GET）？</h2> 协商缓存（Conditional GET） 是HTTP中一种用于减少不必要的数据传输的机制，它通过在请求头中携带一些条件，让服务器根据条件决定是否返回实体内容。 在协商缓存中，常用的条件包括： <ol><li>If-Match： 仅在当前实体标记匹配的情况下返回实体。用于比较实体的标记，通常是实体的ETag值。</li><li>If-None-Match： 仅在当前实体标记不匹配的情况下返回实体。也用于比较实体的标记。</li><li>If-Modified-Since： 仅在实体自指定日期以后被修改过的情况下返回实体。用于比较实体的最后修改时间。</li><li>If-Unmodified-Since： 仅在实体自指定日期以后未被修改过的情况下返回实体。也用于比较实体的最后修改时间。</li></ol> 工作流程： <ol><li>客户端发起请求： 客户端发送带有条件头的请求到服务器。</li><li>服务器判断条件： 服务器根据条件判断是否需要返回实体内容。</li></ol> <ul><li>如果条件满足（例如，If-Match匹配），服务器返回实体内容和状态码200 OK。</li><li>如果条件不满足，服务器返回状态码304 Not Modified，表示客户端的缓存是最新的，不需要重新传输内容。</li></ul> 客户端请求： <pre data-index="14" class="set-code-show prettyprint"><code class="prism language-http has-numbering" onclick="mdcp.signin(event)" style="position: unset;">GET /resource HTTP/1.1 Host: example.com If-None-Match: "abc123" <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li></ul></pre> 服务器响应： <pre data-index="15" class="set-code-show prettyprint"><code class="prism language-http has-numbering" onclick="mdcp.signin(event)" style="position: unset;">HTTP/1.1 304 Not Modified ETag: "abc123" <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li></ul></pre> 在上述例子中，客户端带有条件头If-None-Match，服务器根据资源的ETag判断资源是否发生变化，如果未变化则返回状态码304 Not Modified，否则返回实体内容。这样，服务器避免了传输重复的内容，减少了带宽占用。 <h2><a name="t21"></a><a id="HTTPHTTPS_415"></a>什么是HTTP/HTTPS中的负载均衡？有哪些常见的负载均衡算法？</h2> 负载均衡 是一种在网络中分配工作负载的技术，旨在确保所有服务器都能够有效地处理请求，避免某一台服务器过载而影响系统性能。在HTTP/HTTPS中，负载均衡常用于分发客户端请求到多个服务器，实现高可用性和性能优化。 常见的负载均衡算法： <ol><li>轮询（Round Robin）： 将请求依次分发到每个服务器，循环往复。简单、均衡，但不能适应不同服务器性能不同的情况。</li><li>最小连接数（Least Connections）： 将请求分发到当前连接数最少的服务器。适用于处理时间较长的请求，但可能因服务器性能差异导致不均衡。</li><li>最小响应时间（Least Response Time）： 将请求分发到响应时间最短的服务器。需要实时监测服务器的响应时间，适用于负载均衡服务器间性能差异较大的情况。</li><li>IP哈希（IP Hash）： 使用客户端IP地址计算哈希值，然后将请求分发到对应的服务器。适用于需要保持用户会话的场景，确保同一用户的请求始终到达同一台服务器。</li><li>加权轮询（Weighted Round Robin）： 为每个服务器分配权重，根据权重进行轮询分发。适用于服务器性能不均衡的情况。</li><li>加权最小连接数（Weighted Least Connections）： 结合了最小连接数和加权轮询的思想，根据权重将请求分发到当前连接数最少的服务器。</li><li>随机（Random）： 随机选择一台服务器进行请求分发。简单，但可能导致不均衡。</li><li>最少请求（Least Requests）： 将请求分发到当前请求数最少的服务器。适用于处理时间短、频繁的请求。</li></ol> 总体原则： 选择合适的负载均衡算法取决于具体的应用场景和服务器性能特点，常常需要根据实际情况进行调优。 <h2><a name="t22"></a><a id="HTTPHTTPSURLURI_429"></a>HTTP/HTTPS中的URL和URI有什么区别？</h2> URL（Uniform Resource Locator） 和 URI（Uniform Resource Identifier） 都是用于标识和定位资源的标识符，但它们有一些区别： <ol><li>URI（Uniform Resource Identifier）：</li></ol> <ul><li>定义： URI 是一个通用的标识符，用于标识和定位资源。URI 分为两个子集：URL 和 URN。</li><li>例子： <code>mailto:john@example.com</code> 是一个 URI，表示电子邮件地址。</li></ul> <ol start="2"><li>URL（Uniform Resource Locator）：</li></ol> <ul><li>定义： URL 是 URI 的子集，用于描述资源的具体位置。它不仅标识资源，还提供了如何获取资源的方法。</li><li>例子： <code>https://www.example.com/page</code> 是一个 URL，表示一个网页的地址。</li></ul> 总结： <ul><li>URI 是一个通用的标识符，而 URL 是 URI 的一个具体实现。</li><li>URI 包含两个子集：URL 用于定位资源，URN 用于命名资源。</li><li>URL 提供了更具体的信息，包括如何获取资源的协议、主机名、路径等。</li></ul> 在实际使用中，人们通常使用 URL 来表示资源的位置和定位方式，因为 URL 提供了更具体的信息，可以直接用于访问和定位网络上的资源。 <h2><a name="t23"></a><a id="HTTP_TRACE_446"></a>什么是HTTP TRACE方法？为什么它可能会导致安全问题？</h2> HTTP TRACE 方法 是一种用于测试和诊断的 HTTP 请求方法，它会在经过的服务器上执行一个环回测试，服务器会将收到的请求消息发回给客户端，以便客户端查看请求在传输过程中是否发生了变化。 TRACE 请求的格式： <pre data-index="16" class="set-code-show prettyprint"><code class="prism language-http has-numbering" onclick="mdcp.signin(event)" style="position: unset;">TRACE /path HTTP/1.1 Host: example.com <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li></ul></pre> TRACE 可能会导致安全问题 <ol><li>信息泄漏： TRACE 方法的设计初衷是用于调试和诊断，但它可能导致敏感信息泄漏，因为服务器会原封不动地将客户端发送的请求头返回给客户端。攻击者可以利用这一特性获取包含敏感信息的请求头。</li><li>跨站追踪（Cross-Site Tracing，XST）： TRACE 方法可以被滥用用于跨站追踪攻击。攻击者可以在 TRACE 请求中注入恶意脚本，并通过观察 TRACE 响应中的结果来判断是否执行成功。</li></ol> 由于 TRACE 的潜在安全问题，现代的Web服务器通常会默认禁用 TRACE 方法。在正式的生产环境中，建议将 TRACE 方法禁用以减少潜在的安全风险。 <h2><a name="t24"></a><a id="HTTPHTTPS_459"></a>HTTP/HTTPS中的请求和响应的最大大小是多少？</h2> 在 HTTP/1.1 中，没有明确定义请求和响应的最大大小。这通常由服务器和客户端的配置以及网络环境决定。 然而，一些常见的限制包括： <ol><li>GET 请求： 在理论上，GET 请求的大小没有限制。但实际上，服务器、浏览器和中间代理可能会对 URL 长度、请求头大小等进行限制。</li><li>POST 请求： POST 请求的大小通常受服务器和应用程序的配置限制。服务器端可能会设置接受请求的最大大小，而应用程序也可能对接受的数据大小进行限制。</li><li>响应： 同样，响应的大小也没有明确定义的最大值。服务器和应用程序可以设置响应的最大大小，但也受到网络传输和客户端的限制。</li></ol> 在实际应用中，为了防止滥用和提高性能，通常会对请求和响应的大小设置合理的限制。例如，防火墙、负载均衡器、Web服务器和应用程序服务器等都可能设置最大请求和响应大小。这些限制可以在配置文件或服务器软件的设置中进行调整。 <h2><a name="t25"></a><a id="HTTPHTTPSFaviconico_468"></a>什么是HTTP/HTTPS中的浏览器Favicon.ico请求？</h2> 浏览器会自动尝试请求网站的 <code>favicon.ico</code> 文件，这是一个小图标文件，通常显示在浏览器标签页上或书签列表中，以标识网站。浏览器默认将这个文件命名为 <code>favicon.ico</code>，并将其放置在网站的根目录下。 <ol><li>标识网站： Favicon.ico 文件用于标识网站，使用户在浏览器标签页或书签列表中能够轻松识别网站。</li><li>增强用户体验： 具有自定义图标的网站在用户书签列表或多个打开的标签中更容易区分，有助于提高用户体验。</li></ol> HTTP 请求： 当浏览器加载网页时，它会尝试自动请求 <code>favicon.ico</code> 文件。这个请求通常发生在加载页面的早期阶段，而且是隐式的，无需在 HTML 中明确引用。请求的 URL 通常是网站的根目录，如 <code>http://example.com/favicon.ico</code>。 HTTPS 中的注意事项： 在使用 HTTPS 的情况下，为了确保安全，浏览器会尝试请求 HTTPS 版本的 <code>favicon.ico</code>，即 <code>https://example.com/favicon.ico</code>。如果网站没有提供 HTTPS 版本的 <code>favicon.ico</code>，浏览器可能会在控制台或网络面板中显示警告，但不会影响网页的正常加载。 网站管理员可以通过在网站的根目录提供一个合适的 <code>favicon.ico</code> 文件，来自定义网站的图标。这个图标通常是一个小的图像文件，例如 16x16 像素或 32x32 像素的图标。 <h2><a name="t26"></a><a id="HTTPRange_479"></a>什么是HTTP中的Range请求头部？</h2> <code>Range</code> 是 HTTP 请求头部的一部分，用于指定客户端想要获取资源的某个范围（部分）而不是整个资源。这允许客户端在多次请求中逐步获取资源的部分，有助于节省带宽和提高效率。这通常用于支持断点续传或仅下载资源的一部分。 基本格式： <pre data-index="17" class="set-code-show prettyprint"><code class="has-numbering" onclick="mdcp.signin(event)" style="position: unset;">Range: <unit>=<range-start>- <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> 其中，<code><unit></code> 表示范围的单位，一般为 <code>bytes</code>，<code><range-start></code> 表示范围的起始位置，可以是一个具体的字节位置，或者为空表示从资源的开头开始。 <pre data-index="18" class="set-code-show prettyprint"><code class="has-numbering" onclick="mdcp.signin(event)" style="position: unset;">Range: bytes=500-999 <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> 表示客户端希望获取资源的字节范围是从500到999。 多范围请求： HTTP/1.1 支持多范围请求，允许客户端一次请求多个不连续的范围。这通过在 <code>Range</code> 头部中使用逗号分隔的多个范围实现。 <pre data-index="19" class="set-code-show prettyprint"><code class="has-numbering" onclick="mdcp.signin(event)" style="position: unset;">Range: bytes=500-999,1000-1499 <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> 表示客户端希望获取资源的两个不连续的范围，分别是500到999和1000到1499。 服务器响应： 如果服务器支持并能满足客户端请求的范围，它将返回 206 Partial Content 状态码，并在响应头部包含 <code>Content-Range</code> 表示实际发送的范围，如下所示： <pre data-index="20" class="set-code-show prettyprint"><code class="has-numbering" onclick="mdcp.signin(event)" style="position: unset;">Content-Range: bytes 500-999/1500 <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> 表示服务器发送的是资源的第500到999字节的部分，而整个资源的大小是1500字节。 需要注意的是，并非所有服务器和资源都支持范围请求，因此客户端在使用 <code>Range</code> 头部时应该检查服务器的响应以确定是否成功获取了部分资源。 <h2><a name="t27"></a><a id="HTTPHTTPSUserAgent_503"></a>HTTP/HTTPS中的用户代理（User-Agent）头部有什么作用？</h2> <code>User-Agent</code> 是 HTTP 头部中的一个字段，用于标识发起请求的用户代理（User Agent），通常是一个浏览器或其他客户端应用程序的名称和版本信息。这个头部允许服务器根据用户代理来适应或定制响应，以提供更好的用户体验。 <ol><li>浏览器识别： 服务器可以根据 <code>User-Agent</code> 头部识别请求的客户端类型和版本，从而适应性地提供不同版本的网页或资源。这是为了解决不同浏览器之间的兼容性问题。</li><li>设备适配： 通过检查用户代理，服务器可以了解请求是来自桌面浏览器、移动设备还是其他类型的客户端。这有助于提供适配于不同设备的内容。</li><li>功能检测： 一些网站可能使用 <code>User-Agent</code> 来执行功能检测，以确定请求的客户端是否支持特定的功能或技术。</li><li>统计和分析： 网站管理员可以使用 <code>User-Agent</code> 头部来收集统计数据，了解其用户群体中使用的浏览器和设备分布情况。</li></ol> <pre data-index="21" class="set-code-show prettyprint"><code class="has-numbering" onclick="mdcp.signin(event)" style="position: unset;">User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36 <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> 上述示例中，<code>User-Agent</code> 表示请求是由 Chrome 浏览器的版本 91.0.4472.124 在 Windows 操作系统上发起的。这使得服务器能够根据这个信息提供适合 Chrome 浏览器的响应。 <h2><a name="t28"></a><a id="HTTP_StrictTransportSecurityHSTS_514"></a>什么是HTTP Strict-Transport-Security（HSTS）？</h2> HTTP Strict-Transport-Security（HSTS）是一个安全策略机制，旨在防止通过明文HTTP连接进行的中间人攻击。HSTS通过强制客户端和服务器使用加密的HTTPS连接来提高网站的安全性。 基本原理： 当服务器启用了HSTS，它会在响应头部中包含一个 <code>Strict-Transport-Security</code> 字段，其中包含了一些指令，主要告诉客户端： <ol><li>从现在开始，在指定的时间内，浏览器应该只通过HTTPS与该网站通信。</li><li>如果用户尝试通过HTTP连接访问该网站，浏览器应该自动将请求转为HTTPS。</li></ol> <pre data-index="22" class="set-code-show prettyprint"><code class="has-numbering" onclick="mdcp.signin(event)" style="position: unset;">Strict-Transport-Security: max-age=31536000; includeSubDomains <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> 上述示例中，<code>max-age</code> 表示 HSTS 策略的有效期，单位是秒（这里是一年），<code>includeSubDomains</code> 表示包括所有子域名。 优势和作用： <ol><li>防止SSL剥离攻击： HSTS 防止了一种称为SSL剥离（SSL stripping）的攻击，其中攻击者试图将加密的连接降级到不安全的HTTP连接。</li><li>减少中间人攻击： 强制使用HTTPS减少了中间人攻击的风险，确保数据在传输过程中是加密的。</li><li>增强用户隐私和安全： HSTS 提高了用户的隐私和安全，因为它减少了使用不安全连接的可能性。</li></ol> 需要注意的是，一旦启用了HSTS，客户端浏览器将会记住这个策略的有效期，即使网站之后禁用了HSTS。因此，网站在启用HSTS之前应确保其HTTPS设置正确，以免对用户造成不便。 <h2><a name="t29"></a><a id="HTTPHTTPSServer_Push_532"></a>什么是HTTP/HTTPS的服务器推送（Server Push）？</h2> HTTP/HTTPS的服务器推送（Server Push） 是一种优化性能的技术，允许服务器在客户端请求资源的同时，主动推送其他相关的资源给客户端，提前预加载可能需要的资源，从而减少客户端的等待时间。 服务器推送通常用于加速页面加载速度，减少延迟。它的工作方式如下： <ol><li>客户端请求HTML页面： 客户端向服务器请求HTML页面。</li><li>服务器分析HTML并推送资源： 服务器分析HTML文件，识别其中引用的其他资源（例如CSS、JavaScript、图像等），并主动推送这些资源给客户端。</li><li>客户端收到推送的资源： 客户端收到推送的资源后，无需再次发起请求，加速页面加载。</li></ol> <pre data-index="23" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"> <link rel="stylesheet" href="/styles.css" as="style" crossorigin="anonymous" onload="this.onload=null;this.rel='stylesheet'"> <link rel="preload" href="/styles.css" as="style" crossorigin="anonymous" />  <script src="/script.js" crossorigin="anonymous" defer></script> <link rel="preload" href="/script.js" as="script" crossorigin="anonymous" /> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li></ul></pre> 在上述示例中，<code><link></code> 和 <code><script></code> 标签中的 <code>rel="preload"</code> 属性表示对资源的预加载，而 <code>rel="stylesheet"</code> 和 <code>defer</code> 属性表示该资源是样式表或延迟执行的脚本。这样，服务器就可以通过推送这些资源来加速页面加载。 需要注意的是，服务器推送并不是在所有情况下都能带来性能提升，因为在一些网络环境下可能会产生冗余的推送，导致反而影响性能。因此，服务器推送的使用需要谨慎评估和调整。 <h2><a name="t30"></a><a id="HTTPKeepAliveConnection_550"></a>HTTP中的Keep-Alive和Connection头部有什么关系？</h2> <code>Keep-Alive</code> 和 <code>Connection</code> 是 HTTP 头部中与连接控制相关的两个字段，它们之间有一定的关系。 <ol><li>Keep-Alive:</li></ol> <ul><li><code>Keep-Alive</code> 是一个用于控制持久连接（persistent connection）的 HTTP 头部字段。</li><li>当服务器支持持久连接时，可以通过在请求或响应头部中添加 <code>Connection: keep-alive</code> 来启用持久连接。</li><li><code>Keep-Alive</code> 头部可以设置一些参数，如连接超时时间（timeout）、最大请求数等。</li></ul> <ol start="2"><li>Connection:</li></ol> <ul><li><code>Connection</code> 头部用于指定连接的管理方式，其中包括与 <code>Keep-Alive</code> 有关的值。</li><li>如果请求头部或响应头部中包含 <code>Connection: keep-alive</code>，表示希望使用持久连接，保持 TCP 连接打开以供多个请求和响应复用。</li><li>如果使用 <code>Connection: close</code>，表示希望在完成请求或响应后立即关闭连接，不保持持久连接。</li></ul> <pre data-index="24" class="set-code-show prettyprint"><code class="has-numbering" onclick="mdcp.signin(event)" style="position: unset;">Connection: keep-alive <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> 上述示例中，<code>Connection: keep-alive</code> 表示请求或响应希望使用持久连接。 关系： <ul><li>当客户端发送请求时，如果希望使用持久连接，则会在请求头部中添加 <code>Connection: keep-alive</code>。</li><li>服务器如果支持持久连接，会在响应头部中添加 <code>Connection: keep-alive</code>。</li><li>如果客户端和服务器都同意使用持久连接，TCP 连接就会保持打开，允许在同一连接上进行多个请求和响应，减少连接的建立和关闭开销。</li></ul> 需要注意的是，并非所有的服务器和客户端都支持持久连接，因此 <code>Connection</code> 头部的处理要根据具体的 HTTP 实现来确定。如果服务器不支持持久连接，即使客户端请求中有 <code>Connection: keep-alive</code>，服务器也可能关闭连接。 <h2><a name="t31"></a><a id="HTTPHTTPSUpgrade_572"></a>HTTP/HTTPS中的协议升级（Upgrade）是什么？</h2> HTTP/HTTPS中的协议升级（Protocol Upgrade）是一种机制，允许客户端和服务器在建立初始连接后将协议从一个初始协议升级到另一个协议。这种机制允许更高级别的协议在已经建立的连接上进行通信，而无需重新建立新的连接。 <ol><li>初始协议： 在连接初始阶段，客户端和服务器使用某种基础协议（例如，HTTP/1.1）建立连接。</li><li>协议升级请求： 在建立连接后，客户端可以通过请求头部中的 <code>Upgrade</code> 字段请求协议升级。服务器在确认后可以同意进行协议升级。</li><li>协议切换： 一旦协议升级被确认，客户端和服务器之间的通信就会切换到新的协议。</li><li>应用场景： 协议升级通常用于支持更高级别的通信协议，例如从普通的HTTP协议切换到WebSocket协议。</li></ol> <pre data-index="25" class="set-code-show prettyprint"><code class="has-numbering" onclick="mdcp.signin(event)" style="position: unset;">GET /index.html HTTP/1.1 Host: example.com Upgrade: websocket Connection: Upgrade Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ== Sec-WebSocket-Version: 13 <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li></ul></pre> 上述示例中，客户端通过 <code>Upgrade: websocket</code> 字段请求升级到 WebSocket 协议。 注意事项： <ul><li>协议升级需要得到服务器的确认，服务器可以拒绝协议升级请求。</li><li>协议升级是在已经建立的连接上进行的，而不是通过重新建立新的连接。</li><li>协议升级过程通常需要遵循特定的协议升级规范，以确保双方能够正确地切换到新的协议。</li></ul> 协议升级是一种灵活的机制，允许在已经建立的连接上切换到更高级别的通信协议，为一些特定的应用场景提供了更多的可能性。 <h2><a name="t32"></a><a id="HTTPHTTPSSubresource_Integrity_595"></a>什么是HTTP/HTTPS的子资源完整性（Subresource Integrity）？</h2> 子资源完整性（Subresource Integrity，简称SRI）是一种用于确保浏览器从第三方站点加载的资源（例如脚本或样式表）不被篡改的安全机制。SRI通过将资源的加密散列值嵌入到HTML文档中，允许浏览器验证实际加载的资源是否与所声明的完整性匹配。 <ol><li>生成哈希： 网站维护者使用特定的工具生成资源文件（如脚本或样式表）的哈希值。</li><li>嵌入哈希： 在HTML文档中，使用 <code>integrity</code> 属性将生成的哈希值嵌入到对应的资源引用中。</li><li>验证过程： 当浏览器加载页面时，它会检查资源的实际哈希值是否与声明的 <code>integrity</code> 值匹配。如果匹配，说明资源没有被篡改，加载继续进行；如果不匹配，浏览器会阻止加载资源，以防止潜在的攻击。</li></ol> <pre data-index="26" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><script src="https://example.com/script.js" integrity="sha256-BBQyUPoEhe1kOIfLcrTq2sBRHBEv3kqBaHai12j1fK4=" crossorigin="anonymous"></script> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> 上述示例中，<code>integrity</code> 属性包含了资源文件 <code>script.js</code> 的SHA-256哈希值，浏览器在加载脚本时会检查实际的哈希值是否匹配。<code>crossorigin="anonymous"</code> 属性用于处理跨域请求。 优势和应用场景： <ol><li>防止篡改攻击： SRI可以防止恶意攻击者通过篡改第三方资源来执行潜在的安全威胁，例如注入恶意代码。</li><li>提高安全性： 对于使用第三方CDN或其他托管服务的网站，SRI提供了一种额外的安全层，确保引用的资源没有被篡改。</li><li>适用于关键资源： SRI通常用于加载关键的安全脚本或库，确保这些资源的完整性不受破坏。</li></ol> 需要注意的是，SRI并不适用于所有场景，因为它增加了一些维护负担，并且需要确保资源的哈希值与实际文件的一致性。 </div> </div> </li> <li class="list-group-item ul-li"> 相关阅读: <a href="/Article/Index/1261493">【owt-server】AudioSendAdapter分析</a> <a href="/Article/Index/612623">MySQL知识补充（表字段操作、视图、触发器、事物、存储过程、内置函数、流程控制、索引、慢查询）</a> <a href="/Article/Index/1282555">如何构建 Protocol Buffers（protobuf）并解决常见问题</a> <a href="/Article/Index/891964">ssm springboot关于java mysql关于查询或者添加中文乱码问题</a> <a href="/Article/Index/643631">【mysql篇-基础篇】通用语法1</a> <a href="/Article/Index/1097858">C++ - STL 使用红黑树封装map set</a> <a href="/Article/Index/1303276">人机融合有助于解决P-NP问题的理解与解决</a> <a href="/Article/Index/1309563">OpenHarmony应用核心技术理念与需求机遇简析</a> <a href="/Article/Index/1311785">c++ 数组传递</a> <a href="/Article/Index/1314112">ViewBinding——Android之视图绑定</a> </li> <li class="list-group-item from-a mb-2"> 原文地址：https://blog.csdn.net/u010442378/article/details/134541899 </li> </ul> </div> <div class="col-lg-4 col-sm-12"> <ul class="list-group" style="word-break:break-all;"> <li class="list-group-item ul-li-bg" aria-current="true"> 最新文章 </li> <li class="list-group-item ul-li"> <a href="/Article/Index/1484446">攻防演习之三天拿下官网站群</a> <a href="/Article/Index/1515268">数据安全治理学习——前期安全规划和安全管理体系建设</a> <a href="/Article/Index/1759065">企业安全 | 企业内一次钓鱼演练准备过程</a> <a href="/Article/Index/1485036">内网渗透测试 | Kerberos协议及其部分攻击手法</a> <a href="/Article/Index/1877332">0day的产生 | 不懂代码的"代码审计"</a> <a href="/Article/Index/1887576">安装scrcpy-client模块av模块异常，环境问题解决方案</a> <a href="/Article/Index/1887578">leetcode hot100【LeetCode 279. 完全平方数】java实现</a> <a href="/Article/Index/1887512">OpenWrt下安装Mosquitto</a> <a href="/Article/Index/1887520">AnatoMask论文汇总</a> <a href="/Article/Index/1887496">【AI日记】24.11.01 LangChain、openai api和github copilot</a> </li> </ul> <ul class="list-group pt-2" style="word-break:break-all;"> <li class="list-group-item ul-li-bg" aria-current="true"> 热门文章 </li> <li class="list-group-item ul-li"> <a href="/Article/Index/888177">十款代码表白小特效一个比一个浪漫赶紧收藏起来吧！！！</a> <a href="/Article/Index/797680">奉劝各位学弟学妹们，该打造你的技术影响力了！</a> <a href="/Article/Index/888183">五年了，我在 CSDN 的两个一百万。</a> <a href="/Article/Index/888179">Java俄罗斯方块，老程序员花了一个周末，连接中学年代！</a> <a href="/Article/Index/797730">面试官都震惊，你这网络基础可以啊！</a> <a href="/Article/Index/797725">你真的会用百度吗？我不信 — 那些不为人知的搜索引擎语法</a> <a href="/Article/Index/797702">心情不好的时候，用 Python 画棵樱花树送给自己吧</a> <a href="/Article/Index/797709">通宵一晚做出来的一款类似CS的第一人称射击游戏Demo！原来做游戏也不是很难，连憨憨学妹都学会了！</a> <a href="/Article/Index/797716">13 万字 C 语言从入门到精通保姆级教程2021 年版</a> <a href="/Article/Index/888192">10行代码集2000张美女图，Python爬虫120例，再上征途</a> </li> </ul> </div> </div> </div>     <nav class="navbar navbar-inverse navbar-fixed-bottom"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="text-muted center foot-height"> Copyright © 2022 侵权请联系<a href="mailto:2656653265@qq.com">2656653265@qq.com</a>    <a href="https://beian.miit.gov.cn/" target="_blank">京ICP备2022015340号-1</a> </div> <div style="width:300px;margin:0 auto; padding:0px 5px;"> <a href="/regex.html">正则表达式工具</a> <a href="/cron.html">cron表达式工具</a> <a href="/pwdcreator.html">密码生成工具</a> </div> <div style="width:300px;margin:0 auto; padding:5px 0;"> <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010502049817" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"> <img src="" style="float:left;" />京公网安备 11010502049817号</a> </div> </div> </div> </div> </nav>   <script src="/js/plugins/jquery/jquery.js"></script> <script src="/js/bootstrap.min.js"></script>   </body> </html>

什么是同源策略？