【面试题】2023高频前端面试题20题

大厂面试题分享 面试题库

前端后端面试题库 （面试必备） 推荐：★★★★★

地址：前端面试题库

1. 简述 TCP 连接的过程（淘系）

参考答案：
TCP 协议通过三次握手建立可靠的点对点连接，具体过程是：
首先服务器进入监听状态，然后即可处理连接
第一次握手：建立连接时，客户端发送 syn 包到服务器，并进入 SYN_SENT 状态，等待服务器确认。在发送的包中还会包含一个初始序列号 seq。此次握手的含义是客户端希望与服务器建立连接。
第二次握手：服务器收到 syn 包，然后回应给客户端一个 SYN+ACK 包，此时服务器进入 SYN_RCVD 状态。此次握手的含义是服务端回应客户端，表示已收到并同意客户端的连接请求。
第三次握手：客户端收到服务器的 SYN 包后，向服务器再次发送 ACK 包，并进入 ESTAB_LISHED 状态。
最后，服务端收到客户端的 ACK 包，于是也进入 ESTAB_LISHED 状态，至此，连接建立完成

2. 介绍下 HTTPS 中间人攻击

参考答案：
针对 HTTPS 攻击主要有 SSL 劫持攻击和 SSL 剥离攻击两种。
SSL 劫持攻击是指攻击者劫持了客户端和服务器之间的连接，将服务器的合法证书替换为伪造的证书，从而获取客户端和服务器之间传递的信息。这种方式一般容易被用户发现，浏览器会明确的提示证书错误，但某些用户安全意识不强，可能会点击继续浏览，从而达到攻击目的。
SSL 剥离攻击是指攻击者劫持了客户端和服务器之间的连接，攻击者保持自己和服务器之间的 HTTPS 连接，但发送给客户端普通的 HTTP 连接，由于 HTTP 连接是明文传输的，即可获取客户端传输的所有明文数据。

3. 介绍下 http1.0、http1.1、http2.0 协议的区别？

参考答案：
首先说 http1.0
它的特点是每次请求和响应完毕后都会销毁 TCP 连接，同时规定前一个响应完成后才能发送下一个请求。这样做有两个问题：
无法复用连接
每次请求都要创建新的 TCP 连接，完成三次握手和四次挥手，网络利用率低
队头阻塞
如果前一个请求被某种原因阻塞了，会导致后续请求无法发送。
然后是 http1.1
http1.1 是 http1.0 的改进版，它做出了以下改进：
长连接
http1.1 允许在请求时增加请求头connection:keep-alive，这样便允许后续的客户端请求在一段时间内复用之前的 TCP 连接
管道化
基于长连接的基础，管道化可以不等第一个请求响应继续发送后面的请求，但响应的顺序还是按照请求的顺序返回。
缓存处理
新增响应头 cache-control，用于实现客户端缓存。
断点传输
在上传/下载资源时，如果资源过大，将其分割为多个部分，分别上传/下载，如果遇到网络故障，可以从已经上传/下载好的地方继续请求，不用从头开始，提高效率
最后是 http2.0
http2.0 进一步优化了传输效率，它主要有以下改进：
二进制分帧
将传输的消息分为更小的二进制帧，每帧有自己的标识序号，即便被随意打乱也能在另一端正确组装
多路复用
基于二进制分帧，在同一域名下所有访问都是从同一个 tcp 连接中走，并且不再有队头阻塞问题，也无须遵守响应顺序
头部压缩
http2.0 通过字典的形式，将头部中的常见信息替换为更少的字符，极大的减少了头部的数据量，从而实现更小的传输量
服务器推
http2.0 允许服务器直接推送消息给客户端，无须客户端明确的请求

4. 为什么 HTTP1.1 不能实现多路复用（腾讯）

参考答案：
HTTP/1.1 不是二进制传输，而是通过文本进行传输。由于没有流的概念，在使用并行传输（多路复用）传递数据时，接收端在接收到响应后，并不能区分多个响应分别对应的请求，所以无法将多个响应的结果重新进行组装，也就实现不了多路复用。

5. 简单讲解一下 http2 的多路复用（网易）

