利用service worker破解防盜鏈

houyhea發表於2017-03-30

　　今天收到一個任務：要求破解別人網站的圖片防盜鏈。我搜尋了一下，瞭解到目前市面上的大體方法主要有：

  1. 替換圖片的url，然後利用代理.www.aslibra.com/blog/post/c…;
  2. 利用https；cnodejs.org/topic/5459d…;
  3. 利用js+iframe。gist.github.com/cos800/1d87…;

　　進一步分析，這些方案都是在利用空referrer不觸發防盜鏈機制這個特徵。個人總覺得以上的方法都有點小題大做，且改動也比較大。於是，自己翻閱了一下資料，實現了利用service worker來破解防盜鏈的方案。

service worker是什麼

　　這裡摘抄網上一個篇介紹，簡明扼要：

service worker 是獨立於當前頁面的一段執行在瀏覽器後臺程式裡的指令碼。

service worker不需要使用者開啟 web頁面，也不需要其他互動，非同步地執行在一個完全獨立的上下文環境，不會對主執行緒造成阻塞。基於service worker可以實現訊息推送，靜默更新以及地理圍欄等服務。

　　感興趣的朋友請參見：

  1. developer.mozilla.org/zh-CN/docs/…;
  2. kailian.github.io/2017/03/01/…;

破解防盜鏈原理

  1. 在頁面body前註冊servie work 的指令碼（假設指令碼在根目錄下service-work.js）。
     if (navigator.serviceWorker) {
   navigator.serviceWorker.register('service-worker.js').then(function (registration) {
     console.log('service worker 註冊成功');
   }).catch(function (err) {
     console.log('servcie worker 註冊失敗')
   });
 }複製程式碼
  2. 在servie-work.js裡註冊fetch事件。然後找到需要破解的圖片域名。
     var domain = "http://mmbiz.qpic.cn";//domain是需要破解有防盜鏈地址的域名。
 self.addEventListener('fetch', function (e) {    
   if (e.request.url.indexOf(domain) >= 0) {
     var req = e.request.clone();       
     var returnUrl = req.url;
     e.respondWith(
       fetch(returnUrl, {
         referrer: "",     //通過設定referrer為空，騙過利用referrer實現防盜鏈的網站
         mode: 'no-cors'
       })
     );
   }
 });複製程式碼
  3. 至此，實現破解防盜鏈。測試後，效果不錯。

弊端

  1. 瀏覽器相容性問題。主要是瀏覽器對service worker的相容。請參見：developer.mozilla.org/en-US/docs/…;
  2. 只對利用空referrer實現防盜鏈的網站有效。
  3. 【補充一下】需要HTTPS環境。

優點

  1. 簡潔，無需動態修改dom上的img src地址；
  2. 對dom層透明，不需要生成多餘的hack標籤。

註冊失敗的可能原因

有網友反饋註冊失敗（見評論），這裡重點摘抄出來，註明一下，希望引起大家注意。具體請參考：developer.mozilla.org/zh-CN/docs/…

1. 你沒有在 HTTPS 下執行你的程式
1. service worker檔案的地址沒有寫對— 需要相對於 origin , 而不是 app 的根目錄...
1. service worker 在不同的 origin 而不是你的app的，這是不被允許的。複製程式碼

相關文章