主流浏览器图片反防盗链方法总结,Nginx防盗链的

作者:计算机知识

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

2018/04/24 · HTML5主流浏览器图片反防盗链方法总结,Nginx防盗链的3种方法。 · 防盗链

最初的文章出处: 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://www.crhled.com/uploads/allimg/190412/19204923T-0.jpg" /><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://www.crhled.com/uploads/allimg/190412/19204923T-0.jpg" /><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 是3个很牛的高品质Web和反向代理服务器, 它装有有诸多分外优越的性状; 在高连接出现的情形下,Nginx是Apache服务器不错的替代品,方今Web服务器侦查展现Apache下跌Ngnix攀升,linux下越多的服务商选拔了Ngnix放任了Apache; Nginx在美利坚联邦合众国是做虚拟主机生意的小业主们平时挑选的软件平台之壹. 能够帮衬高达 50,000 个并发连接数的响应, 感激Nginx为我们选择了 epoll and kqueue作为开发模型. 近期华夏大洲使用nginx网址用户有:博客园、和讯、 腾讯,其余盛名的微网志Plurk也应用nginx。

前言

还记得以前写的百般无聊的插件,前1段时间由于豆瓣读书扩张了防盗链策略使得大家无法直接引用他们的图样,使得自身那些小插件不恐怕工作。本以为是三个不会细小略的难题,但是没悟出这几个小标题正是让本身改了伍8回才改好,能够说是万分的蠢了。总计一下融洽犯傻的原委,照旧由于自个儿懒得去深刻商量,谷歌(谷歌(Google))百度了难题就径直把方案拿来用了,付之东流人云亦云,消除了外部的难点而从未深切的总计。当然,从其它一个方面讲,小编也是初始明白到了前者程序员面对要协作各个浏览器的必要时头有多大了。

 

问题

标题很简短,正是自我盼望在本人的页面里用`来引用其他网站的一张图片,但是他的网站设置了防盗链的策略,会在后台判断请求的Referrer属性是不是来自于一个非本域名的网站,如果来源不是本域名就返回403 forbidden`。小编的目标正是用最有利的措施使得本身的页面能够不受他的防盗链策略的熏陶。

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

缓解方案

详尽上边包车型地铁例子
里头 none 表示空的来路,也正是直接待上访问,比如直接在浏览器打开贰个图纸
blocked 代表被防火墙标记过的来历
server_names 也正是域名了。0.伍.33随后的版本中,能够用*.hihi123.com来代表全体的二级域名

后台预下载

预下载是最直观的1种办法,既然不能够直接引用,那自个儿就先后台下载下来,然后将图片链接到下载后的图纸即可。那一个方法依旧相比较稳当的,图片下载下来就是协调的了,不会再受人范围。可是那总有种凌犯知识产权的觉得,而且每张图纸都要后台先下载,逻辑处理起来如故多少麻烦的;而且对于那种纯静态页面,未有后台程序供大家表达,那也就无法兑现了。

 

其3方代理

其叁方代理其实到头来后台与下载的晋级版,其实便是将下载图片的那么些进度交给第二方的网址。三个非常好用的代办是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,那不就省了很多事了么。不过其实那里的安顿或许有挺多坑的,方法也有不少种,1相当大心就会跟本身同1踩了2遍又贰回。

图片 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则更可信赖的钦命了某3个财富的referrer策略。关于那个策略的定义能够参考MDN。比如小编想只对某贰个图纸裁撤referrer,如下编写即可:

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

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

图片 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标签;艾德ge/IE则不帮衬MDN里定义的”no-referrer”配置项,果然是个古董。。。

总的来说,保证最好效益的最简易的写法便是增加2个meta标签``,那样就无须考虑浏览器的分裂了,尽管那种写法并不被官方推荐(首要如故要妥胁IE这些古董,屏弃了反驳上更是科学的标准)。

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

参考资料

whatwg
MDN
动用Referer Meta标签控制referer

2 赞 2 收藏 评论

图片 3

表示对wma、gif、jpg、png、swf、flv后缀的文本执行防盗链
第二行:*.765h.com 765h.com
表示对*.76伍h.com 7陆伍h.com那二个来路进行判定(*表示任何,任何的二级域名),你能够加上越多
if{}里面内容的趣味是,假如来路不是点名来路就跳转到403谬误页面,当然平昔回到40四也是能够的,也得以是图片。

 

二、针对不一样的目录

本文由bwin必赢发布,转载请注明来源

关键词: HTML5 HTML Web前端 Html/Css nginx