使用referer
Referer是HTTP請求頭的一個字段，包含了當前請求頁面的來源頁面的地址，通過該字段，我們可以檢測訪客是從哪里來的。
那么，referer到底有啥作用呢？
交互優化
在某些web應用的交互中，右上角會提供一個返回按鈕，方便用戶返回上一頁
其實現一般也比較簡單
<a href="javascript: history.back();"></a>
這種處理方式隱藏的一個問題是：如果用戶從其他入口如分享鏈接等地方直接進來時，點擊這個按鈕是無法返回。
因此在點擊按鈕時，我們可以判斷document.referrer是否存在來優化交互：如果存在，則返回上一頁；如果不存在，則直接返回首頁。
應該注意到上面寫的是referer，而在DOM中，使用的是referrer，這是因此請求頭中的referer是由于歷史原因導致的拼寫錯誤，而在DOM規范中進行了修正，因此導致當前拼法并不統一的問題~
防盜鏈
當用戶訪問網頁時，referer就是前一個網頁的URL；如果是圖片的話，通常指的就是圖片所在的網頁。當瀏覽器向服務器發送請求時，referer就自動攜帶在HTTP請求頭了。
一個HTML頁面往往包含多種資源，這些資源通過標簽如script、img、link等形式嵌套在HTML文檔中，一個完整頁面往往需要經過發送多條HTTP請求下載資源，然后才能正常展示。由于HTML本身并沒有對嵌套資源的來源做限制，基于這樣的機制，盜鏈就成為了一種手段。
下面是關于盜鏈的百度百科定義
盜鏈是指服務提供商自己不提供服務的內容，通過技術手段繞過其它有利益的最終用戶界面（如廣告），直接在自己的網站上向最終用戶提供其它服務提供商的服務內容，騙取最終用戶的瀏覽和點擊率。受益者不提供資源或提供很少的資源，而真正的服務提供商卻得不到任何的收益。
打個比方：A網站將自己的靜態資源如圖片或視頻等存放在服務器上。B網站在未經A允許的情況下，使用A網站的圖片或視頻資源，放置到自己的網站中。由于服務器資源是需要花錢的，這樣網站B盜取了網站A的空間和流量，而A沒有獲取任何利益卻承擔了資源使用費。B盜用A資源放到自己網站的行為即為盜鏈。
防盜鏈一般由下面幾種方式
定期修改文件名稱或路徑
通過referer，限制資源引用頁的來源
通過cookie、session等進行身份認證
圖片加水印等
這里我們主要關注一下referer的防盜鏈的原理。下面是nginx的防盜鏈配置
location ~* \.(gif|jpg|png)$ {
valid_referers none blocked *.phptest.com;
if ($invalid_referer) {
return 403;
}
}
這種方法是在server或者location段中加入：valid_referers。這個指令在referer頭的基礎上為 $invalid_referer 變量賦值，其值為0或1。如果valid_referers列表中沒有Referer頭的值， $invalid_referer將被設置為1。
該指令支持none和blocked，
通過referer，我們可以判斷請求的來源，從而決定服務器是否正常返回請求資源，達到控制請求的目的。
需要注意的是，在某些情況下，即使用戶是正常訪問網頁或圖片，也是不會攜帶referer的，比如直接在瀏覽器地址欄直接輸入資源URL，或通過瀏覽器新窗口打開頁面等。這種訪問是正常的，如果強制現在某些白名單referer名單才能訪問資源，則可能誤傷這一部分正常用戶，這也是為什么有的防盜鏈檢測中允許Referer頭部為空通過檢測的情況。
既然如此，如果把referer隱藏掉，也可以繞開部分站點防盜鏈的限制，下面讓我們來看看如何實現隱藏referer的功能。
隱藏referer
參考
在利用部分站點防盜鏈限制允許referer為空，或者我們僅僅是不想讓服務器知道訪問來源時，我們可以隱藏referer。
referrerPolicy
之前瀏覽器在請求資源時，會按自己的默認規則來決定是否加上Referrer。后來W3C發布了Referrer-Policy草案，運行開發者靈活地控制自己網站的referer策略。主要包含下面策略
no-referrer：任何情況下都不發送 Referrer 信息；
no-referrer-when-downgrade （默認值）：在沒有指定任何策略的情況下瀏覽器的默認行為
origin：在任何情況下，僅發送文件的源作為引用地址
origin-when-cross-origin： 對于同源的請求，會發送完整的URL作為引用地址，但是對于非同源請求僅發送文件的源。
same-origin：對于同源的請求會發送引用地址，但是對于非同源請求則不發送引用地址信息。
上面只列舉了一部分可選策略，詳情可參考MDN文檔。
因此，我們可以手動指定no-referrer來隱藏referer
<!-- phptest2.com是我本地的一個測試域名, 下同 -->
<img src="http://phptest2.com/upload/1.png" width="200" referrerPolicy="no-referrer" alt="">
或者在創建image對象的時候，指定referrerPolicy策略
const img = new Image()
img.referrerPolicy = 'no-referrer'
此時打開開發者工具就可以看見該圖片的請求已經不再攜帶對應的referer了。總結一下，一般有下面幾種設置Referer策略的方式：
通過 http 響應頭中的 Referrer-Policy 字段
通過 meta 標簽，name 為 referrer
通過a、area、img、iframe、link元素的 referrerpolicy 屬性。
通過a、area、link元素的 rel=noreferrer 屬性。
需要注意的是目前referrerPolicy仍處于提案的草稿階段，瀏覽器兼容性并不是特別好。
作者：橙紅年代
鏈接：https://juejin.cn/post/6844903892170309640
來源：稀土掘金
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。
該文章在 2024/4/23 16:25:22 編輯過
400 186 1886