参考答案：
在 HTTP/2 中，有两个非常重要的概念，分别是帧（frame）和流（stream）。 帧代表着最小的数据单位，每个帧会标识出该帧属于哪个流，流也就是多个帧组成的数据流。 多路复用，就是在一个 TCP 连接中可以存在多条流。换句话说，也就是可以发送多个请求，对端可以通过帧中的标识知道属于哪个请求。通过这个技术，可以避免 HTTP 旧版本中的队头阻塞问题，极大的提高传输性能。

6. 谈谈你对 TCP 三次握手和四次挥手的理解

TCP 协议通过三次握手建立可靠的点对点连接，具体过程是：
首先服务器进入监听状态，然后即可处理连接
第一次握手：建立连接时，客户端发送 syn 包到服务器，并进入 SYN_SENT 状态，等待服务器确认。在发送的包中还会包含一个初始序列号 seq。此次握手的含义是客户端希望与服务器建立连接。
第二次握手：服务器收到 syn 包，然后回应给客户端一个 SYN+ACK 包，此时服务器进入 SYN_RCVD 状态。此次握手的含义是服务端回应客户端，表示已收到并同意客户端的连接请求。
第三次握手：客户端收到服务器的 SYN 包后，向服务器再次发送 ACK 包，并进入 ESTAB_LISHED 状态。
最后，服务端收到客户端的 ACK 包，于是也进入 ESTAB_LISHED 状态，至此，连接建立完成
当需要关闭连接时，需要进行四次挥手才能关闭
Client 向 Server 发送 FIN 包，表示 Client 主动要关闭连接，然后进入 FIN_WAIT_1 状态，等待 Server 返回 ACK 包。此后 Client 不能再向 Server 发送数据，但能读取数据。
Server 收到 FIN 包后向 Client 发送 ACK 包，然后进入 CLOSE_WAIT 状态，此后 Server 不能再读取数据，但可以继续向 Client 发送数据。
Client 收到 Server 返回的 ACK 包后进入 FIN_WAIT_2 状态，等待 Server 发送 FIN 包。
Server 完成数据的发送后，将 FIN 包发送给 Client，然后进入 LAST_ACK 状态，等待 Client 返回 ACK 包，此后 Server 既不能读取数据，也不能发送数据。
Client 收到 FIN 包后向 Server 发送 ACK 包，然后进入 TIME_WAIT 状态，接着等待足够长的时间（2MSL）以确保 Server 接收到 ACK 包，最后回到 CLOSED 状态，释放网络资源。
Server 收到 Client 返回的 ACK 包后便回到 CLOSED 状态，释放网络资源。

7. 介绍 HTTPS 握手过程

参考答案：
客户端请求服务器，并告诉服务器自身支持的加密算法以及密钥长度等信息
服务器响应公钥和服务器证书
客户端验证证书是否合法，然后生成一个会话密钥，并用服务器的公钥加密密钥，把加密的结果通过请求发送给服务器
服务器使用私钥解密被加密的会话密钥并保存起来，然后使用会话密钥加密消息响应给客户端，表示自己已经准备就绪
客户端使用会话密钥解密消息，知道了服务器已经准备就绪。
后续客户端和服务器使用会话密钥加密信息传递消息

8. HTTPS 握手过程中，客户端如何验证证书的合法性

参考答案：
校验证书的颁发机构是否受客户端信任。
通过 CRL 或 OCSP 的方式校验证书是否被吊销。
对比系统时间，校验证书是否在有效期内。
通过校验对方是否存在证书的私钥，判断证书的网站域名是否与证书颁发的域名一致。

9. Http 状态码 301 和 302 的应用场景分别是什么

参考答案：
301 表示永久重定向，302 表示临时重定向。
如果浏览器收到的是 301，则会缓存重定向的地址，之后不会再重新请求服务器，直接使用缓存的地址请求，这样可以减少请求次数。但如果浏览器收到的是 302，则不会缓存重定向地址，浏览器将来会继续以原有地址请求。
因此，301 适合地址永久转移的场景，比如域名变更；而 302 适合临时转移的场景，比如首页临时跳转到活动页

10. cookie 和 token 都存放在 header 中，为什么不会劫持 token？

参考答案：
由于浏览器会自动发送 cookie 到服务器，因此攻击者可以利用这种特点进行 csrf 攻击。
而通常 token 是不放到 cookie 中的，需要浏览器端使用 JS 自行保存到 localstorage 中，在请求时也需要手动的加入到请求头中，因此不容易引发 csrf 攻击。

