计算机网络知识点篇

计算机网络

HTTP缓存机制

缓存的优点

• 减少冗余的数据传输
• 节约网络费用，缓解网络瓶颈问题
• 降低距离时延
• 降低对原始服务器的要求，服务器可以更快响应，避免出现过载

浏览器加载页面流程如下

1. 浏览器根据资源的请求的·http头信息判断是否命中强缓存，若命中且缓存未过期，则不向服务器发送请求，直接从缓存中获取资源，并且看到的返回状态码为200
2. 若没有命中，则浏览器会将资源加载请求发送到服务器，根据请求携带的参数，判断缓存是否失效，如果失效则不会返回资源信息，浏览器继续从缓存加载资源
3. 若未命中协商缓存，则服务器将资源完整返回，并且更新缓存

强缓存: 如果请求的数据命中强制缓存，则浏览器直接从本地缓存中获取数据，不与服务器进行交互，并且响应状态码直接为200

相关联的缓存字段是：Cache-Control来表示资源缓存的时间包括缓存对象的权限，可取的参数max-age,以及 public / private / no-cache / no-store 这些参数设置访问权限

协商缓存： 当没有命中强缓存的时候，则浏览器会将请求发送到服务器。服务器根据请求头中的参数If-Modify-Since的值 比较 资源实际修改的时间 判断是否命中缓存。若命中缓存此时返回状态码304，未命中则返回资源并且更新缓存。

或者是通过再请求头上带上If-None-Match这个含有Etag值的参数，来判断资源唯一标识符是否变化，如果变化说明资源内容发送修改，此时未命中否则未命中

参考文档

优秀文章

存储机制

cookie和session

cookie和session都是用来跟踪浏览器用户身份的会话方式。两者区别如下：

• 存储位置：cookie保存在浏览器端，session保存在服务器端
• 使用方式：
  1. cookie机制：服务器发给客户端的特殊信息，以文本形式保存在客户端。当我们设置cookie的缓存时间时，则cookie会被保存在内存当中，直到过期时间才消失；若没有设置缓存时间，则此时为会话cookie，关闭浏览器则cookie消失
  2. session机制：当服务器收到请求创建session对象，会先判断请求参数中是否存在sessionID，如果存在，则直接通过sessionId获取到session对象，执行对应操作；若不存在，则创建新的session对象，并且在本次响应中将这个sessionId返回给客户端并通过cookie的形式进行存储。
• 安全性：session安全性大于cookie
• 存储内容格式：cookie通过保存字符串类型，以文本形式存储，而session通过HashTable的数据结构保存，支持任何对象
• 存储大小：cookie不能超过4Kb,session大小无限制
• 应用场景
  1. cookie：保存用户上次浏览信息、浏览计数
  2. session：网上商城的购物车信息、保存每个用户的专用信息

webstorage

• 存储大小：存储数据都是：5MB
• 存储位置：都是在客户端，不与服务端交互
• 存储类型：只能存储字符串类型

webstorage的优点

• 存储空间相对较大，可存储5mb
• 节省网络流量，存储在本地就可直接获取，也不需要像cookie一样，每次都次请求都要传送到服务器。
• 安全性：相对于cookie来说，不会随着HTTP header发送到服务器端，不用担心截获问题，相对安全

localstorage和sessionstorage区别是前者除非被清除，否则会永久保存，后者则只在当前会话下有效，一旦关闭浏览器或者页面后被清除。

cookie和webstorage之间的区别

• 存储空间更大
• 节省网络流量，一旦数据保存到本地，就可以避免再向服务器请求数据，减少数据在浏览器和服务器间不必要来回传递
• 相对更加安全
• 自身就拥有setItem、getItem，clear等封装好api，而cookie需要开发者自己封装

参考博客

优秀文章

http响应状态码

• 301表示请求的资源被永久的分配到了新的URL
• 302表示请求的资源被分配了新的URL,但是是临时的
• 303表示需要使用get请求获取被定向
• 304表示客户端发送资源的请求，但是该请求的资源和缓存的内容没有发生变化
• 403表示服务器接收到请求，但是拒绝执行
• 401表示请求无权限，考虑是否是用户登陆身份认证信息过期
• 500 服务器有问题
• 204 请求内容响应成功，但是响应数据为空
• 502 错误网关
• 503 网关超时请求，问题可能是前端也有可能在后端

get和post的区别

答案解析：

• 参数位置：存放get的在url的query、post存放在body中
• 参数大小：get一般不超过32k,post不超过1G
• 安全性：get的安全性相对较差，因为其传递的直接暴露在地址栏中
• 缓存性：get可缓存其参数、post不能缓存其参数

网络攻击了解吗？怎么解决

