讲给前端的网络安全（1）：浏览器与网络的那些事

时间 2020-12-09

标签 html 前端程序员 web 面试 json segmentfault 浏览器安全服务器栏目系统网络繁體版

原文原文链接

一般 web 安全指的是 HTTP 协议上层的安全，若是再往 HTTP 底层探索的话，还有许多值得注意和研究的东西。html

本系列将会从互联网的基础即物理层开始，一路到应用层的设计缺陷。因为篇幅的限制，每层都会讲几个表明性的攻击，并且会尽可能避开常见的 Web 安全问题前端

今天是第一篇。程序员

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

当你在浏览器中输入 https://www.google.com 后打开页面时，在网络上都发生了些什么事？web

在解决这个问题以前，要先了解几个与其有关的技术和术语面试

FQDN（彻底合格的域名）

FQDN 指的是完整的网址名称json

好比：“www.google.com”segmentfault

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 能够看到请求的细节：

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

知道了这些能有什么用？

首先，要研究一个东西，要先了解这个东西的基本运做模式，这其中有不少东西不是由你电脑处理的，通常使用者也不会去了解和研究，好比当数据包发往路由器后，它们会根据某种规则进行转发，还有若是你家里若是有多台电脑的话，你的路由器都帮你作了什么，而这个系列将会针对这些普通人不关心的东西作一些安全上的探讨。

总结

看完本文你应该稍微了解了一些打开网页时在网络上发生的一些事。固然只是描述了在网络层面，省略了其余不少方面的东西。打开一个网页所发生的事远远不仅这些，在之后的文章里，咱们将会探索当数据包被发往路由器后都发生了些什么事。

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

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

欢迎继续阅读本专栏其它高赞文章：

更多文章...