前端面试-http协议

什么是http协议

Web使用一种名为HTTP（HyperText Transfer Protocol，超文本传输协议）的协议作为规范，完成从客户端到服务器等一系列运作流程。而协议是指规则的约定。可以说，Web是建立在HTTP协议上通信的。

现在是http3.0

TCP/IP 协议族

http是它们的一个子集。按层次分别分为以下四层：

应用层（http、DNS）
传输层（数据传输，tcp的三次握手和四次挥手）
网络层（选择传输路线，IP协议）
数据链路层（处理硬件部分）

IP协议

作用是把各种数据包传送给对方（根据IP地址、MAC地址）

TCP协议

为了更容易传送大数据，把数据分割成以报文段为单位的数据包进行管理，能够确认数据是否到达对方（发起三次握手）

什么是https，和http有什么区别

HTTPS基于HTTP协议，通过SSL或TLS提供加密处理数据、验证对方身份以及数据完整性保护&

- 内容加密：采用混合加密技术，中间者无法直接查看明文内容
- 验证身份：通过证书认证客户端访问的是自己的服务器
- 保护数据完整性：防止传输的内容被中间人冒充或者篡改  
复制代码

区别：

http使用明文通信，https会对内容进行加密
http不验证通信方的身份，https会通过认证来验证
http无法证明报文的完整性，有可能已经被篡改，https保护数据完整性：防止传输的内容被中间人冒充或者篡

TCP的三次握手

一个由客户端发出的请求,会经过 http协议包装一层，TCP协议包装一层，IP协议包装一层，以太网再包装一层，和发快递是一样的，这个过程称为封装，包装好之后就上路了（通过物理层传输），到达服务器就开始拆开这个快递，从外到内。这个过程任何人无法绝对掌握数据是否可靠，所以要通过TCP三次握手

1、发送端发送一个带SYN（synchronize）标志的数据包给对方

2、接收端收到后，回传一个带有SYN/ACK（acknowledgement）标志的数据包已示传达确认信息

3、发送端再回传一个带ACK标志的数据包，代表握手结束

若在握手过程中某个阶段莫名中断，TCP协议会再次以相同的顺序发送相同的数据包

TCP的四次挥手

客户端或服务器均可主动发起挥手动作。

（1）客户端A发送一个FIN，用来关闭客户A到服务器B的数据传送。

（2）服务器B收到这个FIN，它发回一个ACK

（3）服务器B关闭与客户端A的连接，发送一个FIN给客户端A。

（4）客户端A发回ACK报文确认。

HTTP2.0和HTTP1.X相比的新特性

状态码

表示客户端HTTP请求的返回结果、标识服务器处理是否正常、表明请求出现的错误等。

1XX 接收的请求正在处理
2XX 成功（这系列表明请求被正常处理了）
- 200 OK，表示从客户端发来的请求在服务器端被正确处理
- 204 表示请求成功，服务器没有资源返回（响应报文不含实体的主体部分）
- 206 客户端进行范围请求，请求成功
3XX 重定向（表明浏览器要执行特殊处理） -301 moved permanently，永久性重定向，表示资源已被分配了新的 URL
- 302 found，临时性重定向，表示资源临时被分配了新的 URL
- 303 see other，表示资源存在着另一个 URL，应使用 GET 方法获取资源（对于301/302/303响应，几乎所有浏览器都会删除报文主体并自动用GET重新请求）
- 304 not modified，服务端资源没改变，返回客户端缓存文件。
- 307 临时重定向，和302含义类似，但是期望客户端保持请求方法不变向新的地址发出请求
4XX 客户端错误，表明客户端是发生错误的原因所在
- 400 请求报文存在语法错误
- 401 unauthorized，（未授权）请求要求身份验证。对于需要登录的网页，服务器可能返回此响应。
- 403 forbidden，服务器拒绝请求。
- 404 not found，表示在服务器上没有找到请求的资源
5XX 服务器错误
- 500 表示服务器端在执行请求时发生了错误
- 501 表示服务器不支持当前请求所需要的某个功能
- 503 表明服务器暂时处于超负载或正在停机维护，无法处理请求

什么是DNS

位于应用层的协议，提供域名到IP地址之间的解析服务

跨域问题

协议、域名、端口任意一个不同，会产生问题是因为浏览器的同源策略限制

cors 跨域资源共享机制，ie10以上可用，有简单请求和预检请求两种。
- 简单请求，
  - 请求方法是get、post、head（HEAD就是只发送请求不会收到响应的一种请求方式），
  - 请求header只有几个Accept、Accept-Language、Content-Language、Content-Type。
  - Content-Type标头允许的值只能是： application/x-www-form-urlencoded、 multipart/form-data、 text/plain
  后端适配方案: 在respones header中添加Access-Control-Allow-Origin