11. 介绍下如何实现 token 加密

参考答案：
以最常见的 token 格式 jwt 为例, token 分为三段，分别是 header、payload、signature。 其中，header 标识签名算法和令牌类型；payload 标识主体信息，包含令牌过期时间、发布时间、发行者、主体内容等；signature 是使用特定的算法对前面两部分进行加密，得到的加密结果。
token 有防篡改的特点，如果攻击者改动了前面两个部分，就会导致和第三部分对应不上，使得 token 失效。而攻击者不知道加密秘钥，因此又无法修改第三部分的值。
所以，在秘钥不被泄露的前提下，一个验证通过的 token 是值得被信任的。

12. 说下单点登录（新东方）

参考答案：
SSO 一般都需要一个独立的认证中心（passport），子系统的登录均得通过 passport，子系统本身将不参与登录操作，当一个系统成功登录以后，passport 将会颁发一个令牌给各个子系统，子系统可以拿着令牌会获取各自的受保护资源，为了减少频繁认证，各个子系统在被 passport 授权以后，会建立一个局部会话，在一定时间内可以无需再次向 passport 发起认证。
具体流程是：
用户访问系统 1 的受保护资源，系统 1 发现用户未登录，跳转至 sso 认证中心，并将自己的地址作为参数
sso 认证中心发现用户未登录，将用户引导至登录页面
用户输入用户名密码提交登录申请
sso 认证中心校验用户信息，创建用户与 sso 认证中心之间的会话，称为全局会话，同时创建授权令牌
sso 认证中心带着令牌跳转会最初的请求地址（系统 1）
系统 1 拿到令牌，去 sso 认证中心校验令牌是否有效
sso 认证中心校验令牌，返回有效，注册系统 1
系统 1 使用该令牌创建与用户的会话，称为局部会话，返回受保护资源
用户访问系统 2 的受保护资源
系统 2 发现用户未登录，跳转至 sso 认证中心，并将自己的地址作为参数
sso 认证中心发现用户已登录，跳转回系统 2 的地址，并附上令牌
系统 2 拿到令牌，去 sso 认证中心校验令牌是否有效
sso 认证中心校验令牌，返回有效，注册系统 2
系统 2 使用该令牌创建与用户的局部会话，返回受保护资源

13. http1.1 是如何复用 tcp 连接的？（网易）

参考答案：
客户端请求服务器时，通过请求行告诉服务器使用的协议是 http1.1，同时在请求头中附带connection:keep-alive（为保持兼容），告诉服务器这是一个长连接，后续请求可以重复使用这一次的 TCP 连接。
这样做的好处是减少了三次握手和四次挥手的次数，一定程度上提升了网络利用率。但由于 http1.1 不支持多路复用，响应顺序必须按照请求顺序抵达客户端，不能真正实现并行传输，因此在 http2.0 出现之前，实际项目中往往把静态资源，比如图片，分发到不同域名下的资源服务器，以便实现真正的并行传输。

14. 文件上传如何做断点续传（网易）

参考答案：
客户端将文件的二进制内容进行分片，每片数据按顺序进行序号标识，上传每片数据时同时附带其序号。服务器接收到每片数据时，将其保存成一个临时文件，并记录每个文件的 hash 和序号。
若上传中止，将来再次上传时，可以向服务器索要已上传的分片序号，客户端仅需上传剩余分片即可。
当全部分片上传完成后，服务器按照分片的顺序组装成完整的文件，并删除分片文件。

15. 介绍 SSL 和 TLS（寺库）

参考答案：
它们都是用于保证传输安全的协议，介于传输层和应用层之间，TLS 是 SSL 的升级版。
它们的基本流程一致：
客户端向服务器端索要公钥，并使用数字证书验证公钥。
客户端使用公钥加密会话密钥，服务端用私钥解密会话密钥，于是得到一个双方都认可的会话密钥
传输的数据使用会话密钥加密，然后再传输，接收消息方使用会话密钥解密得到原始数据

16. 说说网络的五层模型（寺库）

