http和https详细，前端学习

1. http和https的了解

        HTTP: 超文本传输协议（Hyper Text Transfer Protocol）是一种详细规定了浏览器和万维网服务器之间互相通信的规则，通过因特网传送万维网文档的数据传送协议
        HTTPS：超文本传输安全协议（Hypertext Transfer Protocol Secure，简称：HTTPS）是一种通过计算机网络进行安全通信的传输协议。HTTPS经由 HTTP 进行通信，利用 SSL/TLS 来加密数据包。HTTPS 的主要目的是提供对网站服务器的身份认证，保护交换数据的隐私与完整性

作为一个前端工程师，网络是怎么运行的是非常重要的，因为web应用程序是建立在网络基础上，了解网络知识可以帮助前端开发者构建更好的 Web 应用程序，提高用户体验
面试题：浏览器输入地址后发生了什么？

1、浏览器的地址栏输入URL并按下回车。

2、浏览器查找当前URL是否存在缓存，并比较缓存是否过期。

3、DNS解析URL对应的IP。

4、根据IP建立TCP连接（三次握手）。

5、HTTP发起请求。

6、服务器处理请求，浏览器接收HTTP响应。

7、渲染页面，构建DOM树。

        获取到资源HTML、CSS、js ->构建DOM树 > 构建styleSheets树

8、关闭TCP连接（四次挥手）

我们知道在地址栏输入的域名并不是最后资源所在的真实位置，域名只是与IP地址的一个映射。网络服务器的IP地址那么多，我们不可能去记一串串的数字，因此域名就产生了，域名解析的过程实际是将域名还原为IP地址的过程。

　　首先浏览器先检查本地hosts文件是否有这个网址映射关系，如果有就调用这个IP地址映射，完成域名解析。

　　如果没找到则会查找本地DNS解析器缓存，如果查找到则返回。

　　如果还是没有找到则会查找本地DNS服务器，如果查找到则返回。

　　最后迭代查询，按根域服务器 ->顶级域,.cn->第二层域，hb.cn ->子域，www.hb.cn的顺序找到IP地址

 这个面试题其实讲的就是计算机之间是怎么通信的？但是他们为什么可以通信呢？这就涉及到网络协议

1.1 网络协议

网络协议是指计算机之间通信所使用的规则和标准，就相当于你和别人约定好的打招呼的方式，

前端开发者需要了解一些常见的网络协议，例如 HTTP、HTTPS、TCP 和 UDP

• TCP：传输控制协议，用于保证数据的可靠传输。TCP 使用三次握手协议建立连接，并在数据传输过程中进行错误校验和重传。

  • 有一个很有意思的点，就是重传，如果你一直没收到别人的回信，你就会一直给她发消息，舔狗自行领会，你会懂的

TCP（传输控制协议）的重传机制主要包括超时重传和快速重传，以及SACK（选择性确认）和D-SACK（Duplicate SACK）等改进技术。

1. 超时重传：

   • 当发送方在设定的超时时间内没有收到接收方的应答时，会认为数据丢失并重发该数据。
   • 超时时间的设置是一个关键问题，因为它直接影响到网络性能和效率。如果设置过大，可能会导致性能下降；如果设置过小，可能会增加网络拥塞。

2. 快速重传：

   • 与超时重传不同，快速重传是基于数据驱动的机制，即在连续三次接收到相同的ACK包后触发重传。
   • 快速重传的缺点在于，它无法确定除了丢失的数据包之外的其他数据包（如Seq3、Seq4、Seq5）的接收情况，这可能导致不必要的重传。

3. SACK和D-SACK：

   • SACK是在TCP头部加入SACK选项，用于记录哪些连续的报文被成功接收。这有助于发送方准确判断哪些数据需要重传。
   • D-SACK（Duplicate SACK）是SACK的一种应用，用于告诉发送方哪些数据被重复接收。这有助于解决因ACK丢失或网络延迟导致的问题。

缺点：

• 超时重传的局限性：超时重传的策略是每当遇到一次超时重传时，都会将下一次超时时间间隔设为之前的两倍。这种方法在遇到频繁的超时时效果不佳，因为它可能会导致较长的等待时间。
• 快速重传的效率问题：快速重传虽然可以减少不必要的等待时间，但在实际应用中，由于网络环境的复杂性，其效率并不总是最高的。例如，当网络延迟导致ACK丢失时，快速重传可能会误判并触发不必要的重传。

