使用referer

Referer是HTTP請(qǐng)求頭的一個(gè)字段，包含了當(dāng)前請(qǐng)求頁面的來源頁面的地址，通過該字段，我們可以檢測(cè)訪客是從哪里來的。

那么，referer到底有啥作用呢？

交互優(yōu)化

在某些web應(yīng)用的交互中，右上角會(huì)提供一個(gè)返回按鈕，方便用戶返回上一頁

其實(shí)現(xiàn)一般也比較簡(jiǎn)單

<a href="javascript: history.back();"></a>

這種處理方式隱藏的一個(gè)問題是：如果用戶從其他入口如分享鏈接等地方直接進(jìn)來時(shí)，點(diǎn)擊這個(gè)按鈕是無法返回。

因此在點(diǎn)擊按鈕時(shí)，我們可以判斷document.referrer是否存在來優(yōu)化交互：如果存在，則返回上一頁；如果不存在，則直接返回首頁。

應(yīng)該注意到上面寫的是referer，而在DOM中，使用的是referrer，這是因此請(qǐng)求頭中的referer是由于歷史原因?qū)е碌钠磳戝e(cuò)誤，而在DOM規(guī)范中進(jìn)行了修正，因此導(dǎo)致當(dāng)前拼法并不統(tǒng)一的問題~

防盜鏈

當(dāng)用戶訪問網(wǎng)頁時(shí)，referer就是前一個(gè)網(wǎng)頁的URL；如果是圖片的話，通常指的就是圖片所在的網(wǎng)頁。當(dāng)瀏覽器向服務(wù)器發(fā)送請(qǐng)求時(shí)，referer就自動(dòng)攜帶在HTTP請(qǐng)求頭了。

一個(gè)HTML頁面往往包含多種資源，這些資源通過標(biāo)簽如script、img、link等形式嵌套在HTML文檔中，一個(gè)完整頁面往往需要經(jīng)過發(fā)送多條HTTP請(qǐng)求下載資源，然后才能正常展示。由于HTML本身并沒有對(duì)嵌套資源的來源做限制，基于這樣的機(jī)制，盜鏈就成為了一種手段。

下面是關(guān)于盜鏈的百度百科定義

盜鏈?zhǔn)侵阜?wù)提供商自己不提供服務(wù)的內(nèi)容，通過技術(shù)手段繞過其它有利益的最終用戶界面（如廣告），直接在自己的網(wǎng)站上向最終用戶提供其它服務(wù)提供商的服務(wù)內(nèi)容，騙取最終用戶的瀏覽和點(diǎn)擊率。受益者不提供資源或提供很少的資源，而真正的服務(wù)提供商卻得不到任何的收益。

打個(gè)比方：A網(wǎng)站將自己的靜態(tài)資源如圖片或視頻等存放在服務(wù)器上。B網(wǎng)站在未經(jīng)A允許的情況下，使用A網(wǎng)站的圖片或視頻資源，放置到自己的網(wǎng)站中。由于服務(wù)器資源是需要花錢的，這樣網(wǎng)站B盜取了網(wǎng)站A的空間和流量，而A沒有獲取任何利益卻承擔(dān)了資源使用費(fèi)。B盜用A資源放到自己網(wǎng)站的行為即為盜鏈。

防盜鏈一般由下面幾種方式

• 定期修改文件名稱或路徑

• 通過referer，限制資源引用頁的來源

• 通過cookie、session等進(jìn)行身份認(rèn)證

• 圖片加水印等

這里我們主要關(guān)注一下referer的防盜鏈的原理。下面是nginx的防盜鏈配置

 location ~* \.(gif|jpg|png)$ {
    valid_referers none blocked *.phptest.com;
    if ($invalid_referer) {
        return 403;
    }
}

這種方法是在server或者location段中加入：valid_referers。這個(gè)指令在referer頭的基礎(chǔ)上為 $invalid_referer 變量賦值，其值為0或1。如果valid_referers列表中沒有Referer頭的值， $invalid_referer將被設(shè)置為1。

