【建站教程】網站引用三方圖片遇到簡單防盜鏈referer的處理辦法

52it.club發表於2018-12-25
網站

問題描述

當我們網站轉帖三方內容時，經常發現圖片不能訪問，原因就是三方網站圖片做了防盜鏈處理，那我們應該怎麼處理呢？

首先第一要想到的問題就是http頭資訊中的referer、host處理：

原理說明

一般三方網站做簡單的防盜鏈都會配置referer\none來路才放行，那麼我們就利於這點做一些簡單的處理；

一般Nginx配置防盜鏈是這樣配置的:

location ~* \.(gif|jpg|png|webp)$ {
   valid_referers none blocked  *.52it.club server_names ~\.google\. ~\.baidu\.;
   if ($invalid_referer) {
      return 403;
   }
 }

意思是對 referer 沒設定或52it.club 或google\baidu.com的放行；

解決方案

將自己的網站禁用referer屬性即可，在你的網站公共頭部增加一段html程式碼：

<meta name="referrer" content="no-referrer"/>

意思是不設定referer引數；

更多擴充套件閱讀

2014 年，W3C 的 Web 應用安全工作組（Web Application Security Working Group）釋出了 Referrer Policy 草案，對瀏覽器該如何傳送 Referrer 做了詳細的規定。新版 Chrome 已經支援了這份草案，我們終於可以靈活地控制自己網站的 Referrer 策略了。

通過新的 Referrer Policy，我們可以針對第三方網站隱藏 Referrer，也可以只傳送來源 URL 的 host 部分。但有一點要記住，新策略允許沉默，但不允許說謊。換句話說，你有權不告訴對方請求從哪兒來，但是不允許用假來源去騙人。不過即便是這樣，這也對現有一些 Web 應用程式的安全性造成威脅。不少 Web 應用在限制 Referrer 時允許為空，之前想要傳送無 Referrer 請求還要一點點技巧，現在就輕而易舉了。

Referrer Policy States

新的 Referrer Policy 規定了五種 Referrer 策略：No Referrer、No Referrer When Downgrade、Origin Only、Origin When Cross-origin、和 Unsafe URL。之前就存在的三種策略：never、default 和 always，在新標準裡換了個名稱。他們的對應關係如下：

策略名稱 屬性值（新） 屬性值（舊）
No Referrer no-referrer never
No Referrer When Downgrade no-referrer-when-downgrade default
Origin Only origin -
Origin When Cross-origin origin-when-crossorigin -
Unsafe URL unsafe-url always

可以看到，新標準給之前的三種策略賦予了更具意義的新名稱，同時還增加了兩種新策略。另外現階段支援 Referrer Policy 的瀏覽器保留了對舊標準的支援，但還是推薦大家儘快更新。簡單介紹下這五種型別的具體含義：

  • No Referrer：任何情況下都不傳送 Referrer 資訊；
  • No Referrer When Downgrade：僅當發生協議降級（如 HTTPS 頁面引入 HTTP 資源，從 HTTPS 頁面跳到 HTTP 等）時不傳送 Referrer 資訊。這個規則是現在大部分瀏覽器預設所採用的；
  • Origin Only：傳送只包含 host 部分的 Referrer。啟用這個規則，無論是否發生協議降級，無論是本站連結還是站外連結，都會傳送 Referrer 資訊，但是隻包含協議 + host 部分（不包含具體的路徑及引數等資訊）；
  • Origin When Cross-origin：僅在發生跨域訪問時傳送只包含 host 的 Referrer，同域下還是完整的。它與 Origin Only 的區別是多判斷了是否 Cross-origin。需要注意的是協議、域名和埠都一致，才會被瀏覽器認為是同域；
  • Unsafe URL：無論是否發生協議降級，無論是本站連結還是站外連結，統統都傳送 Referrer 資訊。正如其名，這是最寬鬆而最不安全的策略；

Referrer Policy Delivery

知道了有哪些策略可以用，還需要了解怎麼用。這裡介紹指定 Referrer Policy 的三種方式：

CSP 響應頭

CSP（Content Security Policy），是一個跟頁面內容安全有關的規範。在 HTTP 中通過響應頭中的 Content-Security-Policy 欄位來告訴瀏覽器當前頁面要使用何種 CSP 策略。現在 CSP 還可以通過 referrer 指令和五種可選的指令值，來指定 Referrer 策略，格式非常簡單：

Content-Security-Policy: referrer no-referrer|no-referrer-when-downgrade|origin|origin-when-cross-origin|unsafe-url;

注：根據文件，通過 CSP 頭部設定 Origin When Cross-origin 策略時，指令值應該用 origin-when-cross-origin，這跟前面的表格裡的 origin-when-crossorigin 有差異。實際上經過我的測試，Chrome 42 只支援 origin-when-crossorigin，後續會不會變還不知道，建議大家使用時，自己先測一下。

CSP 的指令和指令值之間以空格分割，多個指令之間用英文分號分割。

<meta> 標籤

通過 <meta> 標籤也可以指定 Referrer 策略，同樣很簡單：

<meta name="referrer" content="no-referrer|no-referrer-when-downgrade|origin|origin-when-crossorigin|unsafe-url"/>

需要注意的是，<meta> 只能放在 <head>...</head> 之間，如果出現的位置不對會被忽略。同樣，如果沒有給它定義 content 屬性，或者 content 屬性為空，也會被忽略。如果 content 屬性不是合法的取值，瀏覽器會自動選擇 no-referrer 這種最嚴格的策略。

<a> 標籤的 referrer 屬性

通過給 <a> 標籤增加 referrer 屬性也可以指定 Referrer 策略，格式如下：

<a href="https://www.52it.club" referrer="no-referrer|origin|unsafe-url">52it.club</a>

這種方式作用的只是這一個連結。並且，<a> 標籤可用的 Referrer 策略只有三種：不傳、只傳 host 和都傳。另外，這樣針對單個連結設定的策略優先順序比 CSP 和 <meta>要高。

需要注意的是：經過我的測試，目前並沒有哪個瀏覽器實現了對 referrer 屬性的支援。現階段，如果要針對單個連結去掉 Referrer，還是推薦使用下面這種支援度更好的寫法：

<a href="https://www.52it.club" rel="noreferrer">52it.club</a>

另外再重複一遍，現階段的瀏覽器還保留了對 never、default 和 always 的支援，但是已經不推薦使用了。

可以看到，通過新的 Referrer 策略，網站所有者可以選擇更高的安全級別來保證使用者隱私不被洩露；也可以選擇更低的安全級別來獲得一些便利，相比之前只能由瀏覽器預設策略一刀切，確實靈活了不少。

相關文章