前言
最近在做微信公众号开发的时侯,遇到了一个问题:
用户在公众号的聊天框发送图片,后台通过客服插口领到图片的储存地址,前端想要在页面中展示下来,发现图片未能展示。
原因是陌陌图片做了防盗链处理,如果直接引用图片的 src 地址,会提示“此图片来自微信公众平台,未经准许不可引用”。
所以简单了解了一下防盗链的知识,可以参考
防盗链的定义
所以,防盗链是一种机制,是一种技术手段,用来避免自己网站上的资源被别人随便滥用。但自古“道高一尺魔高一丈”,盗者可以通过个别技术手段,绕过他人提供资源的利益页,直接在自己的利益页上向用户提供此资源。大多数情况是一些名不见经传的小网站来窃取一些有实力的大网站的地址(比如图片、音乐、视频、软件等的访问或下载地址),然后放置在自己的网站中,通过这些方式窃取该大网站的空间和流量。
防盗链的实现
要实现防盗链,就必须先要理解盗链的实现原理。提到防盗链的实现原理就不得不从 HTTP 协议说起。在 HTTP 协议中, Request Header 中有一个数组叫 Referer ,采用 URL 的格式来表示从哪里链接到目标的网页或资源。换句话说,通过 Referer ,网站可以测量目标网页访问的来源网页。如果是资源文件,则可以跟踪到显示它的网页地址。有了 Referer 跟踪来源,就可以通过技术手段来进行处理,一旦监测到来源不是本站或指定的站点,则进行制止或则返回指定的页面。
解决问题
最关心的,还是代码。
Show code. (文章末尾)
了解到陌陌的防盗链可能采取的就是通过测量 Referer ,判断当前恳求资源的页面是否为陌陌自家的源(通常也被称作“白名单”),如果是,就正常加载;否则,就会陌陌就只会返回它想让你得到的东西,而不是你想要的东西。
所以,理论上,只要可以将当前页面上,微信资源恳求的 HTTP 协议上的 Referer 隐藏或消除,就可以领到自己期望的东西。那么,理论上只要可以消除 Referer 的方式,都可以尝试。
如果是后端部份处理的话,就可以采用 html 中的内联框架 iframe 。思路就是,动态的生成一个 iframe ,并将 所要恳求的资源(这篇文章说的是图片)引入,然后将 iframe 标签添加到 DOM 结构中,最后从早已加载的显存中取出图片,展示。
注意,如果你的网站上有流量统计的需求,丢失了 Referer ,也会导致一部分流量数据的遗失。
完整代码
PS: 不建议这样做,建议获取陌陌准许后,将数据保存到自己的数据库中,是最好的技巧。
DOCTYPE>
<html>
<head>
<title>技术本身无罪</title>
</head>
<body>
<img src="" />
<img src="" />
<img src="" />
</body>
<script>
function showImg(url) {
var frameid = 'frameimg' + Math.random();
window.img = ' + url + '?' + frameid + '\' />