共计 2745 个字符，预计需要花费 7 分钟才能阅读完成。
通常 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 个计划及实现
- 更多文章 …
