題圖 By Clm From Bingphp
在http協議中這三個請求頭比較容易讓人產生混淆。
html
host比較容易理解，來看下MDN網站給的介紹：html5
Host 請求頭指明瞭服務器的域名（對於虛擬主機來講），以及（可選的）服務器監聽的TCP端口號。 node
若是沒有給定端口號，會自動使用被請求服務的默認端口（好比請求一個HTTP的URL會自動使用80端口）。 apache
HTTP/1.1 的全部請求報文中必須包含一個Host頭字段。若是一個 HTTP/1.1 請求缺乏 Host 頭字段或者設置了超過一個的 Host 頭字段，一個400（Bad Request）狀態碼會被返回。跨域
從上面的文字中能夠總結出以下信息：瀏覽器
一、host的值爲客戶端請求的服務器的域名（或者ip）和端口緩存
二、http/1.1中必須包含host請求頭，且只能設置一個；安全
那麼host主要用在什麼地方呢？服務器
host用的最多的場景是：單臺服務器設置多個虛擬主機時。
舉個簡單的例子： 我在IP地址爲127.0.0.1的服務器上，經過apache配置了兩個虛擬主機：a.com,b.com，這兩個域名經過DNS解析都會指向127.0.0.1，我在瀏覽器中訪問a.com的網站時，DNS將域名轉化爲IP地址，此時能夠經過客戶端請求頭的host信息判斷訪問的是服務器上對應的虛擬主機。
如圖：
若是沒有host請求頭，客戶端的請求就不能標記出該訪問哪一個虛擬主機了。
接着看一下MDN對referer的介紹：
Referer 首部包含了當前請求頁面的來源頁面的地址，即表示當前頁面是經過此來源頁面裏的連接進入的。服務端通常使用 Referer 首部識別訪問來源，可能會以此進行統計分析、日誌記錄以及緩存優化等。
須要注意的是 referer 其實是 "referrer" 誤拼寫。
在如下兩種狀況下，Referer 不會被髮送：
1.來源頁面採用的協議爲表示本地文件的 "file" 或者 "data" URI；
2.當前請求頁面採用的是非安全協議，而來源頁面採用的是安全協議（HTTPS）。
3.直接輸入網址或經過瀏覽器書籤訪問
4.使用 JavaScript 的 Location.href 或者是 Location.replace()
5.使用html5中noreferrer
<a href="/test/index.php?noreferer" rel="noreferrer" target="_blank">noreferrer</a>
<a href="/test/index.php?noreferer" rel="noreferrer" target="_blank">noreferrer</a>
6.使用 Referer Meta 標籤控制 referer 使用場景，具體參考以下文章：https://www.jb51.net/article/137982.htm
7.使用iframe的hack寫法去除referer。
這裏給你們舉一個例子，百度的圖片防盜鏈：
html代碼以下：
鼠標雙擊這張網頁直接打開，也就是file協議訪問，此時是不帶referer的，圖片是顯示的，如圖：
network如圖，此時沒有referer請求頭：
可是我將其發佈到服務器上，用http://127.0.0.1/a2.html來訪問，如圖：
圖片不顯示了，爲何呢？觀察請求頭，如圖：
多了一個referer的請求頭，請求頭標識了訪問這張圖片請求的源頭，請求源頭爲個人網站，百度圖片服務器根據這個請求頭判斷，而後將我攔截了。
那麼如何破解盜鏈呢，經常使用的是用一個服務器程序做爲代理爬蟲，服務器爬蟲能夠自由設置請求頭了，還有就是利用iframe的hack寫法了。這種寫法相似xss，那什麼是xss呢？這裏先不說，下期討論。
iframe去除referer的寫法以下，看代碼：
顯示結果如圖：
再看network如圖：
referer消失了。referer消失後，跳過了百度的防盜鏈。
最後是origin了，看一年MDN對其的介紹：
請求首部字段 Origin 指示了請求來自於哪一個站點。該字段僅指示服務器名稱，並不包含任何路徑信息。該首部用於 CORS 請求或者 POST 請求。除了不包含路徑信息，該字段與 Referer 首部字段類似。
能夠看到referer與origin功能類似，可是仍是有幾點不一樣，仔細看上面的介紹，總結以下幾點：
一、只有跨域請求，或者同域時發送post請求，纔會攜帶origin請求頭，而referer不論何種狀況下，只要瀏覽器能獲取到請求源都會攜帶，除了上面提到的幾種狀況。
二、若是瀏覽器不能獲取請求源，那麼origin知足上面狀況也會攜帶，不過其值爲null，如圖：
這點與referer不一樣，瀏覽器若是不能獲取請求源，那麼請求頭中不會攜帶referer。
三、origin的值只包括協議、域名和端口，而erferer不但包括協議、域名、端口還包括路徑，參數，注意不包括hash值。
以上即是host、referer、origin的區別了，固然還有其餘沒有提到，歡迎你們留言補充。
歡迎關注、轉發、或點擊好看
本文分享自微信公衆號 - nodejs全棧開發（geekclass）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。