前端的一些http知識

一些http知識

前置知識

首先放一張很是經典的計算機網絡nginx

關於五層結構 「物理層」「數據鏈路層」「網絡層」「運輸層」「應用層」咱們依次來說算法

咱們拿wireshark 抓個http包看一下就能明白各層的區別chrome

Screen Shot 2020-02-10 at 12.11.06 PM.png

物理層瀏覽器

只有在網線(光纖)中傳遞的bits安全

數據鏈路層服務器

就有源mac 地址 和下一跳的mac 地址了(至關於網絡設備的物理地址)網絡

從圖中看 源 d4:ee:07:69:fb:b0 到目的 98:01:a7:ae:c3:0d併發

源是我家的路由器,驗證一下 終端輸入 arp -adom

Screen Shot 2020-02-10 at 12.27.35 PM.png

192.168.199.1 的地址默認是局域網內路由器的IP,右邊就是 d4:ee:07:69:fb:b0 路由器 mac 地址了tcp

對應的 終端輸入 ifconfig

Screen Shot 2020-02-10 at 12.30.59 PM.png

en0下 ether 98:01:a7:ae:c3:0d 就是咱們電腦網卡的mac 地址了

對應的arp 就是數據鏈路層的協議了

網絡層

就有源ip 地址和 目的ip 地址了

經常使用的協議 ICMP,基本實現 ping 命令

傳輸層

增長對應的端口了 好比上層協議 http 在 傳輸層 協議上端口是 80, https是 443,對應的還會增長數據包的概念,例如 seq 數據包傳輸序列,acq 收到消息回執等一系列報文內容

經常使用的協議 tcp, udp

應用層

應用層你們就特別熟悉了 以http示例,會增長自定義的報文內容了,好比host acept之類的request的請求頭,你們應該很清楚了

經常使用的協議: http https

https

咱們在前面看到http的傳輸都是明文傳輸,若是有個壞蛋在路由器中植入一段惡意程序,把你的「數據包取出來轉發給其餘網絡」那就很危險,爲了提升網絡安全性,引入https概念,爲了不http明文傳輸,https 在 傳輸層與應用層 增長了一層加密層 ssl,咱們看一下具體的實現,首先也科普一些基礎的https相關的知識

  • 加密算法,非對層加密算法 rsa , 由一個共鑰和私鑰組成,通常拿公鑰加密的數據包只能拿私鑰解開,舉個最簡單的加密例子,兩個足夠大的素數做爲公鑰,素數相乘的結果做爲私鑰,你拿着私鑰基本取不出公鑰,因式分解解不出來呀

  • 證書,證書的頒發通常來自一個負責發放和管理數字證書的權威機構,證書會以RSA將你的公鑰用它的私鑰加密起來,對應的你的操做系統裏已經集成了解密證書的公鑰,因此是權威機構頒發的證書,你是必定可以取到公鑰的

咱們具體看一下ssl層 握手的過程(ssl 層實現協議 tls)

Screen Shot 2020-02-10 at 12.58.54 PM.png

咱們來分析一下這個過程:

首先咱們的主機向目的主機發了一個client hello 包

這個包包含

Screen Shot 2020-02-10 at 1.02.07 PM.png

隨機數1 Random 以及 SSL Version 等信息 以後server向咱們源主機發了一個server hello Certificate 等包含信息的多個包

Screen Shot 2020-02-10 at 2.28.28 PM.png

其中 server hello 包含 第二個隨機數 Random2

Screen Shot 2020-02-10 at 2.37.24 PM.png

Certificate 爲服務端將本身的證書下發給客戶端,讓客戶端驗證本身的身份,客戶端驗證經過後取出證書中的公鑰

Screen Shot 2020-02-10 at 2.38.50 PM.png

Server Key Exchange DH算法,客戶端發送服務器使用的DH參數(DH 是對稱加密算法,劇透一下,DH 算法就是利用前面傳遞的Random隨機數生成對稱密鑰)

Screen Shot 2020-02-10 at 2.42.25 PM.png

Server Hello Done 通知客戶端 Server Hello 過程結束

Screen Shot 2020-02-10 at 2.45.36 PM.png

