HTTP Referer 和 Referrer Policy

1、 referer是什麼

referer：引用頁。HTTP請求頭信息中，referer用於提供訪問來源的信息，客戶端發送請求的時候，自主決定是否加上該字段。服務器通常使用referer識別訪問來源，可能以此進行統計分析、日誌記錄以及緩存優化等。
該字段的正確拼寫是referrer.

2、 referer的應用

1. 圖片防盜：只有自家網站才能顯示圖片資源，外部網站加載圖片報錯，就能夠基於referer字段去實現
2. 流量記錄: 好比在不一樣網站投放了廣告，想知道哪一個網站對本身的流量貢獻最大，能夠經過referer作統計，不但願暴露用戶所在的原始網址，能夠只暴露域名。

3、 referer Policy 和 referer

referer攜帶什麼是由referer Policy決定的

（1）no-referrer-when-downgrade（瀏覽器默認）

若是從 HTTPS 網址連接到 HTTP 網址，不發送Referer字段，其餘狀況發送（包括 HTTP 網址連接到 HTTP 網址）。這是瀏覽器的默認行爲。

（2）no-referrer

不發送Referer字段。

（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字段包含源信息、路徑和查詢字符串，不包含錨點、用戶名和密碼。

4、 設置referer policy

(1) <meta>標籤

<meta name="referrer" content="origin">

let meta = document.createElement('meta');
meta.setAttribute('name', 'referrer');
meta.setAttribute('content', 'origin');
document.head.appendChild(meta);

這種作法會做用於全部的請求

(2) referrerpolicy屬性

<a>、<area>、<img>、<iframe>和<link>標籤，能夠設置referrerpolicy 屬性。

只做用於當前請求，可用於圖片反防盜鏈