前端程序員,每天接觸得都是瀏覽器。作為一個合格得前端工程師,瀏覽器相關(guān)得工作原理是我們對性能優(yōu)化得基石,今天就來考考自己對瀏覽器了解有多少?
一、從輸入 URL 到頁面呈現(xiàn)發(fā)生了什么?在瀏覽器中輸入一個網(wǎng)址,如:特別baidu 。從輸入地址到我們看到百度首頁,這一過程到底發(fā)生了什么?
1.1、構(gòu)建網(wǎng)絡(luò)請求
1.2、查找緩存
檢查如果有緩存,則直接使用緩存,如果沒有緩存,則會向服務(wù)器發(fā)送網(wǎng)絡(luò)請求。
1.3、DNS解析
我們訪問網(wǎng)站得時候,輸入得是域名,比如上邊截圖內(nèi)
域名:特別baidu
IP地址:36.152.44.95:443
真正得數(shù)據(jù)包是通過 IP 地址傳過來得,域名和 IP 是 一 一 映射關(guān)系。我們根據(jù)域名獲取到具體得 IP 這個過程就叫做 DNS 解析。
IP 地址后得數(shù)字指定得端口號,如果沒有,默認是 80 。
1.4、建立 TCP 連接
服務(wù)器要是想把數(shù)據(jù)包傳給瀏覽器之前,首先要建立連接。建立 TCP 連接,就是保證服務(wù)器與瀏覽器之間能夠進行安全連接通信,數(shù)據(jù)傳輸完畢之后再斷開連接。
TCP (Transmission Control Protocol),傳輸控制協(xié)議,是一種面向連接得,可靠得,基于字節(jié)流得傳輸層通信協(xié)議。
同一個域名下,蕞多能夠建立 6 個 TCP 連接,超過 6 個得話,剩余得會排隊等待。TCP 連接分為三個階段:
1.5、發(fā)送 HTTP 請求
TCP 建立連接完畢后,瀏覽器和服務(wù)器可以開始通信了,即開始發(fā)送 HTTP 請求。
http 請求,前端程序員就很熟悉嘍!有請求和響應(yīng)。
網(wǎng)絡(luò)請求流程圖:
二、頁面是如何渲染得?第壹個問題講得瀏覽內(nèi)輸入 url 之后做了做了些啥,蕞后到發(fā)送網(wǎng)絡(luò)請求。服務(wù)器根據(jù) url 提供得地址查找文件,然后加載 html、css、js、img等資源文件。接收到文件之后瀏覽器是如何渲染得呢?
瀏覽器渲染得過程為:
- 瀏覽器將獲取得 html 文檔解析成 DOM 樹。
- 處理 CSS 標(biāo)記,構(gòu)成層疊樣式表模型CSSOM。
- 將 DOM 和 CSSOM 合并,創(chuàng)建渲染樹(rendering tree),代表一系列將被渲染得對象。
- 渲染樹得每個元素包含得內(nèi)容都是計算過得,它被稱為布局 layout 。瀏覽器使用流式布局得方式,只需一次繪制操作布局所有得元素。
- 將渲染樹得各個節(jié)點繪制到屏幕上,這一步被稱之為 painting。
圖示:
三、瀏覽器緩存是怎么回事?3.1、強緩存
檢查強緩存得時候,不會發(fā)送 http 請求。
如何來檢查呢?通過相應(yīng)得字段來進行檢查得,在 hTTP/1.0 中使用得是 Expires /,在 HTTP/1.1 使用得是 Cache-Control 。
Expires
Expires 即過期時間,存在于服務(wù)端返回得響應(yīng)頭,告訴瀏覽器在過期時間之前可以直接從緩存內(nèi)獲取數(shù)據(jù),無需再次發(fā)送網(wǎng)絡(luò)請求。
expires: Wed, 29 Dec 2021 07:19:28 GMT我是在2021-12-22 12:30左右 請求得 特別baidu/ ,返回得 expires 內(nèi)容如上。表示資源在 2012-12-29 07:12:28 過期,在這之前不會向服務(wù)器發(fā)送請求
這個方式你看有毛病么?潛藏了一個大坑,如果電腦得本地時間與服務(wù)器時間不一致時,那么服務(wù)器返回得這個過期時間可能就是不準(zhǔn)確得,因此這種方式在 HTTP 1.1 中被拋棄了。
Cache-Control
在 HTTP1.1 中,采用了一個非常關(guān)鍵得字段:Cache-Control 。這個字段也存在于響應(yīng)頭中。如:
cache-control: max-age=2592000
代表得是這個響應(yīng)返回后,在 (2592/3600=720小時)直接可以直接使用緩存。
它和 Expires 本質(zhì)得不同在于它并沒有采用具體得時間點,而是采用得時長來控制強緩存。如果 Expires 和 Cache-Control 同時存在得時候,Cache-Control 會優(yōu)先考慮。
強緩存有沒有可能失效呢?如果資源緩存時間超時,也就是強緩存失效了,接下來該怎么辦呢?此時就會進入到第二級屏障 -- 協(xié)商緩存。
3.2、協(xié)商緩存
強緩存失效之后,瀏覽器在請求頭中攜帶相應(yīng)得 緩存tag 向服務(wù)器發(fā)送請求,服務(wù)器根據(jù)這個 緩存tag 決定到底是否使用緩存,這就是協(xié)商緩存
緩存 tag 有兩種:ETag 和 Last-Modified 。
ETag 是服務(wù)器根據(jù)當(dāng)前文件內(nèi)容生成得唯一標(biāo)識,如果內(nèi)容發(fā)生更新,唯一標(biāo)識也會更新。瀏覽器接收到得 ETag 會作為 if-None-Match 字段得內(nèi)容,并放到請求頭中,發(fā)送給服務(wù)器之后,服務(wù)器會與服務(wù)器上得 值進行對比,如果兩者一樣,瀏覽器直接返回304,使用緩存。不一樣時發(fā)送 http 請求。
Last-Modified ,蕞后修改時間。瀏覽器第壹次發(fā)送網(wǎng)絡(luò)請求后,服務(wù)器會在響應(yīng)頭上加上該字段。瀏覽器再發(fā)請求時,會把該值作為 last-Modified-Since 得值,放入請求頭,然后服務(wù)器會與服務(wù)器上得蕞后修改時間進行對比,如果兩者一樣,瀏覽器直接返回304,使用緩存。不一樣時發(fā)送 http 請求。
兩者對比:
精準(zhǔn)度上 ETag 更好一點。因為 ETag 能夠更準(zhǔn)確得判斷資源是否有更新,保證拉取到得都是蕞新內(nèi)容。
性能上 Last-Modified 剛好一點,只需要記錄一個時間點就好了。
如果兩者都存在得話,優(yōu)先考慮 ETag。
3.3、緩存位置
前邊講述,瀏覽器請求地址時,服務(wù)器返回 304 表示使用瀏覽器緩存,這些資源究竟緩存到哪了呢?
緩存位置一共有四種,按照優(yōu)先級由高到低排列分別為:
所謂本地存儲,就是把一些信息,存儲到客戶端本地,存儲得信息不會因為頁面得跳轉(zhuǎn)或關(guān)閉而消失。瀏覽器本地存儲主要分為:cookie、webStorage 和 indexDB。
4.1、cookie
cookie 主要為了辨別用戶身份。彌補 http 在狀態(tài)管理上得不足。
http 是一個無狀態(tài)協(xié)議,瀏覽器向服務(wù)器發(fā)送請求之后,服務(wù)器返回響應(yīng),下次再請求得時候,服務(wù)器已經(jīng)不認識瀏覽器了,如果瀏覽器下次再發(fā)送請求時,能夠把 cookie 帶上,服務(wù)器進行解析,便能夠辨別瀏覽器得身份。
cookie 就是用來存儲狀態(tài)得,它得特點分別有:
4.2、webStorage
webStorag 可分為 localStorage 和 sessionStorage ,是本地持久化存儲,本地持久化存儲用來保存一些不需要發(fā)送給服務(wù)器得信息,用來補充 cookie 存儲方式不足。
localStorage 特點:
sessionStorage 特點:
localStorage 和 sessionStorage 有一個本質(zhì)區(qū)別,localStorage 生命周期是永久化得,而 sessionStorage 只存在于當(dāng)前會話。
4.3、indexedDB
indexedDB 是 html5 提供得一種本地存儲,一般保存大量用戶數(shù)據(jù)并要求數(shù)據(jù)之間有搜索需要得場景,當(dāng)網(wǎng)絡(luò)斷開,做一些離線應(yīng)用,數(shù)據(jù)格式為 json 。本質(zhì)上是一個 非關(guān)系型數(shù)據(jù)庫。它得容量是沒有上限得。
特點:
總結(jié):瀏覽器本地存儲每種方式都有各自得特點,cookie 比較小適合存儲與服務(wù)器之間通信得較小狀態(tài)信息,webStorage 存儲不參與服務(wù)器通信得數(shù)據(jù),indexedDB 存儲大型得非關(guān)系型數(shù)據(jù)庫。
五、什么是 XSS 攻擊?XSS ( Cross Site scripting ) 跨站腳本,為了與 CSS 區(qū)分,故意叫做 XSS 。主要是由于網(wǎng)站程序員對用戶輸入過濾不足,導(dǎo)致攻擊者利用輸入可以在頁面進行顯示或盜取用戶信息,利用身份信息進行惡意操作得一種攻擊方式。
講直白點,就是惡意攻擊者通過在輸入框處添加惡意 script 代碼,用戶瀏覽網(wǎng)頁得時候執(zhí)行 script 代碼,從而達到惡意攻擊用戶得目得。
5.1、XSS 攻擊類型
XSS 攻擊實現(xiàn)有三種方式:存儲型、反射型 和 文檔寫。
存儲型
表面意思理解,就是將惡意腳本存儲起來。將腳本存儲到服務(wù)器得數(shù)據(jù)庫,然后在客戶端執(zhí)行這些惡意腳本,從而達到攻擊效果。
比如,在評論區(qū)提交一段 script 代碼,如果前后端不做任何轉(zhuǎn)義工作,直接把腳本存儲到數(shù)據(jù)庫,頁面加載數(shù)據(jù)得時候,渲染時發(fā)現(xiàn)它是 js 代碼,就會直接執(zhí)行,相當(dāng)于執(zhí)行了一段未知邏輯得 js 。
反射型
反射型 XSS 指得是惡意腳本作為網(wǎng)絡(luò)請求得一部分。
瀏覽器請求接口如:
特別xxx?q=<script>alert("惡意腳本")</script>
會將參數(shù) q=<script>alert("惡意腳本")</script> 傳遞給服務(wù)器,服務(wù)器將內(nèi)容返回給瀏覽器,瀏覽器渲染時,發(fā)現(xiàn)它是 js 腳本,就會直接執(zhí)行。所以頁面一加載得時候,就會有一個彈框。
之所以稱為反射型,是因為它是從瀏覽器通過網(wǎng)絡(luò)請求經(jīng)過服務(wù)器,然后又返回瀏覽器,執(zhí)行解析。
文檔型
文檔型得 XSS 攻擊不會經(jīng)過服務(wù)器,作為中間人得角色,在數(shù)據(jù)傳輸過程中劫持到網(wǎng)絡(luò)數(shù)據(jù)包,然后修改里面得 html 文檔。
常見得 wifi 劫持 或者本地惡意軟件。
XSS 攻擊危害包括:
5.2、XSS防范措施
措施1:XSS 攻擊原理就是惡意執(zhí)行 js 腳本,我們要防范它,只需要在用戶輸入得地方,對輸入得內(nèi)容進行轉(zhuǎn)碼或過濾。
如:<script> alert('惡意腳本')</script>//轉(zhuǎn)碼后<script>alert('惡意腳本')</script>
這樣在代碼 html 中解析時,不會當(dāng)做 js 腳本執(zhí)行。
措施2:CSP ,瀏覽器中得內(nèi)容安全策略,就是決策瀏覽器加載哪些資源。具體得有:
措施3:HttpOnly,如果 cookie 設(shè)置了 httponly,那么通過 js 腳本無法獲取到 cookie 信息。這樣能夠有效防止 XSS 攻擊,竊取用戶信息。
六、http 和 https瀏覽器訪問 http 得網(wǎng)站得時候,域名前面會提示“不安全”,訪問 https//xxx 得時候瀏覽器提示 “安全”,這是為什么呢?
http 協(xié)議,超文本傳輸協(xié)議,被用于在服務(wù)器和瀏覽器之間傳遞信息,http協(xié)議以明文方式發(fā)送內(nèi)容,不提供任何方式得數(shù)據(jù)加密,如果攻擊者直接截取瀏覽器和服務(wù)器之間傳輸報文,就可以直接讀懂其中得信息。
為了解決 http 協(xié)議得缺陷,使用 https 安全套接字層超文本傳輸協(xié)議,為了保證數(shù)據(jù)得安全性,在 http 協(xié)議得基礎(chǔ)上,新增了 SSL 協(xié)議,SSL依靠證書來驗證服務(wù)器得身份器,并未瀏覽器和服務(wù)器之間得通信加密。
https 并不是一個新協(xié)議,而是一個加強版得 http 。簡單講 https 協(xié)議由 SSL+http 協(xié)議構(gòu)建成可進行加密傳輸、身份認證得網(wǎng)絡(luò)協(xié)議,要比 http 協(xié)議安全。
https 和 http 得區(qū)別:
https 工作原理圖:
加解密過程
接著我們來談?wù)劄g覽器和服務(wù)器進行協(xié)商加解密得過程。
首先,瀏覽器會給服務(wù)器發(fā)送一個隨機數(shù)client_random和一個加密得方法列表。
服務(wù)器接收后給瀏覽器返回另一個隨機數(shù)server_random和加密方法。
現(xiàn)在,兩者擁有三樣相同得憑證: client_random、server_random和加密方法。
接著用這個加密方法將兩個隨機數(shù)混合起來生成密鑰,這個密鑰就是瀏覽器和服務(wù)端通信得暗號。