QQ登录

只需要一步,快速开始

APP扫码登录

只需要一步,快速开始

手机号码,快捷登录

查看: 1926|回复: 0

[HTML/CSS/JS] 图片防盗链的实现既然如此简单

[复制链接]

等级头衔

积分成就    金币 : 2810
   泡泡 : 1516
   精华 : 6
   在线时间 : 1245 小时
   最后登录 : 2024-5-17

丰功伟绩

优秀达人突出贡献荣誉管理论坛元老

联系方式
发表于 2021-9-28 08:32:01 | 显示全部楼层 |阅读模式
       防盗链就是防有人盗用你的链接。别人在他的网站上引用了你的资源(图片,音频),这样就会浪费你的流量,资源被引用的多了起来,你这边的服务器可能就扛不住挂了,你说这是多么悲哀的事情!一般情况下以图片防盗链居多,我们也来看看图片防盗链是如何做出来的。
* n. S7 G3 J/ I2 i  P; p       先来看个图,这个图是我在本地启了一个服务后,分别加载了百度和360搜索两个网站的图片链接,对应防盗链下的样子。
9 I0 W* A- n# w& h! _, ^ 1.jpg
' |7 ~; u9 ?& P$ Y  u+ X" q       百度的做法是用另外一张图片替换了,而360搜索的做法更粗暴,直接出现了裂图,访问403直接给Forbidden了。这就是所谓的图片防盗链了,毕竟看到这样的图,大家也没了兴致,和之前想要的图片差距太大,也就没必要再保留了。那么关键部分来了,图片防盗链是如何做到的呢?且看下图:
/ n; y) s! d+ _ 2.jpg
% Y! T7 z7 Z& N7 t) s. Y5 b       图中所示,在请求头中有Host(请求的主机)和Referer(来源)两个参数,之所以会形成防盗链,那是因为Host和referer所对应的值不相同造成的。下面我们就直接来实践一下,做一个图片防盗链。
2 x. f! N/ h" ~/ q3 F 3.jpg
0 l3 t$ e8 r, k       该图为整个文件夹目录结构,下面参考该目录结构来做,继续来撸。
8 w7 L5 Z3 S6 p# k
  1. // js部分
  2. const fs = require('fs');
  3. const path = require('path');
  4. const http = require('http');
  5. const url = require('url');
  6. const getHostName = function (str) {
  7.     let { hostname } = url.parse(str);
  8.     return hostname;
  9. };
  10. http.createServer((req, res) => {
  11.     let refer = req.headers['referer'] || req.headers['referrer'];  // 请求头都是小写的
  12.     // 先看一下refer的值,去和host的值作对比,不相等就需要防盗链了  
  13.     // 要读取文件 返回给客户端
  14.     let { pathname } = url.parse(req.url);
  15.     let src = path.join(__dirname, 'public', '.' + pathname);
  16.     // src代表我要找的文件
  17.    
  18.     fs.stat(src, err => {   // 先判断文件存不存在
  19.         if (!err) {
  20.             if (refer) {    // 不是所有图片都有来源
  21.                 let referHost = getHostName(refer);
  22.                 let host = req.headers['host'].split(':')[0];
  23.                
  24.                 if (referHost !== host) {
  25.                     // 防盗链
  26.                     fs.createReadStream(path.join(__dirname, 'public', './1.jpg')).pipe(res);
  27.                 } else {
  28.                     // 正常显示,如果路径存在,可以正常显示直接返回
  29.                     fs.createReadStream(src).pipe(res);
  30.                 }
  31.             } else {
  32.                 // 正常显示,如果路径存在,可以正常显示直接返回
  33.                 fs.createReadStream(src).pipe(res);
  34.             }
  35.         } else {
  36.             res.end('end');
  37.         }
  38.     });
  39.    
  40. }).listen(8888);
      通过以上不到40行的代码就完成了图片防盗链,想来也并没有辣么麻烦,利用请求头来做的事情还是蛮多的,先来看看防盗链的效果吧。
; k2 X& N8 D; o
  1. <-- html部分 -->
  2. <body>
  3.     <img src="http://www.chenhd.me:8888/2.png" />
  4. </body>
      这里我们修改一下hosts文件,把127.0.0.1指定为两个不同的域名访问:) g; k4 P: M6 v' f. S) ^
友情提示:  _9 i, U: x$ z" `7 n2 L
  • windows系统修改hosts文件地址为C:\Windos\System32\drivers\etc下的hosts文件,拷贝hosts文件修改后替换即可
  • mac系统下较为方便通过终端直接sudo vi /etc/hosts修改即可* X! l" A) |# @3 P$ s8 N
      由于html部分我们图片引用的地址就是www.chenhd.me域名下的图片,所以这种情况属于正常访问,直接展示2.png图片了,就是这么酷。
& z( S' e" r. ^$ u 4.jpg

! b4 a. |% E1 ]1 f) p0 S' W& \       当修改域名为www.chd.me的时候,再次访问就发现已经替换为防盗链图片1.jpg了,看如下效果。
7 I) o: x* k  k: }  \) |% j 5.jpg
$ ~/ V9 }' k* p- N) F, I# Y8 M
       以上内容就实现了如何做一个图片防盗链,防止别人使用你的资源,当然不仅仅是图片防盗链,音频,视频等也可以根据此方法实现,之后大家也可以在工作中尝试尝试。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|手机版|小黑屋|paopaomj.COM ( 渝ICP备18007172号 )

GMT+8, 2024-5-18 15:23

Powered by paopaomj X3.4 © 2016-2024 sitemap

快速回复 返回顶部 返回列表