主流瀏覽器圖片反防盜鏈方法總結

作者：Myths

blog.mythsman.com/2018/04/20/1/

前言

還記得之前寫的那個無聊的插件，前一段時間由於豆瓣讀書增加了防盜鏈策略使得我們無法直接引用他們的圖片，使得我這個小插件無法工作。本以為是一個很簡單的問題，但是沒想到這個小問題硬是讓我改了五六遍才改好，可以說是非常的蠢了。總結一下自己犯傻的原因，還是由於自己懶得去深入研究，谷歌百度了問題就直接把方案拿來用了，淺嘗輒止人云亦云，解決了表面的問題而沒有深入的總結。當然，從另外一個方面講，我也是初步領會到了前端程序員面對要兼容各種瀏覽器的需求時頭有多大了。

問題

問題很簡單，就是我希望在自己的頁面里用來引用其他網站的一張圖片，但是他的網站設置了防盜鏈的策略，會在後台判斷請求的Referrer屬性是不是來自於一個非本域名的網站，如果來源不是本域名就返回403 forbidden。我的目的就是用最方便的方法使得我的頁面能夠不受他的防盜鏈策略的影響。

解決方案

後台預下載

預下載是最直觀的一種方法，既然不能直接引用，那我就先後台下載下來，然後將圖片鏈接到下載後的圖片即可。這個方法還是比較穩妥的，圖片下載下來就是自己的了，不會再受人限制。不過這總有種侵犯知識產權的感覺，而且每張圖片都要後台先下載，邏輯處理起來還是有點麻煩的；而且對於那種純靜態頁面，沒有後台程序供我們發揮，這也就無法實現了。

第三方代理

比如我想盜鏈https://foo.com/foo.jpg，並且將圖片寬度設置成100，我們就可以直接這樣引用:

這還是很方便的，不過美中不足的是這個國外的網站在國內的訪問速度似乎有點慢，有時候甚至還會被牆，這就有點尷尬了。

刪除Header中的Referrer

相比上面兩種折騰的方法，如果能直接修改Referrer，那不就省了很多事了么。但是事實上這裡的配置還是有挺多坑的，方法也有很多種，一不小心就會跟我一樣踩了一遍又一遍。

添加meta標籤

一種方法是給頁面添加一個meta標籤，在meta標籤里指定referrer的值，比如。網上可以查到各種奇奇怪怪的值，其實我總結了來源於兩個地方。

一個是來自whatwg的標準。他給meta標籤的referrer屬性定義了四個值：never,always,origin,default。如果需要關閉referrer，就將referrer的值設置成」never」。這個標準還是比較老的，而且在他的主頁上也明確寫了」This document is obsolete.」。不過據我調研，或許正是由於這個標準比較老，反而導致絕大多數瀏覽器對他的支持都很好，因禍得福蛤蛤。

另外一個是來自MDN的標準。他給meta標籤的referrer屬性定義了五個值，如果要關閉referrer，就將它的值設置成no-referrer。

不過我們需要注意的是，meta標籤添加的位置也很重要，有的瀏覽器能夠識別非head標籤中的meta標籤，有的就不行。在實際使用的時候還要小心，這一點下文會有一個更具體的比較。

添加ReferrerPolicy屬性

添加meta標籤相當於對文檔中的所有鏈接都取消了referrer，而ReferrerPolicy則更精確的指定了某一個資源的referrer策略。關於這個策略的定義可以參照MDN。比如我想只對某一個圖片取消referrer，如下編寫即可:

瀏覽器支持對比

上面我們講了兩種取消referrer頭信息的方法，但其實這卻對應了五種寫法，我們來看下面的對比表：

可以看出Chrome瀏覽器對各種寫法都支持的最好，棒棒噠；Firefox支持所有標準的寫法，但是不支持沒有寫在head標籤中的meta標籤；Edge/IE則不支持MDN里定義的」no-referrer」配置項，果然是個古董。。。

總的來說，保證最佳效果的最簡單的寫法就是添加一個meta標籤，這樣就不用考慮瀏覽器的差別了，雖然這種寫法並不被官方推薦(主要還是要遷就IE這個古董，放棄了理論上更為正確的標準)。

參考資料

whatwg

MDN

使用Referer Meta標籤控制referer

覺得本文對你有幫助？請分享給更多人

關注「前端大全」，提升前端技能

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！