综上所述，TCP的重传机制虽然在一定程度上提高了数据传输的可靠性，但仍然存在一些缺点和局限性。未来的研究可以进一步优化这些机制，以适应更加复杂和多变的网络环境

• UDP：用户数据报协议，用于快速传输数据，但不保证数据的可靠性。

1.2 网络请求

前端发生网络请求有三种方式

1. XMLHttpRequest：XMLHttpRequest（XHR）对象是一种用于发送 HTTP 请求的 JavaScript API。XHR 可以异步发送请求并处理响应，通常用于 AJAX 技术。

一般用axios库，然后二次封装

面试题： axios二次封装

总的来说就是让你更加方便请求

        优化配置，设置默认配置项（responseType、跨域携带cookie、token、超时设置）

        统一设置请求头

        根据环境(生产环境，测试环境，开发环境)设置 baseURL

        添加请求拦截器 （一般涉及到权限，项目要考虑四个权限，路由权限，页面权限，按钮权限，接口权限）

        添加响应拦截器（ 请求成功，配置业务状态码， 或者是错误码，统一提示）

        封装 Post 方法，精简 post 请求方式

        封装 Get 方法，精简 get 请求方式

        全局的loading配置

2. Fetch API：Fetch API 是一种新的 JavaScript API，用于发送网络请求。Fetch API 使用 Promise 对象处理异步操作，并支持请求/响应拦截器。

3. WebSocket：WebSocket 是一种全双工协议，用于在客户端和服务器之间建立持久连接。WebSocket 可以实现实时通信

全双工 即通信的双方可以同时发送和接收数据

指的是你和我可以同时向对方发送消息，这就是双向奔赴的爱情，是舔狗不懂的

1.3 网络安全

1、跨站脚本攻击（XSS）：XSS 攻击是一种注入攻击，攻击者通过注入恶意脚本代码来窃取用户信息或修改网页内容。前端开发者可以使用编码、验证和过滤等技术来防止 XSS 攻击

vue3 如果你在项目中使用了vue3作为前端开发框架，恭喜你，vue3将为你解决绝大多数的XSS攻击问题

2、跨站请求伪造（CSRF）：CSRF 攻击是一种伪造请求的攻击，攻击者通过伪造请求来执行非法操作。前端开发者可以使用 token、Referer 和 SameSite 等技术来防止 CSRF 攻击

3、跨域资源共享（CORS）：CORS 是一种安全机制，用于在浏览器中限制跨域资源的访问。跨域资源共享（CORS）是一种安全机制，用于在浏览器中限制跨域资源的访问。跨域是指在浏览器中访问不同域名、协议或端口的资源。在 Web 应用程序中，跨域访问可能会导致安全漏洞和数据泄露

2. http

http是一种无状态的协议即服务器不保留与客户交易时的任何状态，这就大大减轻了服务器记忆负担，从而保持较快的相应速度，HTTP是一种面向对象的协议。允许传送任意类型的数据对象。它通过数据类型和长度来标识所传送的数据内容和大小，并允许对数据进行压缩传送。当用户在一个html文档中定义了一个超文本链后，浏览器将通过TCP/IP协议与指定的服务器建立连接

2.1 http常见状态码

1xx 类状态码属于提示信息，是协议处理中的一种中间状态，实际用到的比较少。

2xx 类状态码表示服务器成功处理了客户端的请求，也是我们最愿意看到的状态。

        200是最常见的成功状态码，表示一切正常。如果是非 HEAD 请求，服务器返回的响应头都会有 body 数据。

        204 也是常见的成功状态码，与 200 OK 基本相同，但响应头没有 body 数据。

        206 是应用于 HTTP 分块下载或断点续传，表示响应返回的 body 数据并不是资源的全部，而是其中的一部分，也是服务器处理成功的状态。

3xx 类状态码表示客户端请求的资源发生了变动，需要客户端用新的 URL 重新发送请求获取资源，也就是重定向。

        301 表示永久重定向，说明请求的资源已经不存在了，需改用新的 URL 再次访问。

        302 表示临时重定向，说明请求的资源还在，但暂时需要用另一个 URL 来访问。

        301 和 302 都会在响应头里使用字段 Location，指明后续要跳转的 URL，浏览器会自动重定向新的 URL。

        304 不具有跳转的含义，表示资源未修改，重定向已存在的缓冲文件，也称缓存重定向，也就是告诉客户端可以继续使用缓存资源，用于缓存控制。

