場景
最近公司項目需求中涉及到需要引用微信朋友圈中的圖片資源，結果被騰訊的防盜鏈系統攔截，所有的圖片都變成了令人尷尬的模樣。今天咱們討論的主題即看我如何習得化解之法
防盜鏈
盜鏈是指未經資源代理站點許可而擅自引用其資源。防盜鏈就是這些資源代理站點，為了避免盜鏈行為而采取的一種很常見的屏蔽措施，我們這里主要討論圖片方面的防盜鏈及相關的解決方案
成功引起注意
當時近距離遇到防盜鏈：這么神奇，這是怎么實現的？
隨即chromeF12->開發(fā)者工具，取出顯示成防盜鏈樣式的圖片URL，發(fā)現和源鏈接沒有區(qū)別。新開一個tab，Ctrl+V->Enter，什么鬼？能正常顯示??！騰訊真nb？能知道我是直接瀏覽器打開而不是偷偷塞到img標簽的src?
直覺告訴我，肯定兩種方式發(fā)送的請求圖片的Request Header有區(qū)別
分析
反手就是一個F12，首先是有防盜鏈現象的圖片的請求信息
再反手又是一個new tab，鍵入圖片url，F12
這樣對比看的話就很清楚了，兩者不同之處再Request Headers里面的Referer請求頭，關于Referer，引用MDN的解釋：
The Referer request header contains the address of the previous web page from which a link to the currently requested page was followed. The Referer header allows servers to identify where people are visiting them from and may use that data for analytics, logging, or optimized caching, for example.
大概意思就是說Referer包含請求發(fā)起者的URL，這樣騰訊方就可以拿到請求源相關信息，然后根據請求源URL來進行判斷校驗，這樣就可以知道請求方是否在盜鏈
不過如此，哈哈哈...
但是，怎么破？絕望。。。
解決方案
目前常用方法無外乎兩種，第一種是通過第三方跳板服務：
這些服務一般多是通過后端代理的方式暴露出跳板api，使用方在調用時通過傳參的方式將要請求的url傳到代理服務器，代理服務器作為中間方再去請求騰訊資源代理服務器的圖片資源，拿到資源后返還給調用方，之前有一些穩(wěn)定的跳板服務，比如QQ瀏覽器（一家人應該不會有問題）提供的
http://read.html5.qq.com/image?src=forum&q=5&r=0&imgflag=7&imageUrl=
在上述鏈接后面給出原始圖片的url，然后就可以坐等QQ跳板服務為我們取回想要的圖片
然鵝。。。
果然是一家人。。。
只能嘗試第二種方式了
第二種方案就是讓瀏覽器發(fā)圖片請求時，請求頭不帶上Referer頭信息。像這種控制代理動作，一般通過meta標簽來進行設置，最終在meta找到了想要的
referrer controlling the content of the HTTP Referer HTTP header attached to any request sent from this document:
參考上面的取值含義，我們只需要在所需頁面的<head>中加上:
<meta name="referrer" content="no-referrer" />
效果圖
Referer沒了，圖片也正常顯示了[手動滑稽笑臉]
Tips
- 細心的朋友會發(fā)現，html的meta設置屬性為referrer，而http請求頭里面卻是referer，原因是早期http標準制訂的那一波同仁，將referrer拼錯為referer[手動尷尬]，后續(xù)版本為了兼容以前版本，不得已一錯再錯
- 盜鏈可恥，如果非商用項目可以嘗試下本文提到的方案
- 既然寫到這里，幫朋友打個廣告，廣告見上圖，需要者聯系：HAIYU-JIANG，坐標杭州融創(chuàng)·河濱之城
