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

心已赠人 2022-09-14 06:22 133阅读 0赞

点击上方 前端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][]

往期推荐

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

![fc6b5fa9f7c1fd7043e2f05aafb74528.png][]

[面试题：说说事件循环机制(满分答案来了)][Link 2]

![a1949041e4d9d0969ee2754d6aab37e3.png][]

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

![cb32eaacd444c79ca3f0fea213944a7f.png][]

最后

*  欢迎加我微信，拉你进技术群，长期交流学习...  
    
 *  欢迎关注「前端Q」,认真学前端，做个专业的技术人...

![c05bfc28ed973eb1c5d050f55f273c9d.png][]

![be89485fc63e3a6c0374852155a39960.png][]

点个**在看**支持我吧

![4afcb38034e4caa27e75b3f48cbb3670.gif][]

[6574b1f3e539a5bc20786f11e310915f.png]: /images/20220828/8e34d977beb543b98591b89d6d6b52b6.png
[ffa74ddf5f7436e0a67b7353485b1c2a.png]: /images/20220828/ca4aabf165724665a1a5f92f0634970e.png
[867c02892656d1e5af11ef5e8a284ca7.png]: /images/20220828/34ed65af19594db0823ef1f6eeab4e2b.png
[c8fa75814f78d25cddd82408aa498efa.png]: /images/20220828/c1d92b32644147aea46f5d82ab3d4232.png
[dea965e783c2cd08e9090e9091c112e0.png]: /images/20220828/48e7b4774bec45549706ec1047482bac.png
[84f50339d06de4eb0ae12fde34f4fff3.png]: /images/20220828/aa8ee5a378b947bba0b37421a6530a87.png
[Link 1]: https://blog.csdn.net/abcdefg90876/article/details/120258736
[fc6b5fa9f7c1fd7043e2f05aafb74528.png]: /images/20220828/c56705905b304efcb8a31019cebf40c8.png
[Link 2]: https://blog.csdn.net/LuckyWinty/article/details/120329069
[a1949041e4d9d0969ee2754d6aab37e3.png]: /images/20220828/c533e61657374fbaae71cc56060bada4.png
[2020]: https://blog.csdn.net/qianduan167/article/details/106813305
[cb32eaacd444c79ca3f0fea213944a7f.png]: /images/20220828/a9a67541ead9415799979074946f68d6.png
[c05bfc28ed973eb1c5d050f55f273c9d.png]: /images/20220828/cc6c7c8b5bfe403abe6eb632922ff51e.png
[be89485fc63e3a6c0374852155a39960.png]: /images/20220828/c354defd58fb46369058461a19f30378.png
[4afcb38034e4caa27e75b3f48cbb3670.gif]: /images/20220828/b346dcbe25294974b59af61d998399e8.png