【反防盗链】介绍一个对付图片防盗链的方法

技术频道 - 网站运营

【反防盗链】介绍一个对付图片防盗链的方法

作者:admin 时间:2016-11-11 16:42:49 浏览:

悲催的声明：
由于腾讯也采用了防盗链技术，本文方法已经失效了！

当我们想在文章里引用某张图片时，如果对方设置了防盗链，我们看到的将是404或forbidden或其他图片，而不是想要的那张图片，为此，我们有无方法进行“反防盗链”呢？答案是有的，本文将介绍一个对付图片防盗链的方法，经测试有效。

反防盗链图片引用-HTML代码

举例说明，比如卡卡网站速度诊断的图片是防盗链的，图片引用的代码是：

<img src="http://pagespeed.webkaka.com/rpt/demo/liudehua_91193710_1.jpg">

我们看到的不是原图，而是其他的图片。

我们可以把图片引用代码改为：

<img src="http://read.html5.qq.com/image?imageUrl=http://pagespeed.webkaka.com/rpt/demo/liudehua_91193710_1.jpg" >

这样就可以正常显示自己想要的图片了。

上述方法很简单，就是采用第三方接口来获取图片，格式是：

<img src="http://read.html5.qq.com/image?imageUrl=图片地址" >

execcode getcode

反防盗链图片引用-Javascript代码

一些人问到，对方最近才设置图片反盗链，但我已经发布了大量的文章，我岂不是要重新编辑文章，更改每个图片地址？这显然是不实际的。我现在要告诉你的是，没关系，我们网页可以通过一个JS程序，批量更改图片地址。我们要做的，只是更改一下文章页模版，引入一个反防盗链的JS文件，就可以了。

说了这么多，这个JS代码是怎样的呢？我们可以通过如下例子来了解。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     <meta http-equiv="Content-Language" content="zh-CN" />
     <title>反防盗链实例_卡卡网 webkaka.com</title>
</head>
<body>
<img src="http://pagespeed.webkaka.com/rpt/demo/liudehua_91193710_1.jpg" >
<br><br>
<img src="http://pagespeed.webkaka.com/rpt/demo/liudehua_91193710_1.jpg" >
<br><br>
<script type="text/javascript">
        function showForbiddenImg(){
            var obj=document.getElementsByTagName('img');
            for(var i=0;i<obj.length;i++){
                if(obj[i].getAttribute('src')){
                    obj[i].setAttribute('src','http://read.html5.qq.com/image?imageUrl='+obj[i].getAttribute('src'));
                }
            }
        }
        showForbiddenImg();
</script>
</body>
</html>

execcode getcode

这个代码很简单，它的作用是遍历网页所有图片，并在图片地址前面加上指定字符串。当然了，在实际应用中，不可能需要遍历网页所有图片，只需遍历文章里的图片即可，这需要自己更改一下这个js代码。

如何获得文章里的所有图片并更改图片地址

我们可以通过JQuery来实现此功能，请看如下实例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     <meta http-equiv="Content-Language" content="zh-CN" />
     <title>反防盗链实例_卡卡网 webkaka.com</title>
</head>
<body>
<div id="divArticle" class="arcContent">
<img src="http://pagespeed.webkaka.com/rpt/demo/liudehua_91193710_1.jpg" >
<br><br>
<img src="http://pagespeed.webkaka.com/rpt/demo/liudehua_91193710_1.jpg" >
<br><br>
</div>
</body>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
    //获取Class为arcContent里面的所有img
    var imglist=$(".arcContent img");
    //或使用下面这句，获取ID为divArticle里面的所有img
    //var imglist=$("#divArticle img");
    for(var i=0;i<imglist.length;i++){ 
        if(imglist[i].getAttribute('src')){
            imglist[i].setAttribute('src','http://read.html5.qq.com/image?imageUrl='+imglist[i].getAttribute('src'));
        }
    }
});
</script>
</html>

execcode getcode

使用JQuery时，记得要先引用jquery.js文件。

JQuery代码还可以这样写：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     <meta http-equiv="Content-Language" content="zh-CN" />
     <title>反防盗链实例_卡卡网 webkaka.com</title>
</head>
<body>
<div id="divArticle" class="arcContent">
<img src="http://pagespeed.webkaka.com/rpt/demo/liudehua_91193710_1.jpg" >
<br><br>
<img src="http://pagespeed.webkaka.com/rpt/demo/liudehua_91193710_1.jpg" >
<br><br>
</div>
</body>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
    $(".arcContent img").each(function(index, element) { //$(".arcContent img") 可换为 $("#divArticle img")
        if($(element).attr('src')){
            $(element).attr('src','http://read.html5.qq.com/image?imageUrl='+$(element).attr('src'));
        }
    });
  });
</script>
</html>