01 Web通訊
這個部分重點介紹瀏覽器與Web伺服器的詳細通訊過程。
01-00 URL協議
只要上網訪問伺服器,就離不開URL。
URL是什麼?
URL就是我們在瀏覽器裡輸入的站點連結。又叫做“統一資源定位符”(Uniform Resource Locator)。
URL支援很多協議,比如HTTP、FTP等等。
PS:HTTP和URL有何區別?
答:(來源(https://www.jianshu.com/p/4fb712c05b63)
HTTP:(Hypertext transfer protocol)超文字傳輸協議,是用於從全球資訊網(WWW:World Wide Web)伺服器傳輸超文字到本地瀏覽器的傳送協議。
URL:(Uniform Resource Locator)統一資源定位符,對可以從網際網路上得到的資源的位置和訪問方法的一種簡潔的表示,是網際網路上標準資源的地址。
URL的作用就是定位伺服器的資源。
那如何才能定位到網站(伺服器)的資源呢?
我們來設想一下:我們在網上購買的東西是如何寄到我們手上的呢?
我們提供了我們的收貨地址。
在Web的世界中,URL就充當了收貨地址的角色。
瀏覽器通過URL,可以定位到伺服器的資源,然後將伺服器的資源展示給我們。
這個“收貨地址”有一定的格式:
schema://host[:port#]/path/.../[?query-string] [#anchor]
schema:底層協議如http、https、ftp等;
host:伺服器的域名或者IP地址;
:port# : 伺服器埠,HTTP預設埠是80(可以省略),其他埠需要指明;
/path: 訪問資源的路徑;
?query-string: 傳送給伺服器的資料;
#anchor: 錨;通常表示在頁面的特定位置。
所有的URL都遵循這個URL標準。
URL例項
http://dun.163.com/sj/test/test.jsp?name=sviergn&x=true#stuff
逐一解析:
schema:http協議;
host:dun.163.com;沒有指明埠,預設80
/path:/sj/test/test.jsp,訪問資源的路徑;
?query-string:?name=sviergn&x=true;
anchor:#stuff
這一部分需要常憶常用。
01-01 HTTP協議
HTTP就是Web通訊時使用的協議,也是Web建立的基礎;是網路上應用最廣的一種協議。
什麼是HTTP?
又稱超文字傳輸協議;Hyper Text Transfer Protocol;
為了瞭解這一協議的過程,我們設想一下快遞小哥的工作:
快遞小哥首先通過貨車派送貨物,當貨物送到我們的收貨地址的時候,快遞小哥就會打電話聯絡我們,說是某某公司的快遞員,要我們來取件。
如果要讓快遞小哥送進小區裡面,我們就需要告訴物業准許他進入,相當於給他頒了個通行證;
當快遞小哥將貨物送到我們手上,我們需要簽收,快遞小哥拿到快遞單,就完成了一次快遞任務。
HTTP協議類似。
瀏覽器:快遞小哥
快遞小哥通過貨車送貨:瀏覽器通過Get方式傳送請求。
HTTP中的Host就相當於“收件人地址”;
User-Agent就相當於快遞小哥所處的公司;
HTTP包含的Cookie就相當於能夠進入我們小區的憑證。
當伺服器收到瀏覽器的HTTP請求後,會返回一個狀態碼(對應收到這個事實)和相應內容(對應已簽收的字據)。狀態碼為200表示正常收到(狀態碼可以在上文中/前一篇的開發者工具的網路中檢視)
可以看到HTTP協議的請求和響應包含了一些特殊的屬性,包含方式、User-Agent、Host、返回的狀態碼等等;
這些都屬於HTTP的報文。
什麼是HTTP的報文?
分為三部分:起始行、頭、身體
左邊,是瀏覽器傳送的HTTP請求報文,右邊是伺服器返回的HTTP請求報文;
-
左側
-
第一行:請求行Request Line
-
之後:是我們的頭部Headers;
-
下面:應該是我們的資料體,但由於是GET請求,沒有資料體
-
注意頭部和資料體之間是有一個空行的。
-
-
右側
-
第一行:狀態行;
-
比如:HTTP/1.1 200 OK
-
-
頭部
-
主體:也就是響應的正文
-
注意響應的頭部和主題之間也是有一行空行的。
-
HTTP請求示例
比如一個發帖的HTTP請求
當我們進行發帖的時候,我們的請求報文和響應報文如下:
-
請求
-
第一行:請求行
-
這裡是POST
-
-
Headers
-
相較於上面,多了一個Cookie欄位,就是前面提到的使用者憑證,相當於告訴伺服器,是我發的這個帖子。
-
黑客就比較喜歡獲取這個Cookie憑證,如果獲取,就擁有了“我”的憑證,可以以“我”的身份發帖。
-
後面會接觸一些這方面的安全漏洞。
-
-
也有了資料體
-
就是要釋出的帖子的相關內容
-
-
HTTP請求的其他方法
-
HEAD
-
與GET請求類似,不同是隻返回HTTP的頭部資訊,沒有資料體,也就沒有頁面內容。
-
-
PUT
-
上傳指定的URL描述
-
-
DELETE
-
刪除指定資源
-
-
OPTIONS
-
返回伺服器支援的HTTP方法
-
01-02 HTTP頭的Referer
這是除了HTTP請求方式和Cookie的概念外,另一個重要概念。
Referer就是告訴伺服器,我們從什麼地方來(即告訴物業我們是哪個快遞公司的);
舉例:
我們通過https://m.study.163.com/直接跳轉到頁面。和從bing主頁搜尋雲課堂再進入,開發者工具中顯示的HTTP請求是不同的,後者會多一個Referer頭,表示是從bing的這個連結來的。
如圖;圖一是直接跳轉;圖二是搜尋跳轉;
直接跳轉Rerfer
搜尋跳轉的Rerfer與之不同。
所以由於Referer可以告訴伺服器該次請求的來源,所以很多Web伺服器會通過Referer來進行統計(比如CNZZ、百度統計)
從安全的角度來講,Referer還可以用來判斷來源是否合法。
(比如:
-
防止盜鏈
-
比如一些網站不想被盜用內容或惡意引用,就會通過Referer限制來者
-
-
防止CSRF漏洞
-
(暫不瞭解
-
01-03 HTTP狀態碼
302 --跳轉
比如:在響應報文的狀態行(第一行)
HTTP/1.1 302 Moved Temporarily
在跳轉同時,還會在響應報文的Headers部分有一個Location欄位,是跳轉到的URL地址,也就是這個響應報文告訴我們,我們需要跳轉到Location中的URL地址。
除了這兩處,還會有Set-Cookie欄位,作用是Web伺服器向我們的瀏覽器頒發憑證,比如我們通過使用者名稱密碼登入成功後,Web伺服器通常就會給我們頒發一個憑證。
類似的是301。
除此之外,還包括10x,20x,30x,40x,50x;每個狀態碼都代表不同的意思。
分類 | 分類描述 |
---|---|
10x | 資訊,伺服器收到請求,需要請求者繼續執行操作 |
20x | 成功,操作被成功接收並處理 |
30x | 重定向,需要進一步的操作以完成請求 |
40x | 客戶端錯誤,請求包含語法錯誤或無法完成請求 |
50x | 伺服器錯誤,伺服器在處理請求的過程中發生了錯誤 |
具體的狀態碼可以到後面再學習,或用到檢視。
01-04 例項演示
我們開啟Edge瀏覽器,輸入https://www.cnblogs.com/Roboduster
我們用F12開啟開發者工具,進入“網路”,重新整理一下,檢視“文件”,選中head頭,可以看到有請求頭、響應頭,點選就可以看原始碼,有一些是上面講過的,還有些欄位是不熟悉的。這些欄位可以自行查閱。
除了HEADER外,我們可以看一看響應的具體內容,在左側的“響應”中;Cookie中有請求的Cookie等等。