前端与 HTML | 青训营笔记

fghk
121 阅读7分钟

引入-蟹堡王帝国

蟹老板想要赚一个小目标
蟹老板赚一个小目标三步走战略

  1. 开通外卖
    1. 需要知道谁需要蟹黄堡-使用电话点单
      但是这是有一定的问题的，比如不能同时接听多个电话，接单效率低，所以外卖服务进入了第二阶段
    2. 在之后，蟹宝网推出了新的接单方式-传真，只要以如下形式发送传真到蟹堡王，就可以点外卖了，不用考虑占线问题
      问答
      谁吃？派大星
      吃什么？两个蟹黄堡
      送到哪？石头屋
  2. 省级城市开分店
    1. 开设分店后需要知道每日的销售数据，确认原料等问题
      所以我们需要在蟹堡王与分店之间建立通信线路
    2. 在北京分店吃蟹黄堡的人越来越多，一家店扛不住了，所以需要在北京再开分店，那么，通信线路怎么办？
      所以我们在北京其他分店与北京总店之间建立了通信线路，并使用转发表格向蟹堡王总点
      问答
      来自中航蟹堡王
      发往比奇堡蟹堡王
      内容今天销售数据
    3. 当一家店搬迁，或新开一家分店，有的店不知道其他店在哪，所以很多分店会向比奇堡蟹堡王询问别的店的位置
      所以，每当开设新的分店，或者有店搬迁，比奇堡蟹堡王都会向所有分店发送包含了所有分店名称和分店地址的表格
  3. 全国分店开通外卖
    1. 当全国很多城市都拥有了蟹堡王的分店，我们不能让所有城市分店都与蟹堡王建立通信线路，这会很浪费
      所以，我们可以在城市与城市之间建立通信线路，让一些城市作为转发点

至此，我们已经让蟹堡王在全国建立了通信网络
蟹堡王顾客： 客户端 蟹堡王分店： 服务端 转发点：路由器 转发表格：网络协议

网络基础

计算机网络

组成部分:

  • 主机：服务端与客户端
  • 路由器
  • 网络协议

网络结构-网络的网络
比奇堡和小区网络：本地网络
城市分店+比奇堡：三个本地网络节点的本地网络
全国通信网络：本地网络的网络

这就是区域网络、城域网、广域网

交换方式

  • 电路交换
    在蟹堡王最开始开通外卖时使用电话接单、一个人在点单时整个线路都被占用了，就无法有第二个人点单，而且客户需要与前台建立连接才能进行点单，我们可以增加前台以实现多个人同时点单，但是当前台增加到一定数量之后，就会导致通信质量下降。
  • 分组交换
    蟹堡王之后使用的传真就是分组交换，分组交换与电路交换的不同点就是，分组交换不会建立电路连接，也不会预留资源-贷款，收到新的分组后。会加入输出队列， 按顺序输出，当队列满时，会丢弃新的分组，也就是丢包。

在计算机网络中，使用的都是分组交换，大的报文会分解为小的报文，小的报文在经过分组后会送往目标主机，在之后再由主机上的软件吧分组拼回完整的报文

网络分层

  • 快递员不关心包裹内容
  • 卡车司机不关心车厢内的东西
  • 高速公路不关心开的是什么车

不同的角色关心不同的事情，再计算机网络中体现为分层
计算机网络分为五层

  • 应用层
  • 运输层
  • 网络层
  • 链路层
  • 物理层

它们每一层都有自己的职责，都有自己的封装，这些封装对于上一层来说，基本上是黑盒的，对于上一层来说，不必关心下一层

协议

协议的存在依赖于连接
协议定义了在两个或多个通信实体之间交换报文的格式和顺序，以及报文发送接受或其他事件采用的动作

标头和载荷

  • 快递面单：标头 - 收件人，寄件人关注
  • 快递物品：载荷 - 快递公司关注

Web 中的网络

HTTP

HTTP1.0

  1. 连接
  2. 请求
  3. 返回
  4. 断开
  5. 连接
  6. 请求
  7. 返回
  8. 断开

HTTP1.1

  1. 连接
  2. 请求
  3. 返回
  4. 请求
  5. 返回
  6. 断开

HTTP 管线

  1. 连接
  2. 请求
  3. 请求
  4. 返回
  5. 返回
  6. 断开

HTTP1.1 无法复用

// main.js
console.log("Hello World");

/* style.css */
body {
  background: #f00;
}

如果按行交错发送，返回的就哦就会出错

body {
console.log("Hello World");
    background: #f00;
}

HTTP2 帧

request=style.css, content='body {'
request=main.js, content='console.log("Hello World");'
request=style.css, content='    color: red;'
request=style.css, content='}'

它带来的好处

  • 调整响应传输的优先级
  • 头部压缩
  • Server Push

HTTP3 QUIC

  • Quick UDP Internet Connection
  • 现存网络设备对 TCP 和 UDP 支持已经僵化
  • UDP 不靠谱，但 QUIC 靠谱
  • QUIC 可为除 HTTP 协议以外的应用层协议提供支持

WebSocket

// 服务端
const { WebSocketServer } = require("ws");
const wss = new WebSocketServer({ port: 8888 });
wss.on("connection", (ws) => {
  ws.on("message", (data) => {
    console.log("received: %s", data);
    ws.send(data);
  });
});

// 客户端
const WebSocket = require("ws");
const ws = new WebSocket("ws://localhost:8888");

ws.on("open", () => {
  ws.send("something");
});

ws.on("message", (data) => {
  console.log("received: %s", data);
});

网络安全

三要素

  • 机密性：攻击者无法获取通信内容
  • 完整性：攻击者对内容进行篡改时能被及时发现
  • 身份验证：攻击者无法伪装为通信双方的任意一方与另一方通信

对称加密与非对称加密

  • 对称：加密、解密用同样的密钥
  • 非对称：加密、解密使用不同的密钥（公钥和私钥），而且公钥加密只能用私钥解密，私钥加密只能用公钥解密

密码散列函数（哈希）

  • 输入：任意长度的内容
  • 输出：固定长度的哈希值
  • 性质：找到两个不同输入使之经过密码散列函数后有相同哈希值，在计算上是不可能的

机密性

  • 加密需要加密算法和密钥等信息（统称秘密信息）
  • 网络是明文的，不安全

完整性和身份验证

完整性和身份验证互相关联

  • 向银行发起请求
  • 银行确认
    • 请求是正确用户发起的
    • 目标账户和转账金额是没有篡改的

如何实现机密性

已知网络是明文的，如果双方通过明文商量出秘密信息，那么攻击者也可以看到，所以想要通过明文交换秘密信息，通信双方需要先有秘密信息

如何实现完整性

  • 有明文 m，密码散列函数 H，以及一个密钥 s
  • 计算 H(m + s) 获得哈希值 h
  • 将 m 和 h 组合为新信息 m + h
  • 接收方拆分 m + h，重新计算 H(m + s) 得到 h，对比 h 和 h

如何实现身份验证

  • 签名：用于鉴别身份和防止伪造
  • 非对称加密
  • 蟹老板用自己的私钥对信件加密，并发送给海绵宝宝
  • 海绵宝宝用蟹老板公钥进进行解密，获得原文
  • 保证了机密性、完整性和身份验证
  • 数字签名：对明文的哈希值使用私钥加密，验证者用公钥解密
  • 数字签名（指纹）：私钥加密(密码散列函数(原文))
  • 消息：原文 + 数字签名
  • 一般用于对公开内容进行数字签名，防止篡改
avatar
文章
阅读
粉丝