Web 頁面 Meta 的 Referrer Policy

lancelot_lewis發表於2018-07-20
Web

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

前言介紹

近期在一個專案中，需要引用大量外部網站的圖片，竟意外的發現在生成環境中沒有問題，但在本地的開發環境下，有部分圖片無法顯示。於是就開啟了跨域圖片顯示的鬥爭中。

名詞解釋

什麼是引用策略（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/

相關文章