4xx 类状态码表示客户端发送的报文有误，服务器无法处理，也就是错误码的含义。

        400 表示客户端请求的报文有错误，但只是个笼统的错误。

        403 表示服务器禁止访问资源，并不是客户端的请求出错。

        404 表示请求的资源在服务器上不存在或未找到，所以无法提供给客户端。

5xx 类状态码表示客户端请求报文正确，但是服务器处理时内部发生了错误，属于服务器端的错误码。

        500与 400 类型，是个笼统通用的错误码，服务器发生了什么错误，我们并不知道。

        501表示客户端请求的功能还不支持，类似“即将开业，敬请期待”的意思。

        502通常是服务器作为网关或代理时返回的错误码，表示服务器自身工作正常，访问后端服务器发生了错误。

        503 表示服务器当前很忙，暂时无法响应客户端，类似“网络服务正忙，请稍后重试”的意思

2.2 http报文

HTTP报文由从客户机到服务器的请求和从服务器到客户机的响应构成。

请求报文格式如下：

        请求行 － 通用信息头 － 请求头 － 实体头 － 报文主体

请求行以方法字段开始，后面分别是URL字段和HTTP协议版本字段，并以CRLF结尾。SP是分隔符。除了在最后的CRLF序列中CF和LF是必需的之外，其他都可以不要。有关通用信息头，请求头和实体头方面的具体内容可以参照相关文件。

应答报文格式如下：

        状态行 － 通用信息头 － 响应头 － 实体头 － 报文主体

状态码元由3位数字组成，表示请求是否被理解或被满足。原因分析是对原文的状态码作简短的描述，状态码用来支持自动操作，而原因分析用来供用户使用。客户机无需用来检查或显示语法。有关通用信息头，响应头和实体头方面的具体内容可以参照相关文件

2.3 工作原理

HTTP是基于客户/服务器模式，且面向连接的。http是怎么建立连接的？

（1）客户与服务器建立连接（三次握手）

（2）客户向服务器提出请求；

（3）服务器接受请求，并根据请求返回相应的文件作为应答；

（4）客户与服务器关闭连接（四次挥手）

2.3.1 三次握手

        第一次握手： 建立连接时，客户端发送syn包（syn=j）到服务器，并进入SYN_SENT状态，等待服务器确认； 

　　第二次握手： 服务器收到syn包，必须确认客户的SYN（ack=j+1），同时自己也发送一个SYN包（syn=k），即SYN+ACK包，此时服务器进入SYN_RECV状态；

