Web 頁面 Meta 的 Referrer Policy

一個圖片，本站或者外站，都要想辦法拿到

前言介紹

近期在一個項目中，須要引用大量外部網站的圖片，竟意外的發如今生成環境中沒有問題，但在本地的開發環境下，有部分圖片沒法顯示。因而就開啓了跨域圖片顯示的鬥爭中。

名詞解釋

什麼是引用策略（Referrer Policy）？引用策略就是從一個文檔發出請求時，是否在請求頭部定義 Referrer 的設置。

目前不少網站的防盜鏈機制都是用頭部定義 Referrer 來判斷是不是盜鏈。其實這個很容易破解，本身在請求時加上 Referrer 頭部就行。

在哪些狀況下會設置引用頭呢？通常來講，加載一個 HTML 頁面以後，本 HTML 頁面裏的 JavaScript 文件，CSS 文件，畫面文件都會設置 Referrer。而後，點擊這個 HTML 頁面裏的連接，跳轉其它畫面時，也會設置 Referrer。

Referrer Policy 的值

1. 空字符串
2. no-referrer
3. no-referrer-when-downgrade
4. same-origin
5. origin
6. strict-origin
7. origin-when-cross-origin
8. strict-origin-when-cross-origin
9. unsafe-url

空字符串

默認值：通常瀏覽器的默認值是 no-referrer-when-downgrade

no-referrer

全部請求不發送 referrer。

no-referrer-when-downgrade

當請求安全級別降低時不發送 referrer。目前，只有一種狀況會發生安全級別降低，即從 HTTPS 到 HTTP。HTTPS 到 HTTP 的資源引用和連接跳轉都不會發送 referrer。

same-origin

對於同源的連接和引用，會發送referrer，其餘的不會。

同源的意思是指同一個域名且同一協議。

若是設置成 same-origin，那麼 aaa.com 引用 bbb.com 的資源，不會發送 referrer。子域名也不是同一個域名，aaa.com 引用 test.aaa.com 的資源，不會發送 referrer。

origin

會發送 referrer，但只會發送源信息。源信息包括訪問協議和域名。

strict-origin

這個至關於 origin 和 no-referrer-when-downgrade 的 AND 合體。即在安全級別降低時不發送 referrer；安全級別未降低時發送源信息。

注意：這個是新加的標準，有些瀏覽器可能還不支持。

origin-when-cross-origin

這個至關於 origin 和 same-origin 的 OR 合體。同源的連接和引用，會發送徹底的 referrer 信息；但非同源連接和引用時，只發送源信息。

strict-origin-when-cross-origin

這個比較複雜，同源的連接和引用，會發送 referrer。安全級別降低時不發送 referrer。其它狀況下發送源信息。

注意：這個是新加的標準，有些瀏覽器可能還不支持。

unsafe-url

不管是否發生協議降級，不管是本站連接仍是站外連接，通通都發送 Referrer 信息。正如其名，這是最寬鬆而最不安全的策略。

Referrer Policy 的設置方法

咱們能夠用如下方法來設置引用策略（Referrer Policy）。

• 經過 http 響應頭中的 Referrer-Policy 字段
• 經過 meta 標籤，name 爲 referrer
• 經過<a>、<area>、<img>、<iframe>、<link>元素的 referrerpolicy 屬性。
• 經過<a>、<area>、<link>元素的 rel=noreferrer 屬性。

經過 http 響應頭中的 Referrer-Policy 字段

Content-Security-Policy: referrer no-referrer|no-referrer-when-downgrade|origin|origin-when-cross-origin|unsafe-url;
複製代碼

Apache 下，設置方法以下：

<IfModule mod_headers.c>
  Header set Content-Security-Policy: "referrer=no-referrer"
</IfModule>
複製代碼

經過 meta 標籤，name 爲 referrer

<meta name="referrer" content="no-referrer|no-referrer-when-downgrade|origin|origin-when-crossorigin|unsafe-url">
複製代碼

經過標籤的 referrer 屬性

<a href="http://example.com" referrer="no-referrer|origin|unsafe-url">xxx</a>
複製代碼

Referrer 策略還有其餘歷史遺留的值

Referrer 策略還有其餘歷史遺留的值，不過不建議使用。

• never 等價於 no-referrer
• default 等價於 no-referrer-when-downgrade
• always 等價於 unsafe-url

小結

因此在我當前的項目中使用same-origin是最好的選擇了，在其餘狀況下就根據實際應用場景來進行選擇便可

附上我的博客傳送門：https://blog.paddings.cn/2018/07/17/html/Meta-Referrer-Policy/