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

2018/04/24 · HTML5 ·
防盗链

原文出处: Myths   

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

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

 

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

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

<img src="<?php%20echo%20$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%20echo%20$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。

1.file方法:

前言

还记得之前写的那个无聊的插件,前一段时间由于豆瓣读书增加了防盗链策略使得我们无法直接引用他们的图片,使得我这个小插件无法工作。本以为是一个很简单的问题,但是没想到这个小问题硬是让我改了五六遍才改好,可以说是非常的蠢了。总结一下自己犯傻的原因,还是由于自己懒得去深入研究,谷歌百度了问题就直接把方案拿来用了,浅尝辄止人云亦云,解决了表面的问题而没有深入的总结。当然,从另外一个方面讲,我也是初步领会到了前端程序员面对要兼容各种浏览器的需求时头有多大了。

 

public function showimg() {

问题

问题很简单,就是我希望在自己的页面里用`来引用其他网站的一张图片,但是他的网站设置了防盗链的策略,会在后台判断请求的Referrer属性是不是来自于一个非本域名的网站,如果来源不是本域名就返回403 forbidden`。我的目的就是用最方便的方法使得我的页面能够不受他的防盗链策略的影响。

一般常用的方法是在server或者location段中加入!
valid_referers   none  blocked  www.hihi123.com  hihi123.com;

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

解决方案

详见下面的例子
其中 none 表示空的来路,也就是直接访问,比如直接在浏览器打开一个图片
blocked 表示被防火墙标记过的来路
server_names 也就是域名了。0.5.33以后的版本中,可以用*.hihi123.com来表示所有的二级域名

$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,那不就省了很多事了么。但是事实上这里的配置还是有挺多坑的,方法也有很多种,一不小心就会跟我一样踩了一遍又一遍。

图片 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" />

图片 2

调用事例: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这个古董,放弃了理论上更为正确的标准)。

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

2.curl方法

参考资料

whatwg
MDN
使用Referer
Meta标签控制referer

2 赞 2 收藏
评论

图片 3

表示对wma、gif、jpg、png、swf、flv后缀的文件实行防盗链
第二行:*.765h.com 765h.com
表示对*.765h.com
765h.com这2个来路进行判断(*代表任何,任何的二级域名),你可以添加更多
if{}里面内容的意思是,如果来路不是指定来路就跳转到403错误页面,当然直接返回404也是可以的,也可以是图片。

public function showimg() {

 

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

二、针对不同的目录

$dir = pathinfo($url);

图片 4

$host = $dir[‘dirname’];

location /img/ {
    root /data/img/;
    valid_referers none blocked *.765h.com 765h.com;
    if ($invalid_referer) {
                   rewrite  ^/  http://www.765h.comrror.gif;
                   #return   403;
    }
}

$refer = $host . ‘/’;

图片 5

$ch = curl_init($url);

 以上是nginx自带的防盗链功能。

curl_setopt($ch, CURLOPT_REFERER, $refer);

 

curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

三、nginx 的第三方模块ngx_http_accesskey_module
来实现下载文件的防盗链

curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);

安装Nginx和nginx-http-access模块

curl_setopt($ch, CURLOPT_BINARYTRANSFER, 1);

图片 6

$data = curl_exec($ch);

#tar zxvf nginx-0.7.61.tar.gz
#cd nginx-0.7.61/
#tar xvfz nginx-accesskey-2.0.3.tar.gz
#cd nginx-accesskey-2.0.3 
#vi config
#把HTTP_MODULES="$HTTP_MODULES $HTTP_ACCESSKEY_MODULE" 修改成HTTP_MODULES="$HTTP_MODULES ngx_http_accesskey_module" (这是此模块的一个bug)
#./configure --user=www --group=www --prefix=/usr/local/nginx --with-http_stub_status_module --with-http_ssl_module --add-module=/root/nginx-accesskey-2.0.3

curl_close($ch);

图片 7

$ext = strtolower(substr(strrchr($url, ‘.’), 1, 10));

编译成功后,在主配置文件加入类似下面的代码:

$types = array(

图片 8

‘gif’ => ‘image/gif’,

server{ 
..... 
    location /download { 
        accesskey             on;
        accesskey_hashmethod  md5;
        accesskey_arg         "key";
        accesskey_signature   "mypass$remote_addr";
    } 
}

‘jpeg’ => ‘image/jpeg’,

图片 9

‘jpg’ => ‘image/jpeg’,

/download 为你下载的目录。

‘jpe’ => ‘image/jpeg’,

 

‘png’ => ‘image/png’,

前台php产生的下载路径格式是:

);

1. echo
md5(‘mypass’.$_SERVER[“REMOTE_ADDR”]);?>
这样,当访问没有跟参数一样时,其他用户打开时,就出现:403

$type = $types[$ext] ? $types[$ext] : ‘image/jpeg’;

 

header(“Content-type: ” . $type);

NginxHttpAccessKeyModule第三方模块,实现方法如下:

echo $data;

1. 下载Nginx
HttpAccessKeyModule模块文件:Nginx-accesskey-2.0.3.tar.gz;

}

 

3.iframe法

2. 解压此文件后,找到nginx-accesskey-2.0.3下的config文件。编辑此文件:替换其中的”$HTTP_ACCESSKEY_MODULE”为”ngx_http_accesskey_module”;

破解盗链实现代码:

 

图片 10+’%5C’)

3. 用一下参数重新编译nginx:

window.img=’window.onload = function() {
parent.document.getElementById(\”+frameid+’\’).height =
document.getElementById(\’img\’).height+\’px\’; }’;

./configure --add-module=path/to/nginx-accesskey

document.write(‘javascript</a>:parent.img;” frameBorder=”0″
scrolling=”no” width=”100%”>’);

4. 修改nginx的conf文件,添加以下几行:

}

location /download {
  accesskey             on;
  accesskey_hashmethod  md5;
  accesskey_arg         "key";
  accesskey_signature   "mypass$remote_addr";
}

调用方式:

其中:
accesskey为模块开关;
accesskey_hashmethod为加密方式MD5或者SHA-1;
accesskey_arg为url中的关键字参数;
accesskey_signature为加密值,此处为mypass和访问IP构成的字符串。

showImg(‘图片地址’);

 

源地址:

访问测试脚本download.php:

图片 11

<?
$ipkey= md5("mypass".$_SERVER['REMOTE_ADDR']);
$output_add_key="<a href=http://www.example.cn/download/G3200507120520LM.rar?key=".$ipkey.">download_add_key</a><br />";
$output_org_url="<a href=http://www.example.cn/download/G3200507120520LM.rar>download_org_path</a><br />";
echo $output_add_key;
echo $output_org_url;
?>

图片 12

访问第一个download_add_key链接可以正常下载,第二个链接download_org_path会返回403
Forbidden错误。

如果不怕麻烦,有条件实现的话,推荐使用Nginx
HttpAccessKeyModule这个东西。

他的运行方式是:如我的download 目录下有一个 file.zip 的文件。对应的URI

使用ngx_http_accesskey_module
模块后.
只有给定的key值正确了,才能够下载download目录下的file.zip。而且 key
值是根据用户的IP有关的,这样就可以避免被盗链了。

据说Nginx HttpAccessKeyModule现在连迅雷都可以防了,可以尝试一下。

 

发表评论

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

网站地图xml地图