　　第三次握手： 客户端收到服务器的SYN+ACK包，向服务器发送确认包ACK(ack=k+1），此包发送完毕，客户端和服务器进入ESTABLISHED（TCP连接成功）状态，完成三次握手。

　　完成三次握手，客户端与服务器开始传送数据

简单的来讲：就是你跟你女神说，我能和你交往吗？如果女神没回你，你就开始超时重传，一直发，如果女神回你了，说可以，这样你们就在一起了吗？如果你是这样认为的，你就注定孤寡了，女神还在等你的消息呢，女神还不知道自己发了个可以，你是怎么看的，所以你得回应她，说好啊，那我们在一起咯，嘿嘿嘿！

2.3.2 四次挥手

第一次挥手是浏览器发完数据后，发送FIN请求断开连接。

第二次挥手是服务器发送ACK表示同意，如果在这一次服务器也发送FIN请求断开连接似乎也没有不妥，但考虑到服务器可能还有数据要发送，所以服务器发送FIN应该放在第三次挥手中。

这样浏览器需要返回ACK表示同意，也就是第四次挥手

2.4 http请求方式

• GET: 向服务器获取数据；
• POST：将实体提交到指定的资源，通常会造成服务器资源的修改；
• PUT：上传文件，更新数据；
• DELETE：删除服务器上的对象；
• HEAD：获取报文首部，与 GET 相比，不返回报文主体部分；
• OPTIONS：询问支持的请求方法，用来跨域请求；
• CONNECT：要求在与代理服务器通信时建立隧道，使用隧道进行TCP通信；
• TRACE: 回显服务器收到的请求，主要⽤于测试或诊断

2.4.1 常见的 HTTP 请求头和响应头

HTTP Request Header 常见的请求头：
Accept：浏览器能够处理的内容类型
Accept-Charset：浏览器能够显示的字符集
Accept-Encoding：浏览器能够处理的压缩编码
Accept-Language：浏览器当前设置的语言
Connection：浏览器与服务器之间连接的类型
Cookie：当前页面设置的任何 Cookie
Host：发出请求的页面所在的域
Referer：发出请求的页面的
URL User-Agent：浏览器的用户代理字符串

HTTP Responses Header 常见的响应头：
Date：表示消息发送的时间，时间的描述格式由rfc822 定义server:服务器名称
Connection：浏览器与服务器之间连接的类型
Cache-Control：控制 HTTP 缓存
content-type：表示后面的文档属于什么MIME 类型

常见的 Content-Type 属性值有以下四种：
（1）application/x-www-form-urlencoded：浏览器的原生form表单 ， 如 果 不 设 置 enctype 属 性，那么最终就会以application/x-www-form-urlencoded 方式提交数据。该种方式提交的数据放在 body 里面，数据按照 key1=val1&key2=val2 的方式进行编码，key 和 val 都进行了 URL 转码。
（2）multipart/form-data：该种方式也是一个常见的POST 提交方式，通常表单上传文件时使用该种方式。
（3）application/json：服务器消息主体是序列化后的JSON字符串。
（4）text/xml：该种方式主要用来提交XML 格式的数据

3、https

HTTPS协议的主要作用是：建立一个信息安全通道，来确保数组的传输，确保网站的真实性

3.1 HTTP和HTTPS的区别

HTTP传输的数据都是未加密的，也就是明文的，网景公司设置了SSL协议来对HTTP协议传输的数据进行加密处理，简单来说HTTPS协议是由HTTP和SSL协议构建的可进行加密传输和身份认证的网络协议，比HTTP协议的安全性更高

主要的区别如下：

• HTTP 是明文传输，连接很简单，是无状态的。HTTPS 协议是由SSL+HTTP协议构建的可进行加密传输、身份证的网络协议，比 HTTP 协议安全。
• HTTPS对搜索引擎更友好，利于 SEO；谷歌、百度优先索引 HTTPS 网页。
• 使用不同的链接方式，端口也不同，HTTPS 标准端口 443，HTTP 标准端口 80。
• HTTPS 协议需要 CA 证书，费用较高；而HTTP 协议不需要

3.2 HTTPS协议的优缺点

优点

• 使用 HTTPS 协议可认证用户和服务器，确保数据发送到正确的客户机和服务器
• HTTPS 协议是可进行加密传输、身份认证的网络协议，要比 http 协议安全
• HTTPS 是现行架构下最安全的解决方案，虽然不是绝对安全，但它大幅增加了中间人攻击的成本（除非用户主动信任了伪造证书）

缺点

• 证书费用以及更新维护。
• https 加密解密需要消耗更多服务器资源；响应要比http要慢一点
• https 握手阶段比较费时

3.3 HTTPS握手

• 客户端发起 HTTPS 请求，发送客户端生成的随机数和支持的加密算法列表；
• 服务端返回证书、服务端生成的随机数、选择的加密方法给客户端；
• 客户端对证书进行合法性验证，验证通过后再生成一个随机数，并使用数字证书中的公钥，加密这个随机数，然后发给服务器。并且还会提供一个前面所有内容的 hash 的值，用来供服务器检验。
• 服务器使用自己的私钥，来解密客户端发送过来的随机数。并提供前面所有内容的 hash 值来供客户端检验。
• 三次握手此时已经完成，之后客户端和服务端都会根据这三个随机数，生成一个随机对称密钥，之后的数据都通过随机对称密钥进行加密传输

3.4 客户端如何验证证书的合法性

• 首先浏览器读取证书中的证书所有者、有效期等信息进行一一校验。
• 浏览器接着判断证书中的颁发者CA是否受信任，用以校验证书是否为合法机构颁发；
• 如果证书不可信，浏览器就会提示证书不可信。
• 如果证书可信，那么浏览器就会用 CA机构 的公钥对证书里面的签名进行解密，得到hash值和加密算法。
• 再用证书里提到的加密算法，将证书的明文内容加密成另一个hash值，对比两个hash值是否相同；相同则证明服务器发来的证书合法，没有被篡改。
• 再比对一下证书中的域名和当前请求的域名是否一致，以确保证书不会被掉包。
• 此时浏览器就可以读取证书中的公钥，用于后续加密了