referrer整理

在接入微信h5支付遇到了referrer爲空的問題以後，也看過不少博主整理的相關文檔，而後仍是本身簡單整理一下，加深一下理解。

1、簡單介紹

枯燥的概念

Referer 首部包含了當前請求頁面的來源頁面的地址，即表示當前頁面是經過此來源頁面裏的連接進入的。服務端通常使用 Referer 首部識別訪問來源，可能會以此進行統計分析、日誌記錄以及緩存優化等

比方說

在一個不火熱的旅遊景點（很優美沒有過分開發的那種）開了個客棧，有一個很無聊的老闆，當有遊客入住的時候，都會問 場景一：

• 無聊老闆: 我是廣東佛山那邊的，你是哪邊的？
• 遊客：我是肇慶的。
• 無聊老闆：咱們是一個省份的，哈哈哈。

場景二：

• 無聊老闆: 我是廣東佛山那邊的，你是哪邊的？
• 遊客：我是從東土大唐而來【內心os，廣東人吃胡建人】。
• 無聊老闆：哦哦【內心os，二般遊客】

2、正文

referrer 是否發送，在chrome默認的行爲裏面是會帶的（除了是新標籤直接訪問頁面），這樣會帶來一個問題

• 可能會暴露用戶的瀏覽歷史

那什麼狀況下不會帶這個信息？

1. 安全降級，例如 https -> http
2. 協議爲file，例如 file://xxx.html
3. 協議爲data，例如 <img src="data:" />
4. 主動配置

怎麼主動配置是否帶referer？

配置 referrer-policty

屬性值	描述
no-referrer	不發送referrer
no-referrer-when-downgrage	安全等級降級的時候不發，例如https->http
origin	只發送「源」
origin-when-cross-origin	非同源只發送「源」，同源訪問發送具體的url
same-origin	同源訪問發送具體url
strict-origin	同等安全等級的頁面訪問才發url
strict-origin-when-cross-origin	同等安全等級且同源的狀況下才發送url
unsafe-url	不管是同源請求仍是非同源請求都發送完整的url

配置的地方

1. 經過設置標籤，例如,a,area,img,iframe,script,link

例如：
<a href=「xxx.com」 referrerpolicy=「origin」 />

或者

<a href=「xxx.com」 rel=「noreferrer」 />  這個時候跳轉後，頁面http裏面的信息的referer就爲空
複製代碼

2. 配置 meta

<meta name=「referrer」 conent=「origin」 /> 這個時候，referer只會顯示origin

複製代碼

有什麼應用場景？

1.匿名

有時候匿名者不但願被知道本身的身份，會主動從http報文中刪除ua,ip,referer來保證私密性跟匿名性，

2.根據referer去作對應的處理

• 微信h5支付，在調起支付的時候，就會去驗證referer 是不是配置的安全域名
• b站點用到不少a站點的服務，兩個站點的host又是一致的，當有一天兩個站點的服務要獨立的時候，想要去整理b站點具體依賴到a站點哪些服務是很麻煩的，這個時候直接經過referer去區分就能夠直接得知了。

3.防護 CSRF（跨站請求僞造）

• 描述：跨站請求攻擊，簡單地說，是攻擊者經過一些技術手段欺騙用戶的瀏覽器去訪問一個本身曾經認證過的網站並運行一些操做（如發郵件，發消息，甚至財產操做如轉帳和購買商品）。因爲瀏覽器曾經認證過，因此被訪問的網站會認爲是真正的用戶操做而去運行
• 解決方式：檢查http headers referer 字段是否同源或者在白名單裏面。

4. 反爬蟲,no referrer 或者 非指定地址的referrer 訪問圖片資源的時候，統一按異常處理。

注意：看到上面其實有referer，也有referrer，referer 是錯誤的寫法，正確的寫法是referrer。http header 裏面仍是referer屬性，沒有修正。其餘的才修正了寫法。