了解HTTP Referer

是什麼

HTTP 請求的頭資訊裡面，

Referer

 是一個常見字段，提供通路來源的資訊。

Referer 的發生場景

浏覽器向伺服器請求資源的時候，

Referer

字段的邏輯是這樣的，使用者在位址欄輸入網址，或者選中浏覽器書簽，就不發送

Referer

字段。

主要是以下三種場景，會發送

Referer

字段。

（1）使用者點選網頁上的連結。

（2）使用者發送表單。

（3）網頁加載靜态資源，比如加載圖檔、腳本、樣式。

<!-- 加載圖檔 -->
<img src="foo.jpg">
<!-- 加載腳本 -->
<script src="foo.js"></script>
<!-- 加載樣式 -->
<link href="foo.css" target="_blank" rel="external nofollow"  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="..." target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  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 name="referrer" content="origin">
           

（3）

referrerpolicy

屬性

<a>

、

<area>

、

<img>

、

<iframe>

和

<link>

标簽，可以設定

referrerpolicy

 屬性。

<a href="..." target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  referrerpolicy="origin" target="_blank">xxx</a>
           

退出頁面重定向

還有一種比較老式的技巧，但是非常有效，可以隐藏掉原始網址，谷歌和 Facebook 都在使用這種方法。

連結的時候，不要直接跳轉，而是通過一個重定向網址，就像下面這樣。

<a  href="/exit.php?url=http%3A%2F%2Fexample.com" target="_blank" rel="external nofollow" >Example.com</a>
           

上面網址中，先跳轉到

/exit.php

，然後再跳轉到目标網址。這時，

Referer

字段就不會包含原始網址。