通常 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个方案及实现
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。