前端解決第三方圖片防盜鏈的辦法 - html referrer 訪問圖片資源 403 問題

問題

筆者網站的圖片都是上傳到第三方網站上的，好比 簡書、掘金、七牛雲上的，可是最近簡書和掘金都開啓了 防盜鏈，防止其餘網站訪問他們網站上的圖片了，致使筆者的網站存在他們網站上的圖片全掛了。

具體問題，就是 html 中經過 img 標籤引入一個第三方的圖片地址，報 403 。

可是這個圖片地址直接複製出來在地址欄打開，倒是看獲得的。

緣由

官方輸出圖片的時候，判斷了來源 Referer ，就是從哪一個網站訪問這個圖片，若是是你的網站去加載這個圖片，那麼 Referer 就是：你的網站地址。

若是咱們的網站地址不在官方的白名單內，因此就看不到圖片了。

咱們作這個跳板的關鍵：不發送 Referer，也就是沒有來源。那麼官方那邊，就認爲是從瀏覽器直接訪問的，因此就能加載正常的圖片了。

referrer

在某些狀況下，出於一些緣由，網站想要控制頁面發送給 server 的 referrer 信息的狀況下，可使用這一 referer metadata 參數。

參數

referer 的 metedata 屬性可設置 content 屬性值爲如下集合：

• never
• always
• origin

結果

• 若是 referer-policy 的值爲 never：刪除 http head 中的 referer；
• 若是 referer-policy 的值爲 default：若是當前頁面使用的是 https 協議，而正要加載資源使用的是普通的 http 協議，則將 http header 中額 referer 置爲空；
• 若是 referer-policy 的值 origin：只發送 origin 部分；
• 若是 referer-policy 的值爲 always：不改變 http header 中的 referer 的值；

舉例

若是頁面中包含了以下 meta 標籤，全部從當前頁面中發起的請求將不會攜帶 referer：

<meta name="referrer" content="never">
複製代碼

若是頁面中包含了以下 meta 標籤，則從當前頁面中發起的 http 請求將只攜帶 origin 部分：

<meta name="referrer" content="origin">
複製代碼

解決方案

初步方案

• 在 標籤里加 meta，referrer 的 content 設置爲 nerver

<meta name="referrer" content="never">
複製代碼

這樣存在第三方網站上的圖片，在你的網站上就能夠訪問了。

可是還有一個問題，就是若是你的網站須要發送你的網站地址的，那上面的的設置就不行了，好比：用到了百度統計。

那上面的設置會致使百度統計的代碼加載不了，由於它須要發送你的網站地址給百度統計。

既要不發送 你的網站地址，又要發送你的網站地址，那麼怎麼辦呢 ？

最終的解決方案

• 先在 html 上設置 referrer 爲 always

<meta id="referrer" name="referrer" content="always" />
複製代碼

這樣以後，首屏加載的時候，加載了百度統計的代碼了，能正常統計訪客數據了。

• 不須要網站地址的時候，再把 referrer 設置爲 nerver

加個延時 setTimeout 再把 referrer 的 content 值設置爲 nerver 。 或者 在有圖片的地方再把 referrer 的 content 值設置爲 nerver 。

const referrer  = document.getElementById("referrer");
referrer.setAttribute("content", "never")
複製代碼

這樣就能解決第三方圖片防盜鏈，又能用到百度統計了。

最後

筆者博客首更地址 ：github.com/biaochenxuy…

但願：你們不要惡意盜用、濫用第三方的 CDN 資源行爲。

好比：掘金 CDN 本是一件公益性質的社區服務，爲便你們在本身的技術博客中使用掘金 CDN 的圖片，並無開啓防盜鏈。

可是就是由於某些人惡意盜用、濫用第三方的 CDN 資源，因此掘金社區不得不開啓防盜鏈來減小損失和規避風險 juejin.im/post/5cefb6…。

參考文章：

1. 微信圖片防盜鏈解決辦法
2. Meta referrer標籤的簡要介紹