网络

[jc-wow]

1.跨域

跨域资源共享 CORS 详解

• 跨域指绕过浏览器的同源策略。
• 同源策略是为了防止xss跨站脚本攻击和csrf跨站请求伪造。
• 跨域是浏览器的一种机制。
• 怎么跨域
  • 修改浏览器配置
  • 特定请求方式：利用html中一些不存在跨域限制的请求方式（script、img、iframe、postMessage...）请求资源数据。比较常见的是jsonp,利用script发送get请求，注册全局回调函数将函数名以参数形式放到URL中发给服务端，服务端动态生成回调函数的脚本。
  • CORS：它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。
    • 简单请求
      目的：兼容表单，主要表单可以发Ajax就能发。
      方法：请求头中增加一个origin字段。
      默认不发送cookie，若发送则增加
      Access-Control-Allow-Credentials: true。
    • 非简单请求
      1. 请求方法是put，delete，或者content-type是application/json。
      2. 先预检请求(options方法)，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错。通过后按照简单请求进行cors。
      3. 预检请求的头信息
      • origin
      • Access-Control-Request-Method：该字段是必须的，用来列出浏览器的CORS请求会用到哪些HTTP方法
      • Access-Control-Request-Headers：该字段是一个逗号分隔的字符串，指定浏览器CORS请求会额外发送的头信息字段
  • nginx代理

2.输入url发生了什么

• URL解析(utf8编码)
• dns解析
  • 从hosts文件查找
  • 本地DNS解析器缓存
  • 计算机配置的DNS服务器查找
  • 根DNS服务器
• TCP链接
• 交换机(物理层，数据链路层)，路由器(网络层)，传输层，应用层
• 请求HTML文件
  • 缓存策略
    • 第一次请求返回200下载资源，缓存Res头(date字段计算时间差)
    • 强缓存cache-control,如果no-cache直接协商缓存；如果max-age,,则和上次Res date作比较，若没有cache-control则取expires。若过期进入协商缓存
    • 向服务器发送header带有If-None-Match和If-Modified-Since的请求，服务器会比较Etag，如果相同，命中协商缓存，返回304；如果不一致则有改动，直接返回新的资源文件带上新的Etag值并返回200;
      协商缓存第二个重要的字段是，If-Modified-Since，如果客户端发送的If-Modified-Since的值跟服务器端获取的文件最近改动的时间，一致则命中协商缓存，返回304；不一致则返回新的last-modified和文件并返回200;
    • 启发式缓存
      如果响应中未显示Expires，Cache-Control：max-age或Cache-Control：s-maxage，并且响应中不包含其他有关缓存的限制，缓存可以使用启发式方法计算新鲜度寿命。通常会根据响应头中的2个时间字段 Date 减去 Last-Modified 值的 10% 作为缓存时间。

3. TCP

彻底搞懂TCP协议：从 TCP 三次握手四次挥手说起

• 三次握手
  • 客户端syn=1,seq=x
  • 服务端syn=1,seq=y, ack=x+1
  • 客户端ack=y+1,seq=z
• 四次挥手
  • 客户端fin=1, ack=z,seq=x
  • 服务端ack=x+1,seq=z
  • 服务端fin=1, ack=x,seq=y
  • 客户端ack=y,seq=x
• 为什么需要四次挥手
  • 关闭连接时，客户端向服务端发送 FIN 时，仅仅表示客户端不再发送数据了但是还能接收数据。
  • 服务器收到客户端的 FIN 报文时，先回一个 ACK 应答报文，而服务端可能还有数据需要处理和发送，等服务端不再发送数据时，才发送 FIN 报文给客户端来表示同意现在关闭连接。

4. https

1. 客户端发起加密请求

• 支持的协议版本，比如TLS 1.0版。
• 一个客户端生成的随机数，稍后用于生成"对话密钥"
• 支持的加密方法，比如RSA公钥加密。
• 支持的压缩方法。

2. 服务器收到客户端请求后，向客户端发出回应

• 确认使用的加密通信协议版本，比如TLS 1.0版本。如果浏览器与服务器支持的版本不一致，服务器关闭加密通信。
• 一个服务器生成的随机数，稍后用于生成"对话密钥"。
• 确认使用的加密方法，比如RSA公钥加密。
• 服务器证书。

3. 客户端收到服务器回应以后，首先验证服务器证书。如果证书不是可信机构颁布、或者证书中的域名与实际域名不一致、或者证书已经过期，就会向访问者显示一个警告，由其选择是否还要继续通信。

• 一个随机数。该随机数用服务器公钥加密，防止被窃听。
• 编码改变通知，表示随后的信息都将用双方商定的加密方法和密钥发送。
• 客户端握手结束通知，表示客户端的握手阶段已经结束。这一项同时也是前面发送的所有内容的hash值，用来供服务器校验。

4. 服务器收到客户端的第三个随机数pre-master key之后，计算生成本次会话所用的"会话密钥"。然后，向客户端最后发送下面信息。

• 编码改变通知，表示随后的信息都将用双方商定的加密方法和密钥发送。
• 服务器握手结束通知，表示服务器的握手阶段已经结束。这一项同时也是前面发送的所有内容的hash值，用来供客户端校验。

