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

xuxueli 發布于2019-08-23 18:01 / 2642人閱讀

摘要：具體問題，就是中通過標簽引入一個第三方的圖片地址，報。解決方案如原網址顯示此圖片來自微信公眾平臺，未經允許不得應用方法在標簽里加這樣存在第三方網站上的圖片，在你的網站上就可以訪問了。

問題

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

具體問題，就是 html 中通過 img 標簽引入一個第三方的圖片地址，報 403 。但是這個圖片地址直接復制出來在地址欄打開，卻是看得到的。

原因

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

如果我們的網站地址不在官方的白名單內，所以就看不到圖片了。

我們做這個跳板的關鍵：不發送 Referer，也就是沒有來源。那么官方那邊，就認為是從瀏覽器直接訪問的，所以就能加載正常的圖片了。

解決方案

如原網址：

http://mmbiz.qpic.cn/mmbiz/DU...

顯示此圖片來自微信公眾平臺，未經允許不得應用

方法：在標簽里加 meta

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

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 標簽，則從當前頁面中發起的 http 請求將只攜帶 origin 部分：

最后

博客首更地址：https://github.com/biaochenxuying/blog

往期精文

尤雨溪 6 月 4 日的 Vue 技術分享

[今天尤雨溪公布Vue 3.0重大變化！前端框架將何去何從？[附完整PPT]](https://mp.weixin.qq.com/s/fL...

十分鐘弄懂：數據結構與算法之美 - 時間和空間復雜度

一張思維導圖輔助你深入了解 Vue | Vue-Router | Vuex 源碼架構

Vue + TypeScript + Element 項目實戰及踩坑記

vue-cli3.x 新特性及踩坑記

那些必會用到的 ES6 精粹

參考文章：

微信圖片防盜鏈解決辦法

Meta referrer標簽的簡要介紹

歡迎關注以下公眾號 全棧修煉，學到不一樣的武功秘籍！

關注公眾號并回復福利可領取免費學習資料，福利詳情請猛戳：免費資源獲取--Python、Java、Linux、Go、node、vue、react、javaScript

云服務器 GPU云服務器 html圖片兼容問題防盜鏈圖片破解防盜鏈圖片圖片文件防盜鏈

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/104538.html

php偽造Referer請求反盜鏈資源

摘要：反盜鏈分類我們了解了盜鏈對源站的危害后，自然要通過一些手段來阻止這種行為維護自己的利益。參考文章百科盜鏈防盜鏈偽造防盜鏈有些產品為了防止自己的產品被盜鏈訪問，會采用反盜鏈措施，如封閉型生態的音樂網站和視頻網站，他們已經為了版權付費，自然不希望你免費使用他們的資源。但因為很多人專門研究盜鏈，因此我們也需要了解下盜鏈、反盜鏈和逃避反盜鏈的原理。盜鏈引用百度百科對盜鏈的定義：盜鏈是指...

chenatu 2019-07-01 11:14 評論0 收藏0
php偽造Referer請求反盜鏈資源

摘要：反盜鏈分類我們了解了盜鏈對源站的危害后，自然要通過一些手段來阻止這種行為維護自己的利益。參考文章百科盜鏈防盜鏈偽造防盜鏈有些產品為了防止自己的產品被盜鏈訪問，會采用反盜鏈措施，如封閉型生態的音樂網站和視頻網站，他們已經為了版權付費，自然不希望你免費使用他們的資源。但因為很多人專門研究盜鏈，因此我們也需要了解下盜鏈、反盜鏈和逃避反盜鏈的原理。盜鏈引用百度百科對盜鏈的定義：盜鏈是指...

Drinkey 2019-07-25 14:38 評論0 收藏0
解決圖片防盜鏈的問題

摘要：在頁面中添加標簽在中表示請求地址來源，一般網站后臺在設置圖片防盜鏈時就是通過判斷請求頭中的來判斷該條請求是否是本網站域名發起的請求，如果不是的話就攔截請求我們上述的設置含義代表在發送請求的時候刪除掉請求頭中的信息，如果網站沒有設置應對空也做在頁面中添加meta標簽 referer在http中表示請求地址來源，一般網站后臺在設置圖片防盜鏈時就是通過判斷http請求頭中的referer...

Blackjun 2019-08-02 14:17 評論0 收藏0
PHP面試之二：高并發與大數據

摘要：三態分別是就緒運行阻塞進程的五態模型在三態的基礎上發展而來新建態運行態終止態就緒態等待態線程稱之為輕量級的進程，程序執行流的最小單元。一個進程下有多個線程來完成不同的工作稱之為多線程。 web資源防盜鏈盜鏈是什么？為什么要防？在自己頁面上顯示一些不是自己服務器的資源（圖片、音頻、視頻、css、js等）由于別人盜鏈你的資源會加重你的服務器負擔，所以我們需要防止可能會影響統計防盜鏈...

Ashin 2019-07-01 12:23 評論0 收藏0
以Referer方案寫一個圖片防盜鏈服務并實現網頁端"破解"

摘要：在同等安全級別的情況下，發送文件的源作為引用地址，但是在降級的情況下不會發送。什么是盜鏈資源不在自己服務器上, 而通過技術手段, 把資源放置到自己的網站中, 通過這種方法盜取他人的資源. 什么是Referer Referer是http請求header的一部分, 當瀏覽器(或者模擬瀏覽器行為)向web服務器發送請求的時候，頭信息里有包含 Referer. 它表示當前接口的訪問來源...

sPeng 2019-08-26 12:10 評論0 收藏0