【Web技术】1118- 图片防盗链的实现既然如此简单

待我称王封你为后i 2022-09-17 00:58 139阅读 0赞

![6e109f7580cf8c333222584b9cf5284f.png][]

> 来源：https://juejin.im/post/5adc0d03518825673a2022b7
> 
> 作者：chenhongdong

## 前言    ##

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

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

### 图片防盗链 ###

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

![385c7ecb3ba2a6fff226cb75ed818a35.png][]

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

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

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

![4ee8faea0407d7fd0da87ed31ae42d60.png][]

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

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

![0cda9f7ce2f08ed95a8dd323a35f61d0.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图片了，就是这么酷

![89a46efb9deb8cc7c9e1c25ebcfbbd77.png][]

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

![d459ef1931136897edd545eec1365d05.png][]

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

![ea984e524fef66cea5e7063e4adba7f3.gif][]

[1. JavaScript 重温系列（22篇全）][1. JavaScript _22]

[2. ECMAScript 重温系列（10篇全）][2. ECMAScript _10]

[3. JavaScript设计模式 重温系列（9篇全）][3. JavaScript_ _9]

4. [正则 / 框架 / 算法等 重温系列（16篇全）][_ _ _ _ _16]

5. [Webpack4 入门（上）][Webpack4]|| [Webpack4 入门（下）][Webpack4]

6. [MobX 入门（上）][MobX] || [MobX 入门（下）][MobX]

7. 120[\+篇原创系列汇总][Link 1]

![98d2976e67f3a8adb5141a29b7474668.gif][]

回复“**加群**”与大佬们一起交流学习~

点击“**阅读原文**”查看 120+ 篇原创文章

[6e109f7580cf8c333222584b9cf5284f.png]: /images/20220828/de70eab69d0642c5b5293fa8abe84cfb.png
[385c7ecb3ba2a6fff226cb75ed818a35.png]: /images/20220828/38e16dab1af14c65b3f625e44c6f1bbe.png
[4ee8faea0407d7fd0da87ed31ae42d60.png]: /images/20220828/1bd40db532634369829bdda8e085c1ba.png
[0cda9f7ce2f08ed95a8dd323a35f61d0.png]: /images/20220828/7b68ec3872854c6383442c620fde88fb.png
[89a46efb9deb8cc7c9e1c25ebcfbbd77.png]: /images/20220828/a638fdf18acf4971956d3980a684a86a.png
[d459ef1931136897edd545eec1365d05.png]: /images/20220828/e3e0c00fcfd84b83b2e681d219b34432.png
[ea984e524fef66cea5e7063e4adba7f3.gif]: /images/20220828/aa20857cdfa74441b64ba636e868a513.png
[1. JavaScript _22]: https://blog.csdn.net/weixin_51457459/article/details/115092898
[2. ECMAScript _10]: https://blog.csdn.net/qq_36380426/article/details/85946228
[3. JavaScript_ _9]: https://blog.csdn.net/weixin_34205826/article/details/93162141
[_ _ _ _ _16]: https://blog.csdn.net/qq_36380426/article/details/117137224
[Webpack4]: https://blog.csdn.net/qq_37322278/article/details/80157223
[MobX]: https://blog.csdn.net/Run_youngman/article/details/80829982
[Link 1]: https://blog.csdn.net/qq_36547531/article/details/109507243
[98d2976e67f3a8adb5141a29b7474668.gif]: /images/20220828/3369b0dde36c49b6a30676e05829f46a.png