参考答案：
从上到下分别为：应用层、传输层、网络层、数据链路层、物理层。在发送消息时，消息从上到下进行打包，每一层会在上一层基础上加包，而接受消息时，从下到上进行解包，最终得到原始信息。
其中：
应用层主要面向互联网中的应用场景，比如网页、邮件、文件中心等等，它的代表协议有 http、smtp、pop3、ftp、DNS 等等
传输层主要面向传输过程，比如 TCP 协议是为了保证可靠的传输，而 UDP 协议则是一种无连接的广播，它们提供了不同的传输方式
网络层主要解决如何定位目标的问题，比如 IP、ICMP、ARP 等等
数据链路层的作用是将数据可靠的传输到目标，比如常见的以太网协议、P2P 协议
物理层是要规范网络两端使用的物理设备，比如蓝牙、wifi、光纤、网线接头等等

17. GET 和 POST 的区别（流利说）

参考答案：
从 http 协议的角度来说，GET 和 POST 它们都只是请求行中的第一个单词，除了语义不同，其实没有本质的区别。
之所以在实际开发中会产生各种区别，主要是因为浏览器的默认行为造成的。
受浏览器的影响，在实际开发中，GET 和 POST 有以下区别：

浏览器在发送 GET 请求时，不会附带请求体
GET 请求的传递信息量有限，适合传递少量数据；POST 请求的传递信息量是没有限制的，适合传输大量数据。
GET 请求只能传递 ASCII 数据，遇到非 ASCII 数据需要进行编码；POST 请求没有限制
大部分 GET 请求传递的数据都附带在 path 参数中，能够通过分享地址完整的重现页面，但同时也暴露了数据，若有敏感数据传递，不应该使用 GET 请求，至少不应该放到 path 中
刷新页面时，若当前的页面是通过 POST 请求得到的，则浏览器会提示用户是否重新提交。若是 GET 请求得到的页面则没有提示。
GET 请求的地址可以被保存为浏览器书签，POST 不可以

18. http 劫持是什么？

参考答案：
是指攻击者在客户端和服务器之间同时建立了连接通道，通过某种方式，让客户端请求发送到自己的服务器，然后自己就拥有了控制响应内容的能力，从而给客户端展示错误的信息。

19. HTTP 劫持、DNS 劫持与 XSS

参考答案：
http 劫持是指攻击者在客户端和服务器之间同时建立了连接通道，通过某种方式，让客户端请求发送到自己的服务器，然后自己就拥有了控制响应内容的能力，从而给客户端展示错误的信息，比如在页面中加入一些广告内容。
DNS 劫持是指攻击者劫持了 DNS 服务器，获得了修改 DNS 解析记录的权限，从而导致客户端请求的域名被解析到了错误的 IP 地址，攻击者通过这种方式窃取用户资料或破坏原有正常服务。
XSS 是指跨站脚本攻击。攻击者利用站点的漏洞，在表单提交时，在表单内容中加入一些恶意脚本，当其他正常用户浏览页面，而页面中刚好出现攻击者的恶意脚本时，脚本被执行，从而使得页面遭到破坏，或者用户信息被窃取。
要防范 XSS 攻击，需要在服务器端过滤脚本代码，将一些危险的元素和属性去掉或对元素进行HTML实体编码。

20. 介绍 xss csrf 攻击

参考答案：
XSS：
XSS 是指跨站脚本攻击。攻击者利用站点的漏洞，在表单提交时，在表单内容中加入一些恶意脚本，当其他正常用户浏览页面，而页面中刚好出现攻击者的恶意脚本时，脚本被执行，从而使得页面遭到破坏，或者用户信息被窃取。
要防范 XSS 攻击，需要在服务器端过滤脚本代码，将一些危险的元素和属性去掉或对元素进行HTML实体编码。
CSRF：
CSRF 是跨站请求伪造，是一种挟制用户在当前已登录的Web应用上执行非本意的操作的攻击方法
它首先引导用户访问一个危险网站，当用户访问网站后，网站会发送请求到被攻击的站点，这次请求会携带用户的cookie发送，因此就利用了用户的身份信息完成攻击。
防御 CSRF 攻击有多种手段：
不使用cookie
为表单添加校验的 token 校验
cookie中使用sameSite字段
服务器检查 referer 字段

大厂面试题分享 面试题库

前端后端面试题库 （面试必备） 推荐：★★★★★

地址：前端面试题库