1、 xss：跨站脚本攻击。xss攻击是指在网站上注入恶意客户端代码，从而在用户使用浏览器进行访问时，获得用户隐私数据的一种行为。类型分有：反射型、存储型、基于DOM。

1. 反射型：简单地把用户输入的数据“反射”给浏览器，需要引诱使用用户点击一个恶意链接或者提交一个表单，注入脚本进入被攻击者的网站
2. 存储型：把用户输入的数据存储在服务器端，当浏览器请求数据，脚本从服务器上传回并执行。
3. 基于DOM：只在客户端发生攻击。指的是客户端的恶意脚本可以修改dom，不依赖于服务端数据。

防御方案:

1. cookie设置为httpOnly属性，则无法通过js脚本获取cookie
2. 对用户输入进行校验、进行特殊字符过滤

（）

2、csrf攻击：跨站请求伪造。攻击者盗用用户身份，以用户的名义发送恶意请求（也就是利用用户保持的登陆状态发起攻击）。

1. 登录页面添加验证码进行验证
2. 请求时附带验证信息。服务器发一个随机token，请求时携带上token，服务器验证是否有效。
3. refer： http请求头有个refer字段，后端可以通过这个字段来进行拦截请求

3、sql注入：通过把SQL命令插入到web表单提交或输入域名或页面请求的查询字符串，最终达到欺骗服务器执行恶意的SQL命令。

• 前端做得可以是用户的输入进行过滤

4、中间人攻击：中间人截取客户端发送给服务器的请求，然后伪装成客户端与服务器进行通信，这样就可以截取服务端的内容发送给客户。

常用手段是：DNS/ARP欺骗（将客户的DNS请求发送到攻击者，攻击者伪造DNS响应，并将正确的IP地址换成其他IP,从而获取用户在伪造网站输入一些重要信息。

参考链接

参考文章

浏览器的同源策略和cookie的作用域

目的是： 保证用户信息安全，防止恶意的网站窃取数据。

限制范围是： 非同源情况下，cookie、localstorage、IndexDB无法读取；dom无法获取

解决方案： 使用jsonp、CORS 或者 window.loaction.name + iframe解决跨域问题

Cookie: 主要是通过浏览器保存在客户端的一些安全性要求不高的临时数据,涉及到两个重要属性Domain、Path 用来指示cookie的作用域

• domian:用来告诉浏览器当前添加cookie的域名归属，默认为当前域名
• path:告诉浏览器当前要添加cookie的域名归属

综合浏览器提交的Cookie的作用域：1、当前域名或者父域名下的cookie; 2、当前路径或者父路径下的Cookie;满足以上两个条件则会被提交成功

TCP的三次握手和四次挥手

答案解析：

tcp的三次握手的流程