- 预检请求，会在普通跨域请求前添加了个options请求，用来检查前端headers的修改是否在后端允许范围内首先methods设置 PUT、DELETE、CONNECT、OPTIONS、TRACE会导致预检请求设置了Accept、Accept-Language、Content-Language、Content-Type 之外的headers中任一的配置，比如常见的token:authorization,缓存机制cache-contorl Content-Type设置了简单请求不允许的值，如常用的application/json

预检请求就需要后端设置更多的respones headers

- Access-Control-Allow-Methods代表可接受methods
- Access-Control-Allow-Headers代表可接受的headers修改
- Access-Control-Max-Age代表预检的残留时间，代表预检之后可以免预检的时间
复制代码

juejin.im/post/5c35f6…

jsonp(JSON with padding) 把请求链接放在script里

function jsonp(setting){
  setting.data = setting.data || {}
  setting.key = setting.key||'callback'
  setting.callback = setting.callback||function(){} 
  setting.data[setting.key] = '__onGetData__'

  window.__onGetData__ = function(data){
    setting.callback (data);
  }

  var script = document.createElement('script')
  var query = []
  for(var key in setting.data){
    query.push( key + '='+ encodeURIComponent(setting.data[key]) )
  }
  script.src = setting.url + '?' + query.join('&')
  document.head.appendChild(script)
  document.head.removeChild(script)

}

jsonp({
  url: 'http://api.jirengu.com/weather.php',
  callback: function(ret){
    console.log(ret)
  }
})
jsonp({
  url: 'http://photo.sina.cn/aj/index',
  key: 'jsoncallback',
  data: {
    page: 1,
    cate: 'recommend'
  },
  callback: function(ret){
    console.log(ret)
  }
})
复制代码

缺点：只能get请求，需要后端配合，出错无法查找原因

websocket

用于服务器和客户端的全双工通信，服务器和客户端发起一次连接后，就会一直保持连接的状态

服务器无需等待客户端发起请求，就可以向客户端发送数据
websoket的首部信息量很少，可减少通信量

http的Upgrade字段：websocket，告知服务器通信协议发生改变

URI、URL、URN

HTTP协议使用 URI 定位互联网上的资源。概念：

URI(Universal Resource Identifier：统一资源标识符) URL(Universal Resource Locator：统一资源定位符) URN(Universal Resource Name：统一资源名称)。

URI是由某个协议方案（http、ftp）表示的/资源的/定位标识符（/用来断句，方便理解）。URI用字符串标识某一互联网资源，而URL标示资源的地址（互联网上所处的位置）。URL是URI的子集

WEB安全防范

xxs攻击

跨站脚本攻，利用script标签，将脚本注入到网页的一种手段

CSRF 攻击

假如掘金有个加关注的GET接口，id参数是关注人Id，如下：

https://juejin.im?id=5cd0438c6fb9a031ec6d3ab2

那我只需要在我的一个页面里面写一个img标签：

<img src="https://juejin.im?id=5cd0438c6fb9a031ec6d3ab2" />

CSRF攻击是源于Web的隐式身份验证机制！Web的身份验证机制虽然可以保证一个请求是来自于某个用户的浏览器，但却无法保证该请求是用户批准发送的。CSRF攻击的问题一般是由服务端解决，防范 CSRF 攻击可以遵循以下几种规则：

Get 请求不用于对数据进行修改
Cookie设置HTTP Only
接口设置禁止跨域
请求时附带验证信息，比如验证码或者 Token

点击劫持

攻击者将需要攻击的网站通过 iframe 嵌入自己的网页中，并将 iframe 设置为透明，然后诱使用户在该页面上进行操作，此时用户将在不知情的情况下点击透明的iframe页面

防御方法：使用一个HTTP响应头——X-Frame-Options。X-Frame-Options可以说是为了解决点击劫持而生的，它有三个可选的值：

DENY：浏览器会拒绝当前页面加载任何frame页面；
SAMEORIGIN：frame页面的地址只能为同源域名下的页面；
ALLOW-FROM origin：允许frame加载的页面地址；

中间人攻击

攻击方同时与服务端和客户端建立起了连接，并让对方认为连接是安全的，但是实际上整个通信过程都被攻击者控制了。攻击者不仅能获得双方的通信信息，还能修改通信信息。中间人攻击的本质是客户端和服务端之间的认证和信任问题。

HTTPS作为防止中间人攻击的终极手段，引入证书机制解决了客户端和服务端的信任问题，从而较为有效的防止了中间人攻击。

HTTP2.0和HTTP1.X相比的新特性

