【Web技术】so easy! 图片防盗链原理

「爱情、让人受尽委屈。」 2022-09-10 00:26 172阅读 0赞

![282279a1aef20416ea19701d7ba153f7.png][]

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

## 前言    ##

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

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

### 图片防盗链 ###

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

![9ce0978c9fa2241a092f0ebe1382bd0d.png][]

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

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

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

![e965fc0c7c3b80a8aa9172fbcadb72d5.png][]

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

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

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

![597e2ab5778df59a3ca1e2f30f7ea1c6.png][]

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

![2ca78afa6fd635e0ea7ba8729cba8100.png][]

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

![a368a0988ec7fd65159c93d997aa0db3.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 1]

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

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

![f3ffa6c7627b7842638b5a6de2507896.gif][]

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

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

[282279a1aef20416ea19701d7ba153f7.png]: /images/20220829/10df6a6674404c698b914c6e3e7e02b8.png
[9ce0978c9fa2241a092f0ebe1382bd0d.png]: /images/20220829/3aaca02100a6470db4a55398fa85127d.png
[e965fc0c7c3b80a8aa9172fbcadb72d5.png]: /images/20220829/417e701892ba43ccb25d361d99ee8430.png
[189d7e8782b1187dc201ee35d3bdba07.png]: /images/20220829/7faa23a175c04c5f98178b9e1779af2a.png
[597e2ab5778df59a3ca1e2f30f7ea1c6.png]: /images/20220829/55067436ad674bea86906ed21f747594.png
[2ca78afa6fd635e0ea7ba8729cba8100.png]: /images/20220829/ef17689ae3094838bf05d03a22635266.png
[a368a0988ec7fd65159c93d997aa0db3.gif]: /images/20220829/f7f4a5fb50f24214b22e5aec6655fd11.png
[1. JavaScript _22]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224ea86b5adfc10c3aa1841be3879b9360d671e98cc73391c2490246f1348857b9821d32c&idx=1&mid=2458453187&scene=21&sn=a69b4d7d991867a07a933f86e66b9f55#wechat_redirect
[2. ECMAScript _10]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e086b5adf6dad41a0d36b77a9bfb4bc9f0d29a816266b3e28c892e54274967dbce380b&idx=1&mid=2458453193&scene=21&sn=e5392cb77bc17c9e94b6c826b5f52a83#wechat_redirect
[3. JavaScript_ _9]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e386b5adf554ab928cdeaf7ee16dbb2d895be17f2a12a59054a75b913470ca7649bbc7&idx=1&mid=2458453194&scene=21&sn=e7f0734b04484bee5e10a85a7cbb85c1#wechat_redirect
[_ _ _ _ _16]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e286b5adf432850f82db18cc8647d639836798cf16b478d9a6f7c81df87c6da5257684&idx=1&mid=2458453195&scene=21&sn=1e0c8b7ea8ddc207b523ec0a636a5254#wechat_redirect
[Webpack4]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251f86b5ac09dbbbb7c8e1d80c6cbd793a523cdfa690f8734def57812e616b9906aeec79&idx=1&mid=2458453302&scene=21&sn=904e40a421024ea0d394e9850b674012#wechat_redirect
[Webpack4 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251e86b5ac08464872cd880811423e0d1bbcebbe11dcac9d99fa38c5332c089c06d65d95&idx=1&mid=2458453303&scene=21&sn=422f2b5e22c3b0e91a8353ee7e53fed9#wechat_redirect
[MobX]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264c86b5af5aa7300a04d55efead6223e310d68e10222cd3577a25c783d3429f00767960&idx=1&mid=2458453605&scene=21&sn=0a506769d5eeb7953f676e93fb4d18eb#wechat_redirect
[MobX 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264086b5af5611524eedb0d409afe86d859dce6ceff1c17ddab49d353c385e45611a73fa&idx=1&mid=2458453609&scene=21&sn=f0c22e82f2537204d9b173161bae6b82#wechat_redirect
[Link 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224dd86b5adcbd98189315e60de6a0106993690b69927cc1c1f19fd8f591fefce4e3db51f&idx=2&mid=2458453236&scene=21&sn=daf00392f960c115463c5aaf980620b4#wechat_redirect
[f3ffa6c7627b7842638b5a6de2507896.gif]: /images/20220829/524a78f234dc45a494a5da4c36db7e2d.png