利用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的，这是不被允许的。复制代码