新的二进制格式： HTTP/1.x的解析是基于文本的。基于文本协议的解析存在天然缺陷，文本的表现形式有多样性，要做到全面性考虑的场景必然很多。二进制则不同，只识别0和1的组合。基于这种考虑HTTP/2.0的协议解析采用二进制格式，方便且强大。
多路复用： HTTP/2.0支持多路复用，这是HTTP/1.1持久连接的升级版。多路复用，就是在一个 TCP 连接中可以存在多条流，也就是可以发送多个请求/响应。多路复用允许并发的发起多个请求，每个请求及该请求的响应不需要等待其他的请求或响应，避免了线头阻塞问题。这样某个请求任务耗时严重，不会影响到其它连接的正常执行,极大的提高传输性能。
头部压缩： HTTP/1.x的请求和响应头部带有大量信息，而且每次请求都要重复发送，HTTP/2.0使用encoder来减少需要传输的头部大小，通讯双方各自cache一份头部 fields表，既避免了重复头部的传输，又减小了需要传输的大小。
服务端推送：服务端推送就是把客户端所需要的css/js/img资源伴随着index.html一起发送到客户端，省去了客户端重复请求的步骤（从缓存中取）。

HTTP/3.0

避免包阻塞：多个数据在TCP连接上传输时，若一个数据包出现问题，TCP需要等待该包重传后，才能继续传输其它数据包。但在QUIC中，因为其基于UDP协议，UDP数据包在出问题需要重传时，并不会对其他数据包传输产生影响。
快速重启会话：普通基于tcp的连接，是基于两端的ip和端口和协议来建立的。在网络切换场景，例如手机端切换了无线网，使用4G网络，会改变本身的ip，这就导致tcp连接必须重新创建。而QUIC协议使用特有的UUID来标记每一次连接，在网络环境发生变化的时候，只要UUID不变，就能不需要握手，继续传输数据。

HTTP报文

用于HTTP协议交互的信息被称为HTTP报文。客户端的HTTP报文叫请求报文，服务端的HTTP报文叫响应报文。

请求报文是由请求行（请求方法、协议版本）、请求首部（请求URI、客户端信息等）和内容实体（用户信息和资源信息等，可为空）构成。

响应报文是由状态行（协议版本、状态码）、响应首部（服务器名称、资源标识等）和内容实体（服务端返回的资源信息）构成。

请求方法

GET：get方法一般用于获取服务器资源
POST：post方法一般用于传输实体主体
PUT：put方法一般用于传输文件
DELETE：delete方法用于删除文件
HEAD：head方法用于获取报文首部，不返回报文主体
OPTIONS：options方法用于询问请求URI资源支持的方法

首部字段

Cache-Control

控制缓存的行为：no-cache（强制向服务器再次验证）、no-store（不做任何缓存）、max-age=111111（资源可缓存最大时间秒）、public（客户端、代理服务器都可利用缓存）、private（代理服务器不可用缓存）

能正确接收的媒体类型：application/json text/plain

If-Match 与etag值一致时，服务器会处理请求
If-Modified-Since 本地资源未修改返回 304（比较时间）
If-None-Match If-None-Match与etag值不一致时，处理请求
Set-Cookie 需要存在客户端的信息，一般用于识别用户身份
Expires 内容的过期时间，本地可修改
Last_modified 内容的最后修改时间
ETag 资源标识，由服务器分配，资源发生变化时标识也会发生改变
Content-Type 告诉浏览器用什么方式解析返回的结果

hhtp缓存

强缓存和协商缓存，根据响应的header内容来决定的

强缓存：

不会发起请求。

cache-control(缓存控制): max-age=number(单位是秒)，它规定了一个到期时间，http1.1规范。

expires(到期时间)，它的值是个时间的GMT格式的时间字符串，老规范。

协商缓存：

会发起一次请求。

这两组搭档都是成对出现的，即第一次请求的响应头带上某个字段（Last-Modified或者Etag），则后续请求则会带上对应的请求字段（If-Modified-Since或者If-None-Match），若响应头没有Last-Modified或者Etag字段，则请求头也不会有对应的字段。

etag，它会把一个资源打上一个 “二维码”

客户端发送值为ETag的If-None-Match header字段：

If-None-Match: "33a64df551425fcc55e4d42a148795d9f25f89d4"

服务器将客户端的ETag（作为If-None-Match字段的值一起发送）与其当前版本的资源的ETag进行比较，如果两个值匹配（即资源未更改），服务器将返回不带任何内容的304未修改状态，告诉客户端缓存版本可用（新鲜）。

Last-Modified 是一个响应首部，其中包含源头服务器认定的资源做出修改的日期及时间。它通常被用作一个验证器来判断接收到的或者存储的资源是否彼此一致.和请求头If-Modified-Since（如果有的话）对比，没变返回304

当与 If-Modified-Since 一同使用的时候，If-None-Match 优先级更高（假如服务器支持的话）

强缓存如何清除呢？

这个简单，只需要在URI后边加上query字段即可，也就是我们所谓的版本号。

手写ajax请求

function callBack () {
  console.log(this.responseText)
}

let xhr = new XMLHttpRequest()
xhr.onload = callBack
xhr.open(method, url, true)
xhr.send()
复制代码

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

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

参考：juejin.im/post/5cd043… github.com/Advanced-Fr…

转载于:https://juejin.im/post/5cee3229e51d455a68490af3