使用referer
Referer是HTTP請求頭的一個(gè)字段，包含了當(dāng)前請求頁面的來源頁面的地址，通過該字段，我們可以檢測訪客是從哪里來的。
那么，referer到底有啥作用呢？
交互優(yōu)化
在某些web應(yīng)用的交互中，右上角會提供一個(gè)返回按鈕，方便用戶返回上一頁
其實(shí)現(xià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，這是因此請求頭中的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ā)送請求時(shí)，referer就自動攜帶在HTTP請求頭了。
一個(gè)HTML頁面往往包含多種資源，這些資源通過標(biāo)簽如script、img、link等形式嵌套在HTML文檔中，一個(gè)完整頁面往往需要經(jīng)過發(fā)送多條HTTP請求下載資源，然后才能正常展示。由于HTML本身并沒有對嵌套資源的來源做限制，基于這樣的機(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)站的行為即為盜鏈。
防盜鏈一般由下面幾種方式
這里我們主要關(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，
通過referer，我們可以判斷請求的來源，從而決定服務(wù)器是否正常返回請求資源，達(dá)到控制請求的目的。
需要注意的是，在某些情況下，即使用戶是正常訪問網(wǎng)頁或圖片，也是不會攜帶referer的，比如直接在瀏覽器地址欄直接輸入資源URL，或通過瀏覽器新窗口打開頁面等。這種訪問是正常的，如果強(qiáng)制現(xiàn)在某些白名單referer名單才能訪問資源，則可能誤傷這一部分正常用戶，這也是為什么有的防盜鏈檢測中允許Referer頭部為空通過檢測的情況。
既然如此，如果把referer隱藏掉，也可以繞開部分站點(diǎn)防盜鏈的限制，下面讓我們來看看如何實(shí)現(xiàn)隱藏referer的功能。
隱藏referer
參考
在利用部分站點(diǎn)防盜鏈限制允許referer為空，或者我們僅僅是不想讓服務(wù)器知道訪問來源時(shí)，我們可以隱藏referer。
referrerPolicy
之前瀏覽器在請求資源時(shí)，會按自己的默認(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： 對于同源的請求，會發(fā)送完整的URL作為引用地址，但是對于非同源請求僅發(fā)送文件的源。
same-origin：對于同源的請求會發(fā)送引用地址，但是對于非同源請求則不發(fā)送引用地址信息。
上面只列舉了一部分可選策略，詳情可參考MDN文檔。
因此，我們可以手動指定no-referrer來隱藏referer
<!-- phptest2.com是我本地的一個(gè)測試域名, 下同 -->
<img src="http://phptest2.com/upload/1.png" width="200" referrerPolicy="no-referrer" alt="">
或者在創(chuàng)建image對象的時(shí)候，指定referrerPolicy策略
const img = new Image()
img.referrerPolicy = 'no-referrer'
此時(shí)打開開發(fā)者工具就可以看見該圖片的請求已經(jīng)不再攜帶對應(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)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。
該文章在 2024/4/23 16:25:22 編輯過
400 186 1886
