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

如何使用防盗链图片

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

图片地址：

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，那就可以拿到图片了