5. http状态码

关于 HTTP 307 状态码

• 1XX，表示请求接受，并且继续处理。
  • 100，请求者应当继续提出请求。 服务器返回此代码表示已收到请求的第一部分，正在等待其余部分。
  • 101，请求者已要求服务器切换协议，服务器已确认并准备切换。
• 2XX，表示请求正常。
  • 200，请求正常处理
  • 204，请求处理成功，但是没有资源可返回
  • 206，对资源的某一部分的请求
• 3XX，重定向状态码
  • 301，永久性重定向
  • 302，临时性重定向
  • 304，缓存中读取，未修改。所请求的资源未修改，服务器返回状态码时，不返回任何资源，客户端通常会缓存访问过的资源。
  • 在 GET、HEAD 这些幂等的请求方式上，302、303、307 没啥区别，而对于 POST 就不同了，大部分浏览器 都会 302 会将 POST 请求转为 GET，而 303 是规范强制规定将 POST 转为 GET 请求，请求地址为 header 头中的 Location，307 则不一样，规范要求浏览器继续向 Location 的地址 POST 内容。
• 4XX，客户端错误
  • 400，请求报文存在错误
  • 401，需要认证
  • 403，请求被服务器拒绝
  • 404，服务器无法找到资源
• 5XX，服务器错误
  • 500，服务端执行错误
  • 503，服务器无法处理请求

6.Ajax/axios/fetch

• Ajax是Asynchronous JavaScript and XML的缩写，意思是异步网络请求。

var request = new XMLHttpRequest(); // 创建XMLHttpRequest对象
//ajax是异步的，设置回调函数
request.onreadystatechange = function () { // 状态发生变化时，函数被回调
    if (request.readyState === 4) { // 成功完成
        // 判断响应状态码
        if (request.status === 200) {
            // 成功，通过responseText拿到响应的文本:
            return success(request.responseText);
        } else {
            // 失败，根据响应码判断失败原因:
            return fail(request.status);
        }
    } else {
        // HTTP请求还在继续...
    }
}
// 发送请求:
request.open('GET', '/api/categories');
request.setRequestHeader("Content-Type", "application/json") //设置请求头
request.send();//到这一步，请求才正式发出

• axios
  • 从浏览器中创建 XMLHttpRequests
  • 从 node.js 创建 http 请求
  • 支持 Promise API
  • 拦截请求和响应
  • 转换请求数据和响应数据
  • 取消请求
  • 自动转换 JSON 数据
  • 客户端支持防御 XSRF
• fetch
  • 当接收到一个代表错误的 HTTP 状态码时，从 fetch()返回的 Promise 不会被标记为 reject， 即使该 HTTP 响应的状态码是 404 或 500。相反，它会将 Promise 状态标记为 resolve （但是会将 resolve 的返回值的 ok 属性设置为 false ），仅当网络故障时或请求被阻止时，才会标记为 reject。
  • 默认情况下，fetch 不会从服务端发送或接收任何 cookies, 如果站点依赖于用户 session，则会导致未经认证的请求（要发送 cookies，必须设置 credentials 选项）

7.XSS/CSRF

如何防止CSRF攻击？
Prevent XSS and CSRF attacks on your website

• XSS. cross site script，跨站脚本攻击。客户端执行js脚本。
  • 合法输入
  • HttpOnlyjs不能使用document.cookie
  • Content-Security-Policy: default-src https:; script-src https: 'unsafe-eval' 'unsafe-inline'; style-src https: 'unsafe-inline'; img-src https: data:; font-src https: data:; report-uri /csp-report
  • X-XSS-Protection: 1; mode=block
• CSRF,Cross-site request forgery,跨站请求伪造。
  • 那就是为Set-Cookie响应头新增Samesite属性，它用来标明这个 Cookie是个“同站 Cookie”，同站Cookie只能作为第一方Cookie，不能作为第三方Cookie，Samesite 有两个属性值，分别是 Strict 和 Lax。
    • Samesite=Strict，这种称为严格模式，表明这个 Cookie 在任何情况下都不可能作为第三方 Cookie，绝无例外。
    • Samesite=Lax，这种称为宽松模式，比 Strict 放宽了点限制：假如这个请求是这种请求（改变了当前页面或者打开了新页面）且同时是个GET请求，则这个Cookie可以作为第三方Cookie。

8.TCP/UDP

• TCP面向连接， UDP是无连接
• CP提供可靠的服务。也就是说，通过TCP连接传送的数据，无差错，不丢失，不重复，且按序到达;UDP尽最大努力交付，即不保证可靠交付
• UDP具有较好的实时性，工作效率比TCP高，适用于对高速传输和实时性有较高的通信或广播通信。
• TCP对系统资源要求较多，UDP对系统资源要求较少。

9.http结构

• 请求行
  • 请求方法
  • URL字段
  • http协议
• 请求头
  • Accept：Image/gif (媒体类型)
  • Accept-Language：zh-cn(语言类型)
  • Host：www.taobao.com(服务端主机名)
• 空行
• 请求体
  • 主体包含了客户端要发送给服务端的信息，所以一般post类型的请求报文会有报文主体，get类型是没有的。