圖片的防盜鏈
因為之前使用了豆瓣的圖書 API 用着的時候web 系統突然發現所有的圖片都訪問不了、然后谷歌一查原來豆瓣采取了防盜鏈。
問題很簡單,就是我希望在自己的頁面里用 \<img src=”xxxx” \/> 來引用其他網站的一張圖片,但是他的網站設置了防盜鏈的策略,會在后台判斷請求的Referrer屬性是不是來自於一個非本域名的網站,如果來源不是本域名就返回 403 forbidden。我的目的就是用最方便的方法使得我的頁面能夠不受他的防盜鏈策略的影響。
解決的方案
1.使用后台的預下載(把圖片下載下來放到服務器下)
缺點: 占用服務器的空間,訪問速度沒有豆瓣提供的穩點。有些網站是靜態的如 hexo 就無法實現。
2.第三方代理
缺點: 不穩點,第三方代理可能在國內訪問不穩定,在國內沒有好的推薦。也可以自己做一個代理,之前有人用 GO 做過一個。
下面有一個,url 后面填上豆瓣 Api 返回的圖片地址
\<img src=”https://images.weserv.nl/?url=https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2544866651.jpg" \/>
3.還有一種比較友好和奢侈的,上傳 CDN 調用 CDN 的地址,
缺點: 有點奢侈,因為所有圖片都存到 CND 占用大量空間,CND 可能需要錢購買,CND 服務商提供圖片上傳的 API
4.刪除 Header 中的 Referrer
<meta name="referrer" content="never">
content 有四個值可以選擇 never,always,origin,default 這是來自於 whatwg 標准,瀏覽器對他的支持還是很好的。
MDN 標准,還多了一個 no-referrer
5.添加 ReferrerPolicy 屬性
添加 meta 標簽相當於對文檔中的所有鏈接都取消了 referrer,
而R eferrerPolicy 則更精確的指定了某一個資源的referrer策略。
關於這個策略的定義可以參照MDN。比如我想只對某一個圖片取消referrer,如下編寫即可:
<img src="xxxx.jpg" referrerPolicy="no-referrer" />