HTTP Referer 教程
作者: 阮一峯
HTTP 請求的頭信息裏面,Referer
是一個常見字段,提供訪問來源的信息。
很多開發者知道這個字段,但是說不清它的具體細節。本文詳細介紹該字段。
一、Referer 的含義
現實生活中,購買服務或加入會員的時候,往往要求提供信息:"你從哪裏知道了我們?"
這叫做引薦人(referrer),誰引薦了你?對於公司來說,這是很有用的信息。
互聯網也是一樣,你不會無緣無故訪問一個網頁,總是有人告訴你,可以去那裏看看。服務器也想知道,你的 "引薦人" 是誰?
HTTP 協議在請求(request)的頭信息裏面,設計了一個Referer
字段,給出 "引薦網頁" 的 URL。
這個字段是可選的。客戶端發送請求的時候,自主決定是否加上該字段。
很有趣的是,這個字段的拼寫是錯的。Referer
的正確拼寫是Referrer
,但是寫入標準的時候,不知爲何,沒人發現少了一個字母r
。標準定案以後,只能將錯就錯,所有頭信息的該字段都一律錯誤拼寫成Referer
。
二、Referer 的發生場景
瀏覽器向服務器請求資源的時候,Referer
字段的邏輯是這樣的,用戶在地址欄輸入網址,或者選中瀏覽器書籤,就不發送Referer
字段。
主要是以下三種場景,會發送Referer
字段。
(1)用戶點擊網頁上的鏈接。
(2)用戶發送表單。
(3)網頁加載靜態資源,比如加載圖片、腳本、樣式。
<!-- 加載圖片 --> <img src="foo.jpg"> <!-- 加載腳本 --> <script src="foo.js"></script> <!-- 加載樣式 --> <link href="foo.css" rel="stylesheet">
上面這些場景,瀏覽器都會將當前網址作爲Referer
字段,放在 HTTP 請求的頭信息發送。
瀏覽器的 JavaScript 引擎提供document.referrer
屬性,可以查看當前頁面的引薦來源。注意,這裏採用的是正確拼寫。
三、Referer 的作用
Referer
字段實際上告訴了服務器,用戶在訪問當前資源之前的位置。這往往可以用來用戶跟蹤。
一個典型的應用是,有些網站不允許圖片外鏈,只有自家的網站才能顯示圖片,外部網站加載圖片就會報錯。它的實現就是基於Referer
字段,如果該字段的網址是自家網址,就放行。
由於涉及隱私,很多時候不適合發送Referer
字段。
這裏舉兩個例子,都不適合暴露 URL。一個是功能 URL,即有的 URL 不要登錄,可以訪問,就能直接完成密碼重置、郵件退訂等功能。另一個是內網 URL,不希望外部用戶知道內網有這樣的地址。Referer
字段很可能把這些 URL 暴露出去。
此外,還有一種特殊情況,需要定製Referer
字段。比如社交網站上,用戶在對話中提到某個網址。這時,不希望暴露用戶所在的原始網址,但是可以暴露社交網站的域名,讓對方知道,是我貢獻了你的流量。
四、rel
屬性
由於上一節的原因,瀏覽器提供一系列手段,允許改變默認的Referer
行爲。
對於用戶來說,可以改變瀏覽器本身的全局設置,也可以安裝瀏覽器擴展。這裏就不詳細介紹了。
對於開發者來說,rel="noreferrer"
屬性是最簡單的一種方法。<a>
、<area>
和<form>
三個標籤可以使用這個屬性,一旦使用,該元素就不會發送Referer
字段。
<a href="..." rel="noreferrer" target="_blank">xxx</a>
上面鏈接點擊產生的 HTTP 請求,不會帶有Referer
字段。
注意,rel="noreferrer"
採用的是正確的拼寫。
五、Referrer Policy 的值
rel
屬性只能定製單個元素的Referer
行爲,而且選擇比較少,只能發送或不發送。W3C 爲此制定了更強大的 Referrer Policy。
Referrer Policy 可以設定 8 個值。
(1)no-referrer
不發送
Referer
字段。(2)no-referrer-when-downgrade
如果從 HTTPS 網址鏈接到 HTTP 網址,不發送
Referer
字段,其他情況發送(包括 HTTP 網址鏈接到 HTTP 網址)。這是瀏覽器的默認行爲。(3)same-origin
鏈接到同源網址(協議 + 域名 + 端口 都相同)時發送,否則不發送。注意,
https://foo.com
鏈接到http://foo.com
也屬於跨域。(4)origin
Referer
字段一律只發送源信息(協議 + 域名 + 端口),不管是否跨域。(5)strict-origin
如果從 HTTPS 網址鏈接到 HTTP 網址,不發送
Referer
字段,其他情況只發送源信息。(6)origin-when-cross-origin
同源時,發送完整的
Referer
字段,跨域時發送源信息。(7)strict-origin-when-cross-origin
同源時,發送完整的
Referer
字段;跨域時,如果 HTTPS 網址鏈接到 HTTP 網址,不發送Referer
字段,否則發送源信息。(8)unsafe-url
Referer
字段包含源信息、路徑和查詢字符串,不包含錨點、用戶名和密碼。
六、Referrer Policy 的用法
Referrer Policy 有多種使用方法。
(1)HTTP 頭信息
服務器發送網頁的時候,通過 HTTP 頭信息的Referrer-Policy
告訴瀏覽器。
Referrer-Policy: origin
(2)<meta>
標籤
也可以使用<meta>
標籤,在網頁頭部設置。
<meta >
(3)referrerpolicy
屬性
<a>
、<area>
、<img>
、<iframe>
和<link>
標籤,可以設置referrerpolicy
屬性。
<a href="..." referrerpolicy="origin" target="_blank">xxx</a>
七、退出頁面重定向
還有一種比較老式的技巧,但是非常有效,可以隱藏掉原始網址,谷歌和 Facebook 都在使用這種方法。
鏈接的時候,不要直接跳轉,而是通過一個重定向網址,就像下面這樣。
<a href="/exit.php?url=http%3A%2F%2Fexample.com">Example.com</a>
上面網址中,先跳轉到/exit.php
,然後再跳轉到目標網址。這時,Referer
字段就不會包含原始網址。
本文由 Readfog 進行 AMP 轉碼,版權歸原作者所有。
來源:http://www.ruanyifeng.com/blog/2019/06/http-referer.html