【技術乾貨】瀏覽器工作原理和常見WEB攻擊（上）

駐雲科技發表於2016-06-21
瀏覽器Web

7fc0007a79ae8e53253

本文作者：上海駐雲開發總監 陳昂

瀏覽器工作原理


當你開啟一個個設計漂亮、簡潔大方的網頁，有沒有想過瀏覽器是如何展現這麼一個網頁的呢。當你在這些網頁上輸入你的淘寶賬號登入購買東西的時候，有沒有想過，你的賬號密碼、身份證號、手機號、真實姓名，這些資訊會不會洩露，被黑客利用呢？在瞭解網路安全方面的知識之前我們先簡單瞭解下瀏覽器的工作原理，以輔助我們更好的理解網路安全知識。


  • 瀏覽器分類

現代瀏覽器從核心上來說，主要分為以下6大類：

  1. Trident核心，代表是IE
  2. EDGE核心，代表是微軟的Edge瀏覽器
  3. Gecko核心，代表是Firefox
  4. WebKit核心，代表是Safari和Chrome
  5. Blink核心，代表是最新的Chrome
  6. Presto核心，代表是Opera

其中Trident、Gecko、Webkit、Presto已在市場存在多年。但是瀏覽器技術發展很是迅猛。隨著微軟最新瀏覽器Edge的誕生，採用Trident核心被詬病多年的IE瀏覽器終於要逐漸退出瀏覽器舞臺了。而Blink是Google Chrome瀏覽器採用的新核心，由此，Google似乎也要和Webkit陣營分道揚鑣，Opera也宣稱要緊抱Blink的大腿，一場看不見硝煙的戰爭似乎又在醞釀。不過這裡不再過多討論。有興趣的朋友可以關注下瀏覽器核心發展的最新動向。但不論瀏覽器怎麼發展變化，瀏覽器的組成和瀏覽器載入網頁的原理都是大同小異，不會有太大變化的。下圖是瀏覽器的主要組成模組：

7fa0007a191345b0b64

圖 1瀏覽器組成模組


瀏覽器載入順序


當我們在瀏覽器位址列輸入一個網址（比如：http://cloudcare.cn）， 點選回車後，瀏覽器是如何載入網頁的呢？

  • DNS Lookup

首先，點選回車後，瀏覽器是無法識別cloudcare.cn是什麼的，它也不知道你要訪問的cloudcare.cn這個網站放在哪裡。這個時候，就需要有人告訴瀏覽器，你應該去哪臺伺服器訪問這個網站。這個“人”就是DNS(Domain Name System，域名系統)，我們從圖中看下DNS工作原理。


7f90007a2a61ff80261


假如本地配置的DNS服務地址是223.5.5.5

大致步驟是這樣的：

  1. 瀏覽器傳送cloudcare.cn定址請求給DNS伺服器
  2. DNS服務返回資料告訴本地電腦cloudcare.cn的伺服器地址是10.0.0.1
  3. 本地電腦快取DNS資料，併傳送cloudcare.cn訪問請求給10.0.0.1這個伺服器
  4. 伺服器和本地電腦建立TCP連線，進行資料互動

注：關於DNS快取和路由定址，大家有興趣可以Google

  • TCP連線和HTTP

當TCP連線建立後，就可以進行資料傳輸了。而資料的傳輸是要滿足HTTP協議的（分為1.0和1.1兩個版本）,包含有連線、訊息、請求、響應等一系列規定。

一個頁面的載入少則數個HTTP請求，多則幾十個甚至上百個HTTP請求。一個HTTP的請求頭大概是這個樣子的：


7fa0007a19055267e0f


一個HTTP響應後的頭大概是這個樣子的：


7f90007a2a5bcf07740

我們常說的200、404、500就是相應的狀態碼了。

而我們最關心的可能就是HTTP 的響應Body了, 一個簡單的相應body類似是這個樣子的


7fa0007a1939334f517


是不是很熟悉？這就是我們預先編輯好的HTML頁面程式碼。

當我們拿到這麼一個頁面程式碼後，瀏覽器是怎麼渲染成一個功能豐富，簡潔漂亮網頁的呢？我們先看下HTML的程式碼結構

  • HTML程式碼結構

一個完整的HTML程式碼，應該包含html, head, body 這三個標籤

<html>

<head>

</head>

<body>

</body>

</html>

其中head標籤定義文件的頭部，可以引用指令碼，指示樣式表，提供原資訊等。這裡定義的東西不會真正展現在頁面。

Body標籤下面定義了頁面需要展示的元素和佈局。關於HTML大家可以自行搜尋。

接下來，我們看下瀏覽器的渲染過程

  • HTML頁面渲染過程

假如cloudcare.cn的首頁是這樣的：


7fc0007a79be21c80a1


當瀏覽器從伺服器第一次拿到頁面資料時候，就是上面這個樣子，我們稱之為基礎文件(document)，瀏覽器會把這個基礎文件轉化為稱之DOM樹的結構化物件儲存在記憶體裡面，然後根據這個DOM樹，進行渲染，轉化為瀏覽器視覺化的東西。

在渲染的時候，瀏覽器會從上到下依次渲染DOM樹，當發現有外鏈的資源或是指令碼的時候（如：上圖link、script、img標籤），會非同步發起外鏈資源HTTP請求。同時解析繼續。


如果你的網路環境不好，網速很慢的話，可能會看到這樣一個現象：

  1. 網頁先呈現“Hello world” 字樣
  2. 然後圖片逐漸載入出來
  3. 如果樣式表裡面定義了類似 div {color: red;} 的樣式。當樣式表載入完後，”Hello world”字樣會突然變成紅色字型。
  • Cookies

HTTP協議裡面定義了Cookies的操作。Cookies的中文名稱作“小型文字檔案”，它以域名為隔離空間儲存在瀏覽器所在電腦的本地磁碟上。他有兩個重要的特點：

  1. 不能跨域訪問（子級域名除外），例如，在cloudcare.cn域名下無法訪問 baidu.com域名下面的cookies。
  2. 每次的HTTP請求都會在請求頭裡面自動帶上cookies傳送到後端伺服器。

關於瀏覽器的具體工作原理，這裡有一篇文章講解的非常的詳細：http://taligarsiel.com/Projects/howbrowserswork1.htm


這篇給大家總結介紹了瀏覽器相關的一系列知識，下篇將為大家帶來重頭的常見WEB攻擊，敬請期待~~~同時如果喜歡我們的話就訂閱我們吧，還可以關注微信公眾號：架構雲專家頻道。每天新鮮乾貨定時推送噢~


相關文章