ca929亚洲城:微信图片反防盗链的方法,主流浏览器图片反防盗链方法总结

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

2018/04/24 · HTML5 ·
防盗链

ca929亚洲城:微信图片反防盗链的方法,主流浏览器图片反防盗链方法总结。初稿出处: 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去掉值就好了。

Nginx 是一个很牛的高性能Web和反向代理服务器,
它拥有有许多不胜优惠的特征;
在高连接出现的情景下,Nginx是Apache服务器不错的替代品,方今Web服务器调查显示Apache下降Ngnix攀升,linux下愈多的服务商选择了Ngnix扬弃了Apache;
Nginx在美利坚合营国是做虚拟主机生意的业主们不时挑选的软件平台之一. 可以辅助高达
50,000 个并发连接数的响应, 感谢Nginx为我们拔取了 epoll and
kqueue作为开发模型. 方今华夏陆地使用nginx网站用户有:今日头条、乐乎、
腾讯,其它出名的微网志Plurk也接纳nginx。

前言

还记得从前写的老大无聊的插件,前一段时间由于豆瓣读书增加了防盗链策略使得我们不可能直接引用他们的图样,使得我那几个小插件不可以工作。本认为是一个很简单的题材,不过没悟出这么些小标题就是让自己改了五六遍才改好,可以算得非凡的蠢了。总括一下和好犯傻的原委,如故由于自己懒得去深切研商,谷歌(谷歌)百度了难题就平素把方案拿来用了,因噎废食人云亦云,解决了外部的题材而并未深刻的计算。当然,从其它一个地点讲,我也是从头了然到了前者程序员面对要协作各类浏览器的必要时头有多大了。

 

问题

难题很粗略,就是自个儿希望在温馨的页面里用`来引用其他网站的一张图片,但是他的网站设置了防盗链的策略,会在后台判断请求的Referrer属性是不是来自于一个非本域名的网站,如果来源不是本域名就返回403 forbidden`。我的目的就是用最有益的艺术使得自己的页面可以不受他的防盗链策略的震慑。

貌似常用的方法是在server或者location段中进入!
valid_referers   none  blocked  www.hihi123.com  hihi123.com;

缓解方案

详尽上面的例证
里面 none 表示空的来路,也就是平昔访问,比如直接在浏览器打开一个图纸
blocked 表示被防火墙标记过的来历
server_names 也就是域名了。0.5.33事后的本子中,可以用*.hihi123.com来代表所有的二级域名

后台预下载

预下载是最直观的一种格局,既然不可能直接引用,那我就先后台下载下来,然后将图片链接到下载后的图纸即可。这些主意仍旧相比妥善的,图片下载下来就是友好的了,不会再受人范围。但是那总有种侵袭知识产权的感到,而且每张图片都要后台先下载,逻辑处理起来如故有点辛勤的;而且对于那种纯静态页面,没有后台程序供大家表明,那也就无法完毕了。

 

其三方代理

其三方代理其实到头来后台与下载的升迁版,其实就是将下载图片的这么些进度交给第三方的网站。一个那多少个好用的代理是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" />

那仍旧很方便的,但是美中不足的是其一国外的网站在境内的访问速度似乎不怎么慢,有时候甚至还会被墙,那就有点狼狈了。

一、针对不一样的文件类型

删除Header中的Referrer

比较上边两种折腾的章程,借使能一贯修改Referrer,那不就省了累累事了么。不过事实上那里的配置或者有挺多坑的,方法也有很多种,一不小心就会跟自家一样踩了一次又四回。

ca929亚洲城 1

添加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标签,有的就至极。在其实使用的时候还要小心,那点下文仲有一个更现实的可比。

location ~ .*\.(wma|wmv|asf|mp3|mmf|zip|rar|jpg|gif|png|swf|flv)$ {
     valid_referers none blocked *.765h.com 765h.com;
     if ($invalid_referer) {
     #rewrite ^/ http://www.765h.com/error.html;
     return 403;
      }
}

添加ReferrerPolicy属性

添加meta标签相当于对文档中的所有链接都废除了referrer,而ReferrerPolicy则更规范的指定了某一个资源的referrer策略。关于那个方针的定义可以参见MDN。比如自己想只对某一个图形打消referrer,如下编写即可:

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

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

ca929亚洲城 2

浏览器帮助相比较

地点大家讲了二种打消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这么些古董,甩掉了答辩上越来越科学的正儿八经)。

第一行:wma|gif|jpg|png|swf|flv

参考资料

whatwg
MDN
动用Referer
Meta标签控制referer

2 赞 2 收藏
评论

ca929亚洲城 3

代表对wma、gif、jpg、png、swf、flv后缀的文书实施防盗链
第二行:*.765h.com 765h.com
表示对*.765h.com
765h.com那2个来路进行判断(*代表任何,任何的二级域名),你可以添加更加多
if{}里面内容的意趣是,若是来路不是指定来路就跳转到403荒谬页面,当然一向回到404也是足以的,也可以是图形。

 

二、针对不一致的目录

发表评论

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

网站地图xml地图