三种显示防盗链图片的方法,主流浏览器图片反防盗链方法总结

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

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去掉值就好了。

微信图片反防盗链的法子(此图片来源于微信公众平台,未经允许不可饮用)

(未找到出处,如有侵略,请立即告诉,谢谢)

 

因为在<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去掉值就好了。

1.file方法:

前言

三种显示防盗链图片的方法,主流浏览器图片反防盗链方法总结。还记得此前写的那么些无聊的插件,前一段时间由于豆瓣读书伸张了防盗链策略使得大家无能为力间接引用他们的图纸,使得自己这几个小插件无法工作。本认为是一个很简单的题材,可是没悟出那一个小题目就是让自身改了五六遍才改好,可以算得非凡的蠢了。总括一下和谐犯傻的案由,依然由于投机懒得去长远研讨,谷歌(谷歌)百度了难点就一直把方案拿来用了,半涂而废人云亦云,解决了外部的题材而从未尖锐的下结论。当然,从其余一个上边讲,我也是从头了解到了前者程序员面对要合营各类浏览器的要求时头有多大了。

public function showimg() {

问题

标题很简短,就是本人愿目的在于团结的页面里用`来引用其他网站的一张图片,但是他的网站设置了防盗链的策略,会在后台判断请求的Referrer属性是不是来自于一个非本域名的网站,如果来源不是本域名就返回403 forbidden`。我的目的就是用最利于的办法使得我的页面可以不受他的防盗链策略的熏陶。

$url = $this->input->get(‘url’, TRUE);

不留余地方案

$pics = file($url);

后台预下载

预下载是最直观的一种方法,既然无法一贯引用,那我就先后台下载下来,然后将图片链接到下载后的图纸即可。那个情势如故相比妥当的,图片下载下来就是友善的了,不会再受人范围。可是那总有种入侵知识产权的感觉到,而且每张图片都要后台先下载,逻辑处理起来如故稍微费劲的;而且对于那种纯静态页面,没有后台程序供大家表明,那也就不可能完结了。

for ($i = 0; $i < count($pics); $i++) {

其三方代理

其三方代理其实到头来后台与下载的升级换代版,其实就是将下载图片的那么些历程交给第三方的网站。一个万分好用的代办是images.weserv.nl,大家得以直接将团结须要“盗链”的图片写在伸手中即可。我们仍然足以指定一些简短的图形处理参数,让代理帮我们处理。
诸如我想盗链https://foo.com/foo.jpg,并且将图纸宽度设置成100,我们就可以直接那样引用:

<img src=”” />

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

那如故很便宜的,不过美中不足的是以另国外的网站在境内的访问速度如同有点慢,有时候甚至还会被墙,那就有点狼狈了。

echo $pics[$i];

删除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" />

调用事例:img
srcc=”showimg?url=’;

浏览器协助相比

上边大家讲了二种裁撤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这么些古董,摒弃了驳斥上越来越科学的正规化)。

2.curl方法

参考资料

whatwg
MDN
接纳Referer
Meta标签控制referer

2 赞 2 收藏
评论

图片 1

public function showimg() {

相关文章

发表评论

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

*
*
Website