本文作者：上海駐雲開發總監 陳昂
浏覽器工作原理
當你打開一個個設計漂亮、簡潔大方的網頁，有沒有想過浏覽器是如何展現這麼一個網頁的呢。當你在這些網頁上輸入你的淘寶賬号登入購買東西的時候，有沒有想過，你的賬号密碼、身份證号、手機号、真實姓名，這些資訊會不會洩露，被黑客利用呢？在了解網絡安全方面的知識之前我們先簡單了解下浏覽器的工作原理，以輔助我們更好的了解網絡安全知識。
浏覽器分類
現代浏覽器從核心上來說，主要分為以下6大類：
trident核心，代表是ie
edge核心，代表是微軟的edge浏覽器
gecko核心，代表是firefox
webkit核心，代表是safari和chrome
blink核心，代表是最新的chrome
presto核心，代表是opera
其中trident、gecko、webkit、presto已在市場存在多年。但是浏覽器技術發展很是迅猛。随着微軟最新浏覽器edge的誕生，采用trident核心被诟病多年的ie浏覽器終于要逐漸退出浏覽器舞台了。而blink是google chrome浏覽器采用的新核心，由此，google似乎也要和webkit陣營分道揚镳，opera也宣稱要緊抱blink的大腿，一場看不見硝煙的戰争似乎又在醞釀。不過這裡不再過多讨論。有興趣的朋友可以關注下浏覽器核心發展的最新動向。但不論浏覽器怎麼發展變化，浏覽器的組成和浏覽器加載網頁的原理都是大同小異，不會有太大變化的。下圖是浏覽器的主要組成子產品：
圖 1浏覽器組成子產品
浏覽器加載順序
當我們在浏覽器位址欄輸入一個網址（比如：http://cloudcare.cn）， 點選回車後，浏覽器是如何加載網頁的呢？
dns lookup
首先，點選回車後，浏覽器是無法識别cloudcare.cn是什麼的，它也不知道你要通路的cloudcare.cn這個網站放在哪裡。這個時候，就需要有人告訴浏覽器，你應該去哪台伺服器通路這個網站。這個“人”就是dns(domain name system，域名系統)，我們從圖中看下dns工作原理。
假如本地配置的dns服務位址是223.5.5.5
大緻步驟是這樣的：
浏覽器發送cloudcare.cn尋址請求給dns伺服器
dns服務傳回資料告訴本地電腦cloudcare.cn的伺服器位址是10.0.0.1
本地電腦緩存dns資料，并發送cloudcare.cn通路請求給10.0.0.1這個伺服器
伺服器和本地電腦建立tcp連接配接，進行資料互動
注：關于dns緩存和路由尋址，大家有興趣可以google
tcp連接配接和http
當tcp連接配接建立後，就可以進行資料傳輸了。而資料的傳輸是要滿足http協定的（分為1.0和1.1兩個版本）,包含有連接配接、消息、請求、響應等一系列規定。
一個頁面的加載少則數個http請求，多則幾十個甚至上百個http請求。一個http的請求頭大概是這個樣子的：
一個http響應後的頭大概是這個樣子的：
我們常說的200、404、500就是相應的狀态碼了。
而我們最關心的可能就是http 的響應body了, 一個簡單的相應body類似是這個樣子的
是不是很熟悉？這就是我們預先編輯好的html頁面代碼。
當我們拿到這麼一個頁面代碼後，浏覽器是怎麼渲染成一個功能豐富，簡潔漂亮網頁的呢？我們先看下html的代碼結構
html代碼結構
一個完整的html代碼，應該包含html, head, body 這三個标簽
<html>
<head>
</head>
<body>
</body>
</html>
其中head标簽定義文檔的頭部，可以引用腳本，訓示樣式表，提供原資訊等。這裡定義的東西不會真正展現在頁面。
body标簽下面定義了頁面需要展示的元素和布局。關于html大家可以自行搜尋。
接下來，我們看下浏覽器的渲染過程
html頁面渲染過程
假如cloudcare.cn的首頁是這樣的：
當浏覽器從伺服器第一次拿到頁面資料時候，就是上面這個樣子，我們稱之為基礎文檔(document)，浏覽器會把這個基礎文檔轉化為稱之dom樹的結構化對象存儲在記憶體裡面，然後根據這個dom樹，進行渲染，轉化為浏覽器可視化的東西。
在渲染的時候，浏覽器會從上到下依次渲染dom樹，當發現有外鍊的資源或是腳本的時候（如：上圖link、script、img标簽），會異步發起外鍊資源http請求。同時解析繼續。
如果你的網絡環境不好，網速很慢的話，可能會看到這樣一個現象：
網頁先呈現“hello world” 字樣
然後圖檔逐漸加載出來
如果樣式表裡面定義了類似 div {color: red;} 的樣式。當樣式表加載完後，”hello world”字樣會突然變成紅色字型。
cookies
http協定裡面定義了cookies的操作。cookies的中文名稱作“小型文本檔案”，它以域名為隔離空間存儲在浏覽器所在電腦的本地磁盤上。他有兩個重要的特點：
不能跨域通路（子級域名除外），例如，在cloudcare.cn域名下無法通路 baidu.com域名下面的cookies。
每次的http請求都會在請求頭裡面自動帶上cookies發送到後端伺服器。
關于浏覽器的具體工作原理，這裡有一篇文章講解的非常的詳細：http://taligarsiel.com/projects/howbrowserswork1.htm
這篇給大家總結介紹了浏覽器相關的一系列知識，下篇将為大家帶來重頭的常見web攻擊，敬請期待~~~同時如果喜歡我們的話就訂閱我們吧，還可以關注微信公衆号：架構雲專家頻道。每天新鮮幹貨定時推送噢~