• 客户端向服务器发送请求连接报文，SYN=1（说明是连接请求、或者是连接接收请求）、 seq = x（初始序号），此时客户端状态为SYN-SEND，等待确认
• 服务器接收到请求报文，确认连接后发送响应报文 ACK = 1（决定ack是否有效 为1则有效） 、SYN=1 (请求连接标志）、 ack = x+1(确认序号)、seq= y(初始序号）以确认连接请求.
• 客户端接收到确认后，检查ACK是否为1，ack是否为x+1,若确认无误，将ACK=1,ack=y+1 ,同时为tcp连接分配好资源，并将数据包发送给服务器，服务器确认无误，则成功建立连接。

提问：为何一定要三次握手，二次握手可以吗/。

因为tcp是全双工通信， 三次握手能够保证双方确认建立连接，并且双方对初始序号进行协商。如果只有两次握手，则可能会出现死循环的情况，在二次握手后，客户端并不知道服务器是否准备好，从而忽略服务端发来的任何数据分组，而服务端发送的分组没有得到响应，则重复发送，陷入循环当中.

TCP 和 UDP 的区别，以及两者的应用场景

答案解析：

TCP协议: 可靠的、面向字节流的、需要连接的传输层协议，数据包的总长是20字节，只支持点对点连接。

UDP协议: 面向报文、无需连接、尽最大可能交付的传输层协议，数据包头部只有8个字节，支持多对多、一对多、多对一协议。

options请求什么时候用

答案解析：

触发执行该操作的情况：

• 请求类型不是HEAD/GET/POST
• 请求头的数据类型Content-type : text/plain 、multipart/form-data是这些之外的内容
• 自定义了请求头

http的历史发展，以及https有了解过吗

答案解析：

• http 0.9 :支持短连接，请求只支持get请求，没有请求头描述信息
• http 1.0 ：请求类型增加post、delete、put、HEAD、增加响应状态码，引入HTTP头的概念，具备传输纯文本HTML以外的其他类型文档的能力
• http1.1
  1. 连接可以复用，节省多次打开tcp连接加载网页文档资源的时间
  2. 增加管线化技术，允许在第一个应答被完全发送之前发送第二个请求，降低通信延迟
  3. 引入了额外的缓存控制机制
  4. 增加host头，提供物理服务器处理速率，能够使得不同域名配置在同一个IP地址的服务器上
• http2.0
  1. 支持多路复用，并行请求能在同一个链接中处理，移除http1.x中顺序和阻塞的约束。
  2. 压缩请求头信息，因为请求头在一系列请求中是相似的，其移除了重复和传输重复数据成本
  3. 增加服务器主动推送功能
  4. 数据以二进制进行传输

拓展：https执行过程

1. 客户端向服务端发送https请求,连接到服务端的443端口上
2. 服务端接收请求，向客户端发送公钥，自己保留私钥，用来进行非对称加密、解密操作
3. 客户端接收到服务端的证书之后，验证其合法性，若验证成功，则生成一个随机数，也称为客户端的密钥，并且与服务端的公钥进行非对称加密，将客户端的密钥变成密文。 验证失败，则https请求失败
4. 客户端发起第二次请求，将加密后的密文发送给服务器端。
5. 服务端用自己密钥进行非对称解密，获取到客户端密钥，使用客户端密钥和将要发送的数据进行对称加密，获得密文，发送给客户端。
6. 客户端使用客户端密钥与密文进行对称解密，获取到需要的数据，则https的第二个http请求结束，整个https传输完成。

参考链接

参考链接2

对称加密和非对称加密的区别

• 对称加密：加密和加密使用的秘钥是同一个、算法公开、计算量小、加密速度快
• 非对称加密：需要一个私钥和一个密钥、安全、速度较慢

应用：

1. 常见的对称加密算法有: DES、3DES、Blowfish、IDEA、RC4、RC5、RC6 和 AES
2. 常见的非对称加密算法有: RSA、ECC（移动设备用）、Diffie-Hellman、El Gamal、DSA（数字签名用）
3. 常见的摘要算法有: MD2、MD4、MD5、HAVAL、SHA

DNS解析原理

答案解析：

• 递归方式

• 迭代方式

ajax和fetch的原理

ajax:

• 是XMLHttpRequest的一个实例
• 只有当状态为200或者是304时才会请求成功
• 格式零散，容易出现回调地狱问题

fetch:

• 基本promise实现的，也可结合async/await
• fetch默认是不带cookie
• 所有版本的IE均不支持原生fetch
• 服务端返回状态码400、 500 的时候不会reject,只有网络错误导致请求不能完成才会reject

//fetch的post请求方法中，需要自动创建formData对象并且传给body
var data = new formData()
var options = {
    method:'post',
    body:data,
    headers:{
        'Accept':'application/json'
    }
}
fetch(url,options).then(res=>{
    console.log(res)
}).catch((error)=>{
    
})

参考链接

http的简单请求和复杂请求

简单请求

• 请求方法
  1. GET
  2. POST
  3. HEAD
• 不能自定义请求头header，只有简单的这几个请求头信息
  1. Accept
  2. Accept-Language
  3. Content-Language
  4. Content-Type:text/plain、multipart/form-data （文件上传使用的数据类型）、application/x-www-form-urlencoded(最常见的post的表单提交数据类型)

复杂请求

• 不符合简单请求的就是复杂请求

在跨域执行复杂请求的时候会发送一个预请求options，用于试探服务端是否接受真正的请求，如果得到的响应状态是拒绝性质的，则会停止post、put的请求发出。

网络分层

目前通用的网络分层是5层，从下到上是：

• 物理层：该层负责比特流在节点间的传输，即物理传输，通俗理解是将计算机连接起来的物理手段。
• 数据链路层：该层控制网络层与物理层之间的通信。主要功能是实现在不可靠的物理线路上进行数据的可靠传递
• 网络层主要做得是通过综合考虑发生优先权、网络拥塞程度、服务质量以及可选路由的花费来决定从一个网络中的节点A到另一个网络中节点B的最佳路径。
• 传输层是两个主机上的应用程序提供端到端的通信。
• 应用层：接收传输层传输的数据按照事先规定好格式解析

参考文章

cookie禁止客户端获取 httponly

//在设置的响应头中设置
response.setHeader('Set-Cookie','HttpOnly;Domain = domainvalue;path = pathname; cookiename = httpOnlyTest')

axios的实现原理

1. 特点：
   1. 是一个基于promise的HTTP库，支持promise所有的API
   2. 支持请求和响应的拦截，可以转换请求数据和响应数据格式
   3. 安全性更高，客户端支持防御XSRF

参考博客