該指令支持none和blocked，

• 其中none表示空的來路，也就是直接訪問，比如直接在瀏覽器打開一個(gè)文件，

• blocked表示被防火墻標(biāo)記過的來路，*..com表示所有子域名。

通過referer，我們可以判斷請(qǐng)求的來源，從而決定服務(wù)器是否正常返回請(qǐng)求資源，達(dá)到控制請(qǐng)求的目的。

需要注意的是，在某些情況下，即使用戶是正常訪問網(wǎng)頁或圖片，也是不會(huì)攜帶referer的，比如直接在瀏覽器地址欄直接輸入資源URL，或通過瀏覽器新窗口打開頁面等。這種訪問是正常的，如果強(qiáng)制現(xiàn)在某些白名單referer名單才能訪問資源，則可能誤傷這一部分正常用戶，這也是為什么有的防盜鏈檢測(cè)中允許Referer頭部為空通過檢測(cè)的情況。

既然如此，如果把referer隱藏掉，也可以繞開部分站點(diǎn)防盜鏈的限制，下面讓我們來看看如何實(shí)現(xiàn)隱藏referer的功能。

隱藏referer

參考

• html禁用referer

• 以Referer方案寫一個(gè)圖片防盜鏈服務(wù)并實(shí)現(xiàn)網(wǎng)頁端"破解"

在利用部分站點(diǎn)防盜鏈限制允許referer為空，或者我們僅僅是不想讓服務(wù)器知道訪問來源時(shí)，我們可以隱藏referer。

referrerPolicy

之前瀏覽器在請(qǐng)求資源時(shí)，會(huì)按自己的默認(rèn)規(guī)則來決定是否加上Referrer。后來W3C發(fā)布了Referrer-Policy草案，運(yùn)行開發(fā)者靈活地控制自己網(wǎng)站的referer策略。主要包含下面策略

• no-referrer：任何情況下都不發(fā)送 Referrer 信息；

• no-referrer-when-downgrade （默認(rèn)值）：在沒有指定任何策略的情況下瀏覽器的默認(rèn)行為

• origin：在任何情況下，僅發(fā)送文件的源作為引用地址

• origin-when-cross-origin： 對(duì)于同源的請(qǐng)求，會(huì)發(fā)送完整的URL作為引用地址，但是對(duì)于非同源請(qǐng)求僅發(fā)送文件的源。

• same-origin：對(duì)于同源的請(qǐng)求會(huì)發(fā)送引用地址，但是對(duì)于非同源請(qǐng)求則不發(fā)送引用地址信息。

上面只列舉了一部分可選策略，詳情可參考MDN文檔。

因此，我們可以手動(dòng)指定no-referrer來隱藏referer

<!-- phptest2.com是我本地的一個(gè)測(cè)試域名, 下同 -->
<img src="http://phptest2.com/upload/1.png" width="200" referrerPolicy="no-referrer" alt="">

或者在創(chuàng)建image對(duì)象的時(shí)候，指定referrerPolicy策略

const img = new Image()
img.referrerPolicy = 'no-referrer'

此時(shí)打開開發(fā)者工具就可以看見該圖片的請(qǐng)求已經(jīng)不再攜帶對(duì)應(yīng)的referer了。總結(jié)一下，一般有下面幾種設(shè)置Referer策略的方式：

• 通過 http 響應(yīng)頭中的 Referrer-Policy 字段

• 通過 meta 標(biāo)簽，name 為 referrer

• 通過a、area、img、iframe、link元素的 referrerpolicy 屬性。

• 通過a、area、link元素的 rel=noreferrer 屬性。

需要注意的是目前referrerPolicy仍處于提案的草稿階段，瀏覽器兼容性并不是特別好。

作者：橙紅年代
鏈接：https://juejin.cn/post/6844903892170309640
來源：稀土掘金
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。