通常 web 平安指的是 HTTP 协定下层的平安，如果再往 HTTP 底层摸索的话，还有许多值得注意和钻研的货色。

本系列将会从互联网的根底即物理层开始，一路到应用层的设计缺点。因为篇幅的限度，每层都会讲几个代表性的攻打，而且会尽量避开常见的 Web 平安问题

明天是第一篇。

你的浏览器在网络上都做了什么？

当你在浏览器中输出 https://www.google.com 后关上页面时，在网络上都产生了些什么事？

在解决这个问题之前，要先理解几个与其无关的技术和术语

FQDN（齐全合格的域名）

FQDN 指的是残缺的网址名称

比方：“www.google.com”

TCP/IP 模型

MAC 地址

全名为媒体访问控制地址（Media Access Control Address），简略来说就是每个网络设备举世无双的辨认号码。

ARP

让电脑能够把 IP 对应到 MAC 地址的协定

IP

辨认电脑用的一组数值，常见的 127.0.0.1 就是一组电脑辨认本人用的本机回送地址（Loopback Address），本文将以 IPv4 为例。

路由器

一种电脑设备，会依据内存中的路由表把带有 IP 数据包转发到正确的门路，在现实生活中就跟快递员一样

TCP/UDP

TCP 与 UDP 是在传输层中的两个不同的协定

  • TCP (传输控制协议 Transmission Control Protocol)

    有状态的协定，建设连贯前要先通过三次握手，其中包含数据校验验证和重传机制，以确保对方收到的数据是正确。

  • UDP (用户数据报协定 User Datagram Protocol)

    无状态协定，把数据丢过来，如果对方没收到的话那就算了，如果有必要的话，能够在应用层实现重传机制。

两者之间的区别大略是这样的：

DNS (域名零碎 Domain Name System)

将 FQDN 解析为 IP 地址的零碎（这样说太过简略，其性能不只这些），应用UDP作为底层的传输协定。

HTTP/HTTPS

在網址列中 我們能够看到 "https" 開頭
咱们在浏览器的地址栏中能够看到以 “https” 为结尾的字符串，HTTPS 是 HTTP 的平安加密版本，将 HTTP 包在了 TLS/SSL 中。不过前面我将会疏忽加密相干的行为，强制降级成 HTTP 来形容。HTTP 是一个建设在 TCP 之上的应用层协定。

申请封包像是这样（以HTTP 1.1为例，RFC2616）

申请办法 门路?参数 HTTP/1.1标头申请数据体

常见的申请办法有 GET、POST、HEAD 等。标头个别至多会带上 Host，来让服务器晓得你想连贯哪个网站，也就是说能够把多个网站放在同一台服务器上（VHost）。

数据体的局部能够留空，举个例子应该像是这样：

GET / HTTP/1.1Host: www.example.com

或是这样：

POST /process?action=login HTTP/1.1Host: 169.254.13.37username=seadog007&password=password

而响应包是以下的格局

HTTP/1.1 状态码 状态形容响应头响应数据体

给个例子的话应该像这样

HTTP/1.1 200 OKContent-Type: application/json{"status": "OK"}

你的浏览器做了些什么？

首先，你的浏览器并不能间接连上 FQDN，所以应该先将 FQDN 转为 IP 地址

这时候 DNS 就派上用场了，浏览器会应用你电脑所设定的 DNS 服务器（例子中为 Google DNS，8.8.8.8）去查问 www.google.com 这个 FQDN 对应的服务器 IP 是什么。你也能够用一些工具（例如 nslookup，dig等）做同样的事：

在找到 IP 之后，你的操作系统会随机筛选一个端口，而后用它作为源端口去跟服务器的目标端口建设 TCP 连贯。HTTP 的默认端口为 80，假如你电脑的 IP 为 1.2.3.4，随机关上的端口为 54321：(1.2.3.4:54321 -> 216.58.200.228:80)

那么怎么建设 TCP 连贯呢？

首先，你的电脑会先去找你设定的默认路由地位，将这个地位解析回 MAC 地址（L2 地址），找到对应的物理设施（网卡，无线设施），并且将数据扔给你的路由器。

像方才例子的封包就会长这样：

OSI LayerSourceDestination
L2你电脑的MAC地址路由器的MAC地址
L3你电脑的IP（1.2.3.4）指标服务器的IP（216.58.200.228）
L45432180

因为 L2 的目的地是你的路由器，所以它会收到这个包，而后依据路由表中的 Nexthop 持续改写 L2 Destination将封包转送到目的地。封包达到服务器后，会用雷同的办法，一路将封包给你转送回来。

同理，后面 DNS 查问包的转发机制也是一样的，惟一不的是 DNS 用 UDP 作为底层协定，而 HTTP 用 TCP 作为底层，须要三次握手来建设连贯。

建设连贯后，浏览器将会向服务器发送 HTTP 申请，并将响应返回给浏览器，而后做绝对应的渲染。
按下 F12 打開開發者視窗，切換到網路頁面，將能够看到請求的細節

在 Chrome 浏览器中按下 F12 关上 DevTools，切换到 Network 能够看到申请的细节：

!

通过这些步骤你就能看到网页了。

晓得了这些能有什么用？

首先，要钻研一个货色，要先理解这个货色的根本运作模式，这其中有很多货色不是由你电脑解决的，个别使用者也不会去理解和钻研，比方当数据包发往路由器后，它们会依据某种规定进行转发，还有如果你家里如果有多台电脑的话，你的路由器都帮你做了什么，而这个系列将会针对这些普通人不关怀的货色做一些平安上的探讨。

总结

看完本文你应该略微理解了一些关上网页时在网络上产生的一些事。当然只是形容了在网络层面，省略了其余很多方面的货色。关上一个网页所产生的事远远不只这些，在当前的文章里，咱们将会摸索当数据包被发往路由器后都产生了些什么事。

本文首发微信公众号：前端先锋

欢送扫描二维码关注公众号，每天都给你推送陈腐的前端技术文章

欢送持续浏览本专栏其它高赞文章：

  • 深刻了解Shadow DOM v1
  • 一步步教你用 WebVR 实现虚拟现实游戏
  • 13个帮你进步开发效率的古代CSS框架
  • 疾速上手BootstrapVue
  • JavaScript引擎是如何工作的？从调用栈到Promise你须要晓得的所有
  • WebSocket实战：在 Node 和 React 之间进行实时通信
  • 对于 Git 的 20 个面试题
  • 深刻解析 Node.js 的 console.log
  • Node.js 到底是什么？
  • 30分钟用Node.js构建一个API服务器
  • Javascript的对象拷贝
  • 程序员30岁前月薪达不到30K，该何去何从
  • 14个最好的 JavaScript 数据可视化库
  • 8 个给前端的顶级 VS Code 扩大插件
  • Node.js 多线程齐全指南
  • 把HTML转成PDF的4个计划及实现
  • 更多文章...