前端黑科技-如何使用防盗链图片

如何使用防盗链图片

此文无心冒犯任何图片库或视频库，意在发扬技术自己，因此，这里就拿本身的服务器作实验

图片地址：

http://mmbiz.qpic.cn/mmbiz/PckLehCib4pkA0ZkSicaXt8icMxfeiaGIhWZSLAHv54DkLvLiaDAXCOibc9p73JDfQ2ic3MbKryjYoPrHxsjTf9NeJNUg/640?wx_fmt=jpeg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1

这是一个具备防盗链的图片，若是你直接拿来放到本身服务器，势必没法显示。

理论上讲
若是一个图片直接在浏览器打开链接可以访问到，那么，就能够在你的网站正常显示（能够彻底忽视他的防盗链）

• 建一个空的iframe
• iframe设置src，内容就是图片或一段html

var body = document.querySelector("body");
var iframe = document.createElement("iframe");
var html = '<img src="http://json.image.alimmdn.com/vsou.png"/>';
iframe.src = 'javascript:void(function(){document.open();document.write(\'' + html + '\');document.close();}())';
body.appendChild(iframe);

略微设置一下样式

iframe.style.position="fixed";
iframe.style.width="100%";
iframe.style.height="100%";
iframe.style.border=0;
iframe.style.zIndex=10;
iframe.style.top=0;
iframe.style.left=0;

上面一段代码有一个关键因素，就是在iframe以外，不能有任何其余图片该域名（示例图片所在域名）下的图片，不然功亏一篑

具体原理：
防盗链图片，是被服务器判断了header中的referer的，可是若是referer=null，那就能够拿到图片了