菜单

主流浏览器图片反防盗链方法计算

2019年9月8日 - XML

主流浏览器图片反防盗链方法总括

2018/04/24 · HTML5 ·
防盗链

原稿出处: Myths   

微信图片反防盗链的方法(此图片来自微信徒人平台,未经同意不可饮用)

(未找到出处,如有侵略,请及时告知,多谢)

 

因为在<img>标签中引用微信的图片

<?php 
    $img = "http://mmbiz.qpic.cn/mmbiz        /ibbmVK4uC7iacR4KGWnyJHvQxl276DK6eGibiafBFTLObjBtKU9hGZoiaaiaD49r4u9otkQzCGAPAbWlPVzrpyCRaCVA/0";
?>

<img src="<?php echo $img;?>"/>

会显示如图所示:

![输入图片说明](https://static.oschina.net/uploads/img/201603/17171821_24sw.png "weixin")

这是因为微信现在也开始防外链导致,在经过一天的搜索努力以后发现了如下方法可以解决,利用js解决。

解决方法如下:


```
<script type="text/javascript">


function showImg(url) {

    var frameid = 'frameimg' + Math.random();

    console.debug(frameid);

    console.debug(url);

    window.img = '<img id="img" style="width:50%" src=\'' + url + '?' + Math.random() + '\' /><script>window.onload = function() { parent.document.getElementById(\'' + frameid + '\').height = document.getElementById(\'img\').height+\'px\'; }<' + '/script>';
    document.write('<iframe id="' + frameid + '" src="javascript:parent.img;" frameBorder="0" scrolling="no" width="50%"></iframe>');

}
</script>

      <h1>原图:</h1>

     <br>

    <img src="http://mmbiz.qpic.cn/mmbiz/dYNplyiblCFna8JoYZw71MH8Z8ib8KBALnJ7DibpDVSLPW4oy0nVhPfEG7PxCVwia6YP1OFibowWWkm2T0pn63icArPQ/0?tp=webp&wxfrom=5&wx_lazy=2" /><br>

     <h1>js破解之后:</h1>

     <br>

    <div id="hotlinking">

        <script type="text/javascript">showImg('http://mmbiz.qpic.cn/mmbiz/ibbmVK4uC7iacR4KGWnyJHvQxl276DK6eGlZQ10E7BeY7Fw0ZlnPLXOSF8W4qIiaCsNspcEiaicD0McR79qmicfPGntg/0');</script>

     </div>



还有网友说:

把它的data-src 改成src就好了

XML/HTML code

 

?

1
2
3
4
5
6
7
8
9
10
11
<img 
 
src="http://mmbiz.qpic.cn/mmbiz/CoJreiaicGKekEsuheJJ7Xh53AFe1BJKibyaQzsFiaxfHHdYibsHzfnicbcsj6yBmtYoJXxia9tFufsPxyn48UxiaccaAA/640?
 
wx_fmt=jpeg&amp;wxfrom=5&amp;wx_lazy=1data-s="300,640" data-ratio="0.6672661870503597" data-w="" data-type="jpeg" width="auto" data-src="" style="box-
 
sizing: border-box !important; word-wrap: break-word !important; width: auto !important; visibility: visible !important;"  /></p><p style="max-width: 100%; 
 
min-height: 1em; white-space: pre-wrap; color: rgb(62, 62, 62); rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-
 
word !important;">
还有一个data-src去掉值就好了。

前言

还记得从前写的不行无聊的插件,前一段时间由于豆瓣读书扩充了防盗链战术使得大家不可能直接引用他们的图纸,使得笔者这么些小插件不可能专业。本以为是一个非常的粗略的主题素材,不过没悟出那个小意思就是让本人改了五五次才改好,能够说是特别的蠢了。总括一下谈得来犯傻的案由,如故由于投机懒得去深切钻研,Google百度了难点就径直把方案拿来用了,废然则返未有主见只会借坡下驴,消除了表面包车型客车难点而并没有尖锐的下结论。当然,从其余贰个上边讲,小编也是始于通晓到了后面一个技术员面临要合作种种浏览器的必要时头有多大了。

问题

难题非常的粗略,正是作者希望在投机的页面里用`来引用其他网站的一张图片,但是他的网站设置了防盗链的策略,会在后台判断请求的Referrer属性是不是来自于一个非本域名的网站,如果来源不是本域名就返回403 forbidden`。作者的目标就是用最利于的章程使得小编的页面能够不受他的防盗链计策的熏陶。

焚林而猎方案

后台预下载

预下载是最直观的一种艺术,既然不可能直接援用,那作者就前后相继台下载下来,然后将图片链接到下载后的图形就可以。这么些主意依旧比较妥帖的,图片下载下来正是本人的了,不会再受人限制。不过那总有种凌犯知识产权的认为,而且每张图片都要后台先下载,逻辑管理起来依然多少艰苦的;并且对于这种纯静态页面,未有后台程序供大家表达,那也就不或者完毕了。

其三方代理

其三方代理其实到头来后台与下载的晋级版,其实正是将下载图片的那一个进度交给第三方的网址。叁个至极好用的代理是images.weserv.nl,大家得以平昔将本人需求“盗链”的图片写在乞请中就可以。大家照旧足以钦定一些大约的图纸处理参数,让代理帮大家管理。
例如说笔者想盗链https://foo.com/foo.jpg,何况将图纸宽度设置成100,大家就能够直接那样引用:

<img src=”https://images.weserv.nl/?url=foo.com/foo.jpg&w=100” />

1
<img src="https://images.weserv.nl/?url=foo.com/foo.jpg&w=100" />

那依然很有利的,然而美中不足的是其一海外的网站在境内的访谈速度就像不怎么慢,临时候乃至还也许会被墙,这就有一点狼狈了。

删除Header中的Referrer

对照上边三种折腾的艺术,假若能直接修改Referrer,那不就省了无尽事了么。可是事实上这里的配备可能有挺多坑的,方法也可以有诸八种,一不当心就能够跟自家同样踩了二回又贰回。

添加meta标签

一种艺术是给页面增多多个meta标签,在meta标签里钦定referrer的值,比方`。网上可以查到各种奇奇怪怪的值,其实我总结了来源于两个地方。
一个是来自[whatwg](https://wiki.whatwg.org/wiki/Meta_referrer)的标准。他给meta标签的referrer属性定义了四个值:
never,always,origin,default。如果需要关闭referrer,就将referrer的值设置成”never”。这个标准还是比较老的,而且在他的主页上也明确写了”This
document is
obsolete.”。不过据我调研,或许正是由于这个标准比较老,反而导致绝大多数浏览器对他的支持都很好,因祸得福蛤蛤。
另外一个是来自[MDN](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/meta)的标准。他给meta标签的referrer属性定义了五个值,如果要关闭referrer,就将它的值设置成
no-referrer`。
只是我们须要注意的是,meta标签增多的地点也很要紧,有的浏览器能够辨识非head标签中的meta标签,有的就非常。在其实应用的时候还要小心,这点下文子禽有三个更切实的比较。

添加ReferrerPolicy属性

增多meta标签也便是对文书档案中的全部链接都收回了referrer,而ReferrerPolicy则更规范的钦定了某多个财富的referrer攻略。关于这些方针的概念能够参见MDN。举例自身想只对某一个图形撤消referrer,如下编写就可以:

<img src=”xxxx.jpg” referrerPolicy=”no-referrer” />

1
<img src="xxxx.jpg"  referrerPolicy="no-referrer" />

浏览器协助相比

地方大家讲了二种打消referrer头音讯的不二等秘书诀,但其实那却对应了五种写法,大家来看上面包车型客车比较表:

NOTHING META IN HEAD REFERRER=NEVER META IN HEAD REFERRER=NO-REFERRER META REFERRER=NEVER META REFERRER=NO-REFERRER IMG REFERRERPOLICY=NO-REFERRER
Chrome N Y Y Y Y Y
Firefox N Y Y N N Y
Edge/IE N Y N Y N N

能够见到Chrome浏览器对各个写法都帮衬的最佳,棒棒哒;Firefox支持具备正式的写法,可是不援救未有写在head标签中的meta标签;Edge/IE则不帮忙MDN里定义的”no-referrer”配置项,果然是个古董。。。

看来,保障最棒效果与利益的最简单易行的写法正是增进三个meta标签“,这样就不用思虑浏览器的反差了,即便这种写法并不被官方推荐(首要还是要退让IE这几个古董,放弃了辩白上越来越科学的行业内部)。

参谋资料

whatwg
MDN
接纳Referer
Meta标签调节referer

2 赞 2 收藏
评论

图片 1

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图