講給前端的網絡安全（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 能夠看到請求的細節：

通過這些步驟你就能看到網頁了。

知道了這些能有什麼用？

首先，要研究一個東西，要先了解這個東西的基本運做模式，這其中有不少東西不是由你電腦處理的，通常使用者也不會去了解和研究，好比當數據包發往路由器後，它們會根據某種規則進行轉發，還有若是你家裏若是有多臺電腦的話，你的路由器都幫你作了什麼，而這個系列將會針對這些普通人不關心的東西作一些安全上的探討。

總結

看完本文你應該稍微瞭解了一些打開網頁時在網絡上發生的一些事。固然只是描述了在網絡層面，省略了其餘不少方面的東西。打開一個網頁所發生的事遠遠不僅這些，在之後的文章裏，咱們將會探索當數據包被髮往路由器後都發生了些什麼事。

本文首發微信公衆號：前端先鋒

歡迎掃描二維碼關注公衆號，天天都給你推送新鮮的前端技術文章

歡迎繼續閱讀本專欄其它高贊文章：

更多文章...

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。