笔记：浏览器——网络通信
计算机网络基础
①7层OSI 参考模型：应用层，表示层，会话层，传输层，网络层，数据链路层，物理层。
UDP
①UDP属于传输层。
②UDP是不可靠传输协议，确保发送消息的大小，却不能保证消息一定会到达，允许丢包，会根据需要重发数据。
③UDP面向报文，支持一对一、一对多、多对一和多对多的交互通信。
④UDP的首部包含源端口、目的端口、首部+报文数据长度和检验和。由于存在报文长度，没有粘包和拆包问题。
TCP / IP
①IP协议负责传输数据。IP属于网络层。TCP属于传输层。
②TCP可靠传输协议，其中包括分块传送、数据校验、确认应答、超时重传、乱序排序、滑动窗口、流量缓冲等传输机制。
③TCP面向字节流，只支持一对一的交互通信，提供全双工通信。
④TCP的首部包含源端口、目的端口、序号位、确认序号位、首部数据长度、窗口大小、校验和、紧急指针和选项。由于不存在报文长度，会出现粘包和拆包的现象。
⑤TCP处理网络拥堵，使用慢启动，拥塞避免，快重传，快恢复4个机制。
三次握手
①第一次握手：客户端向服务端发送建立连接的请求报文(SYN+随机数x)，服务端收到确认能收到客户端的信息。
②第二次握手：服务端向客户端发送请求报文(ACK+SYN+随机数y+x+1)，客户端收到服务器响应报文，能确认收到服务端的信息，但是服务端并不知道。
③第三次握手：客户端发送请求报文(ACK+x+1+y+1)，告诉服务端能收到服务端的信息。
四次挥手
①第一次挥手：客户端主动断开连接，向服务端发送报文(FIN+随机数u)。
②第二次挥手：服务端收到客户端的报文，返回响应请求(ACK+随机数v+u+1)。
③第三次挥手：等待一段时间，当服务端将剩余数据发送完后，再向客户端发送一个报文(FIN+ACK+随机数w+u+1)。
④第四次挥手：客户端收到报文后，返回响应(ACK+v+1+u+1)，并过一段时间自动关闭，服务端收到响应后立刻关闭。
DNS
①DNS服务提供域名到IP地址的解析服务。
②浏览器进行域名解析时，依次查询浏览器DNS缓存，本地Host文件，操作系统缓存。
③如果以上缓存都没有，浏览器便会发起一个DNS的系统调用，向DNS服务器发起UDP解析请求。
④依次查询路由器缓存，ISP的DNS服务器缓存（注意DNS劫持），再发起递归请求，从顶级域名逐层查询获取主机IP地址。
HTTP
①HTTP是基于TCP/IP协议上的协议，属于应用层。
HTTP 1.1
①HTTP/1.1支持并默认使用长链接，允许客户端不用等待上一次请求结果返回，就可以发出下一次请求。
②HTTP/1.1的请求头应存在Host字段，支持处理一台物理服务器上多个虚拟主机的情况。
③新修改请求类型、请求头字段与状态码，在缓存、网络方面有优化。
④存在队头阻塞现象，即最开始的请求延迟返回，则后续发送的请求都被阻塞接受。
⑤页面中可以存在多个HTTP长链接，但是有最大限制。
请求类型(方法)
①GET请求参数只能放在URL中，POST请求参数可以放在URL或请求体中。
| 请求类型 | 说明 | 请求类型 | 说明 |
|---|---|---|---|
| GET | 获取资源 | POST | 传输信息内容 |
| PUT | 传输文件 | HEAD | 获得报文首部的请求行和请求头 |
| DELETE | 删除文件 | OPTION | 询问支持的方法(HTTP/1.1新增) |
| TRACE | 追踪路径(HTTP/1.1新增) | CONNECT | 要求用隧道协议连接代理(HTTP/1.1新增) |
HTTP状态码
| 类别 | 原因短语 | |
|---|---|---|
| 1xx | Informational（信息性状态码） | 接受的请求正在处理 |
| 2xx | Success（成功状态码） | 请求正常处理完毕 |
| 3xx | Redirection（重定向） | 需要进行附加操作以完成请求 |
| 4xx | Client error（客户端错误） | 客户端请求出错，服务器无法处理请求 |
| 5xx | Server Error（服务器错误） | 服务器处理请求出错 |
200： 请求被服务器正常处理。
204： 请求被服务器正常处理，但没有返回任何内容。
206： 部分请求被服务器正常处理，响应报文中含Content-Range响应头。
301： 永久性重定向，之后应使用更改的URL，新的URL位于响应报文的Location首部。
302： 临时性重定向，希望本次访问使用新的URL，新的URL位于响应报文的Location首部。
303： 临时性重定向，强制使用GET方法请求新的URL。
304： 请求的资源未修改，可以直接使用缓存的文件。
307： 临时重定向，后续的请求应仍使用原始的URL，不允许更改请求方法。
400： 请求报文中存在语法错误，服务器无法理解。
401： 请求要求身份验证，需要通过HTTP认证。
403： 服务器拒绝该次访问（访问权限出现问题），可能是由跨域、请求头配置引起。
404： 服务器上无法找到请求的资源。
500： 服务器遇到了不知道如何处理的情况。
503： 服务器暂时处于超负载或正在进行停机维护，无法处理请求。
HTTP常用头
通用头
①Conntection字段
keep-alive控制TCP持久长连接，多次HTTP请求可以复用该连接。close控制TCP短连接，即一次HTTP请求后断开TCP连接。
| 字段名 | 说明 |
|---|---|
| Cache-Control | 控制缓存行为 |
| Conntection | 逐跳首部、连接的管理 |
| Date | 创建报文的日期时间 |
请求头
| 字段名 | 说明 | 字段名 | 说明 |
|---|---|---|---|
| Accept | 用户代理可处理的媒体类型 | Expect | 期待服务器的特定行为 |
| Accept-Charset | 优先的字符集 | Host | 请求资源所在服务器 |
| Accept-Encoding | 优先的内容编码 | Range | 实体的字节请求范围 |
| Accept-Language | 优先的语言 | Refer | 对请求中URI的原始获取方 |
| User-Agent | HTTP客户端程序的信息 |
响应头
| 字段名 | 说明 | 字段名 | 说明 |
|---|---|---|---|
| Accept-Ranges | 是否接受字节范围请求 | Retry-After | 对再次发起请求的时机要求 |
| Age | 推算资源创建经过时间 | Vary | 代理服务器缓存的管理信息 |
| Location | 令客户端重定向至指定URI | WWW-Authenticate | 服务器对客户端的认证信息 |
实体头
| 字段名 | 说明 | 字段名 | 说明 |
|---|---|---|---|
| Allow | 资源可支持的HTTP方法 | Content-MD5 | 实体主体的报文摘要 |
| Content-Encoding | 实体主体适用的编码方式 | Content-Range | 实体主体的位置范围 |
| Content-Language | 实体主体的自然语言 | Content-Type | 实体主体的媒体类型 |
| Content-Length | 实体主体的字节大小 | Expires | 实体主体的过期日期 |
| Content-Location | 代替对应资源的URI |
其他头
| 字段名 | 说明 | 字段名 | 说明 |
|---|---|---|---|
| X-Frame-Options | 控制网站内容在其他Web网站的Frame标签内的显示问题 | DNT | 拒绝个人信息被收集 |
| X-XSS-Protection | 控制浏览器XSS防护机制的开关 | P3P | 利用P3P保护用户隐私 |
Cookie头
Cookie是客户端向服务器发送请求时携带的请求头中的字段。
Set-Cookie是服务器返回客户端的响应头中的字段。
| Set-Cookie 属性 | 说明 | Set-Cookie 属性 | 说明 |
|---|---|---|---|
| name | Cookie的名称与值，是必需项 | domain | Cookie所属的域名，默认为当前域名 |
| expires | Cookie的有效期 | Secure | 仅在HTTPS安全通信时才会发送Cookie |
| path | 指定Cookie在哪个路径（路由）下生效，默认是/ | HttpOnly | 控制Cookie是否能被JavaScript脚本访问 |
| SameSite | 设置第三方Cookie，有Strict，Lax，None三种值 | maxAge | Cookie失效时间，单位秒，默认为-1。 1. 如果为整数，则在指定秒后失效。 2. 如果为负数，则为临时Cookie，关闭浏览器即失效，浏览器不会储存Cookie 。 3. 如果为0，则删除该Cookie。 |
HTTPS
①HTTPS协议需要到CA申请证书，一般免费证书较少，因而需要一定费用。
②HTTP是无状态的超文本传输协议，信息是明文传输，HTTPS则是具有安全性的SSL/TSL加密传输协议，防止劫持。
③HTTP和HTTPS使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。
SSL/TSL建立加密连接
①SSL/TSL非对称加密保证了安全性，即服务端用公钥加密，用私钥解密。
②客户端发送HTTP请求至服务端，服务端将证书与公钥发送给客户端。
③客户端验证证书有效，并用公钥加密一个客户端随机生成的会话秘钥，发送给服务端。
④服务端验证客户端有效，使用私钥解密得到会话秘钥，此时会话秘钥是两者加密的唯一秘钥。
HTTP 2.0
①HTTP/2.0主要基于SPDY协议。
②二进制分帧： 不再以文本格式传输，以二进制格式传输数据，且切分成更小的头部帧和数据帧，用唯一标识组装乱序的数据流
③头部压缩： 客户端与服务端维护了哈希表，记录出现过的头部属性。
④多路复用： 页面只需要开启1个HTTP链接，不存在队头阻塞现象。
⑤请求优先级： 浏览器将请求类型做优先级区分，使服务端优先返回HTML、CSS、JS等文件，后返回图片、字体等其他资源。
⑥服务器推送： 允许服务端向客户端发送数据。
HTTP 3.0
Cookie
①客户端第一次发送请求到服务器端，服务器端创建包含用户的信息Cookie，然后将该Cookie发送到客户端，浏览器自动存储Cookie。
②客户端再次访问服务器端时，浏览器会在请求中自动携带Cookie。服务器端通过请求中的Cookie区分不同的用户。
③Cookie绑定单一域名，其中一级域名和二级域名之间允许共享，由domain属性设置。
④Cookie默认为临时型，关闭会话则删除Cookie，储存于内存。设置了过期时间的Cookie为持久型，关闭浏览器依然储存，储存于磁盘。
⑤Cookie只能存字符串类型，有存储限制（4K）。
Session
①客户端第一次发送请求到服务器端，服务器端创建一个的Session，同时向客户端发送一个临时Cookie。【Set-Cookie：JSESSIONID=SessionId】
②客户端再次访问服务器端时，会携带该Cookie。服务器端根据Cookie中的JSESSIONID去查询Session，从而区分不同用户。
③如果禁用了Cookie，SessionId可以通过URL传参或POST请求传惨的方式将数据交给服务器端。
④当Cookie中SessionId过期或不存在，或会话关闭，则重复操作①。
⑤Session能存储任意类型，无存储限制，但不能持久储存。Session安全性比Cookie好，但会影响服务器性能。
⑥负载均衡时，可以通过Nginx代理、Session复制、中间件共享Session的方式解决。
Token
①客户端第一次发送请求到服务器端，服务器端验证并生成一个Token返回给客户端。
②客户端持久化储存Token于Cookie或Web Storage中，再次访问服务器端时，一般将Token携带于请求头Authorization字段中Bearer <Token>或POST请求体中。
③服务器端对收到的Token进行查表验证，即可获取用户状态信息。
④Token支持多端和跨域，使服务器端无状态化，可以在分布式服务器上使用，尺寸小，传输速度快。
JWT
①JSON Web Token (JWT) 是目前最流行的跨域认证解决方案。
②JWT是一个字符串，它由Header.Payload.Signature三部分经过Base64编码组成，所以可以通过反编码获得三部分的JSON对象。
③Header部分是一个包含加密签名算法alg、token类型typ的JSON对象。
④Payload部分是一个包含官方字段与私有字段的JSON对象，可以自由写入一些数据。
⑤Signature部分是对前两部分的签名加密，签名密钥由服务器端私有。
⑥服务器端收到JWT用私钥进行解密，即可获取用户状态信息。
⑦JWT应该使用HTTPS传输，可扩展性好，防CSRF攻击，安全性高，将更多的数据交给客户端储存。
跨域
同源策略
客户端向服务端发送请求，两者的协议、域名、端口号必须一致，否则属于跨域。
解决办法
- JSONP
①JSONP只支持GET请求，且不安全。
②HTML中一些标签自带跨域能力，例如：<img>、<link>、<iframe>、<script>。JSONP利用这些标签实现跨域请求。
③通过<script>标签src属性，发送带有callback参数的GET请求。
④服务端将接口返回数据拼凑到callback函数中，返回给浏览器并立即执行，就能拿到callback函数返回的数据。 - CORS
①跨域资源共享CORS是一种机制，它使用额外的HTTP头来告诉浏览器，让运行在一个Web应用被准许访问来自不同源服务器上的指定的资源。
②服务端需要设置Access-Control-Allow-Origin字段。
③前端的请求头中需要设置Origin，Access-Control-Request-Method和Access-Control-Request-Headers字段。 - Nginx反向代理
- NodeJs中间代理
- document.domain + iframe
①该方法仅限主域相同，子域不同的跨域应用场景。
②两个页面都通过JS强制设置document.domain为基础主域，就实现了同域。 - location.hash + iframe
- window.name + iframe
- postMessage
①该方法可以解决页面和其打开的新窗口，多窗口之间和**页面与嵌套的<iframe>**的跨域数据通信。 - WebSocket
跨域传Cookie
①服务器端需要支持跨域请求，Access-Control-Allow-Origin值为指定单一域名，不能为通配符*。
②服务器端要支持接收Cookie，Access-Control-Allow-Credentials为true。
③前端发送AJAX时声明传递Cookie，withCredentials为true。
AJAX
①open()初始化设置请求方法和URL。在IE浏览器中，URL带时间戳参数用以取消请求缓存。
②send()设置请求头，发送请求。POST方法在这个步骤可以向send()传入参数。
③onreadystatechange()绑定回调函数，处理响应结果。其中的readystate标识有5种状态，0表示初始化，1表示open()被调用，2表示send()被调用，3表示服务器返回部分数据，4表示服务器返回所有数据。每一次的readystate都会调用一次回调函数。
④当请求成功被响应，可以读取响应报文所有内容。当后端服务器返回固定的JSON格式数据，可以设置xhr.responseType自动解析，否则需要用JSON.parse()手动解析。
⑤xhr.timeout设置请求超时阈值，超时则取消请求，并且可以通过xhr.ontimeout()执行超时回调，通过xhr.onerror()执行网络异常回调。
⑥xhr.abort()取消正在发送的请求。可以实现重复发送请求时，取消之前的请求。
let xhr = new XMLHttpRequest();
xhr.timeout = 2000; // ms
xhr.ontimeout(function() {});
xhr.onerror(function() {});
xhr.responseType = "json";
xhr.open('GET', 'http://127.0.0.1:8000/api');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
xhr.send();
xhr.onreadystatechange = function() {
// 当服务器返回所有结果
if (xhr.readyState === 4) {
// 当响应状态码为200~300
if (xhr.stateus >= 200 && xhr.status < 300) {
console.log(xhr.status); // 获取响应行状态码
console.log(xhr.statusText); // 获取响应行字符解释
console.log(xhr.getAllResponseHeaders()); // 获取所有响应头
console.log(xhr.response); // 获取响应体
} else {
// 响应状态码不正常
}
}
};
xhr.abort();
fetch
WebSocket
①WebSocket协议是HTML5一种新的协议，它实现了浏览器与服务器全双工通信，同时允许跨域通讯。
359
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
