利用service worker破解防盜鏈

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

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的，這是不被容許的。複製代碼