乐趣区

关于前端:讲给前端的网络安全1浏览器与网络的那些事

jiezi

通常 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.1
Host: www.example.com

或是这样：

POST /process?action=login HTTP/1.1
Host: 169.254.13.37

username=seadog007&password=password

而响应包是以下的格局

HTTP/1.1 状态码 状态形容
响应头

响应数据体

给个例子的话应该像这样

HTTP/1.1 200 OK
Content-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 Layer Source Destination
L2 你电脑的 MAC 地址 路由器的 MAC 地址
L3 你电脑的 IP（1.2.3.4） 指标服务器的 IP（216.58.200.228）
L4 54321 80

因为 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 个计划及实现
  • 更多文章 …
退出移动版