以後客戶端會發送服務端一個包含Client Key Exchange Change Cipher Spec等包含信息的多個包

Screen Shot 2020-02-10 at 2.52.44 PM.png

Client Key Exchange,其中Pubkey 爲客戶端生成的隨機數 Random3 用服務端傳送過來證書中的公鑰加密的,學術語叫Premaster key 感興趣的同窗能夠看看DH算法,服務端能夠用私鑰解密,至此服務端和客戶端都擁有 Random1 Random2 Random3了,能夠經過DH算法生成一個對稱的密鑰了

Screen Shot 2020-02-10 at 3.07.37 PM.png

Change Cipher Spec,其中客戶端通知服務端後面再發送的消息都會使用前面協商出來的密鑰加密了,是一條事件消息。

Screen Shot 2020-02-10 at 3.13.27 PM.png

Encrypted Handshake Message,其中客戶端發出第一條加密消息。服務端接收後會用密鑰解密,能解出來講明前面協商出來的密鑰是一致的

Screen Shot 2020-02-10 at 3.15.17 PM.png

以後服務端會發送客戶端一個包含Change Cipher Spec Encrypted Handshake Message等包含信息的多個包

Screen Shot 2020-02-10 at 3.17.02 PM.png

Change Cipher Spec:這一步對應於以前的事件消息,服務端通知客戶端後面再發送的消息都會使用加密,也是一條事件消息

Encrypted Handshake Message:對一步對應於以前的加密消息,服務端發出第一條加密消息。客服端接收後會用密鑰解密,能解出來講明前面協商出來的密鑰是一致的

若是驗證失敗:斷開連接,握手失敗

經典tcp三次握手

最後提一下經典的tcp三次握手吧,有上面的分析經驗後,tcp相信相對來講就會很簡單了

Screen Shot 2020-02-10 at 3.51.30 PM.png

其中SYN 和 ACK 爲標誌位信息,標誌位一共有6種,經常使用的分別爲:

Screen Shot 2020-02-10 at 3.43.36 PM.png

  • SYN表示創建鏈接
  • FIN表示關閉鏈接
  • ACK表示響應
  • PSH表示有 DATA數據傳輸
  • RST表示鏈接重置

第一步:其中源主機向目的主機發起連接 標誌位 SYN 發送一個seq 0序列的包 第二步:目的主機向源主機發起連接 標誌位 SYN ACK ack = 0 + 1 發送一個seq 0序列的包 第三步:源主機發包 標誌位 ACK ack = 0 + 1

握手成功!!!

http2

http2 是 http的新型協議,具備報文頭部壓縮,多路複用的特色。

http 1協議是串行的,一個請求發起必須再上一個請求結束後才能發起,爲了提升效率,chrome 支持並行6個,即chrome 會開6個線程,分別作tcp 握手,數據傳輸,因爲咱們通常會打開請求頭的keep-live 因此這6個tcp連接不會斷開

http2 的多路複用則能夠併發多個請求,沒有以前6個的限制,來張圖對比

http1:

Screen Shot 2020-02-10 at 4.00.59 PM.png

http2:

Screen Shot 2020-02-10 at 4.01.05 PM.png

http2已經出來5年了,主流瀏覽器均已支持,看一下詳細狀況

Screen Shot 2020-02-10 at 4.04.19 PM.png

nginx 的修改也異常簡單:listen 443 ssl http2

若是nginx 不支持 http2 怎麼辦?別擔憂

Screen Shot 2020-02-10 at 4.22.03 PM.png

在ssl 那層握手的時候 client hello 的時候 會將h1和h2協議都帶上,會和nginx 「negotiate」

Screen Shot 2020-02-10 at 4.24.01 PM.png

上圖中的結果就是,咱們使用h1吧

和瀏覽器的結合

tcp 握手耗時是橘黃色的耗時,紫色是ssl 握手的耗時

Screen Shot 2020-02-10 at 4.27.17 PM.png

若是你想統計瀏覽器握手耗時的話,能夠藉助performance API

Screen Shot 2020-02-10 at 4.31.12 PM.png

time = requestStart - secureConnectionStart
複製代碼

把performance 的resource 挨個累加就行了

相關文章
相關標籤/搜索