图片防盗链的实现既然如此简单

点击上方 前端Q,关注公众号

回复加群,加入前端Q技术交流群

来源:https://juejin.im/post/5adc0d03518825673a2022b7

作者:chenhongdong

前言

防盗链,就是防有人盗用你的链接。别人在他的网站上引用了你的资源(图片,音频),这样就会浪费你的流量,资源被引用的多了起来,你这边的服务器可能就扛不住挂了,你说这是多么悲哀的事情!

一般情况下以图片防盗链居多,我们也来看看图片防盗链是如何做出来的。

图片防盗链

先来看个图,这个图是我在本地启了一个服务后,分别加载了百度和360搜索两个网站的图片链接,对应防盗链下的样子(说好的美少女呢)

6574b1f3e539a5bc20786f11e310915f.png

百度的做法是用另外一张图片替换了,而360搜索的做法更粗暴,直接出现了裂图,访问403直接给Forbidden了。

这就是所谓的图片防盗链了,毕竟看到这样的图,大家也没了兴致,和之前想要的图片差距太大,也就没必要再保留了

那么关键部分来了,图片防盗链是如何做到的呢?且看下图

ffa74ddf5f7436e0a67b7353485b1c2a.png

图中所示,在请求头中有Host(请求的主机)和Referer(来源)两个参数,之所以会形成防盗链,那是因为Host和referer所对应的值不相同造成的。

下面我们就直接来实践一下,做一个图片防盗链,上菜;

867c02892656d1e5af11ef5e8a284ca7.png

该图为整个文件夹目录结构,下面参考该目录结构来做,继续来撸。

// js部分
const fs = require('fs');
const path = require('path');
const http = require('http');
const url = require('url');
const getHostName = function (str) {
    let { hostname } = url.parse(str);
    return hostname;
};
http.createServer((req, res) => {
    let refer = req.headers['referer'] || req.headers['referrer'];  // 请求头都是小写的
    // 先看一下refer的值,去和host的值作对比,不相等就需要防盗链了
    // 要读取文件 返回给客户端
    let { pathname } = url.parse(req.url);
    let src = path.join(__dirname, 'public', '.' + pathname);
    // src代表我要找的文件
    fs.stat(src, err => {   // 先判断文件存不存在
        if (!err) {
            if (refer) {    // 不是所有图片都有来源
                let referHost = getHostName(refer);
                let host = req.headers['host'].split(':')[0];
                if (referHost !== host) {
                    // 防盗链
                    fs.createReadStream(path.join(__dirname, 'public', './1.jpg')).pipe(res);
                } else {
                    // 正常显示,如果路径存在,可以正常显示直接返回
                    fs.createReadStream(src).pipe(res);
                }
            } else {
                // 正常显示,如果路径存在,可以正常显示直接返回
                fs.createReadStream(src).pipe(res);
            }
        } else {
            res.end('end');
        }
    });
}).listen(8888);

通过以上不到40行的代码就完成了图片防盗链,想来也并没有辣么麻烦,利用请求头来做的事情还是蛮多的,先来看看防盗链的效果吧

<-- html部分 -->
<body>
    <img src="http://www.chenhd.me:8888/2.png" />
</body>

这里我们修改一下hosts文件,把127.0.0.1指定为两个不同的域名访问

  1. 127.0.0.1 www.chenhd.me

  2. 127.0.0.1 www.chd.me

友情提示

  • windows系统修改hosts文件地址为C:\Windos\System32\drivers\etc下的hosts文件,拷贝hosts文件修改后替换即可

  • mac系统下较为方便通过终端直接sudo vi /etc/hosts修改即可

由于html部分我们图片引用的地址就是www.chenhd.me域名下的图片,所以这种情况属于正常访问,直接展示2.png图片了,就是这么酷

c8fa75814f78d25cddd82408aa498efa.png

当修改域名为www.chd.me的时候,再次访问就发现已经替换为防盗链图片1.jpg了,看如下效果

dea965e783c2cd08e9090e9091c112e0.png

以上内容就实现了如何做一个图片防盗链,防止别人使用你的资源,当然不仅仅是图片防盗链,音频,视频等也可以根据此方法实现,之后大家也可以在工作中尝试尝试。

84f50339d06de4eb0ae12fde34f4fff3.png

往期推荐

大厂面试过程复盘(微信/阿里/头条,附答案篇)

fc6b5fa9f7c1fd7043e2f05aafb74528.png

面试题:说说事件循环机制(满分答案来了)

a1949041e4d9d0969ee2754d6aab37e3.png

专心工作只想搞钱的前端女程序员的2020

cb32eaacd444c79ca3f0fea213944a7f.png


最后

  • 欢迎加我微信,拉你进技术群,长期交流学习...

  • 欢迎关注「前端Q」,认真学前端,做个专业的技术人...

c05bfc28ed973eb1c5d050f55f273c9d.png

be89485fc63e3a6c0374852155a39960.png

点个在看支持我吧

4afcb38034e4caa27e75b3f48cbb3670.gif

  • 0
    点赞
  • 0
    收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:数字20 设计师:CSDN官方博客 返回首页
评论
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值