【Web技术】1118- 图片防盗链的实现既然如此简单
来源:https://juejin.im/post/5adc0d03518825673a2022b7
作者:chenhongdong
前言
防盗链,就是防有人盗用你的链接。别人在他的网站上引用了你的资源(图片,音频),这样就会浪费你的流量,资源被引用的多了起来,你这边的服务器可能就扛不住挂了,你说这是多么悲哀的事情!
一般情况下以图片防盗链居多,我们也来看看图片防盗链是如何做出来的。
图片防盗链
先来看个图,这个图是我在本地启了一个服务后,分别加载了百度和360搜索两个网站的图片链接,对应防盗链下的样子(说好的美少女呢)
百度的做法是用另外一张图片替换了,而360搜索的做法更粗暴,直接出现了裂图,访问403直接给Forbidden了。
这就是所谓的图片防盗链了,毕竟看到这样的图,大家也没了兴致,和之前想要的图片差距太大,也就没必要再保留了
那么关键部分来了,图片防盗链是如何做到的呢?且看下图
图中所示,在请求头中有Host(请求的主机)和Referer(来源)两个参数,之所以会形成防盗链,那是因为Host和referer所对应的值不相同造成的。
下面我们就直接来实践一下,做一个图片防盗链,上菜;
该图为整个文件夹目录结构,下面参考该目录结构来做,继续来撸。
// 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指定为两个不同的域名访问
127.0.0.1 www.chenhd.me
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图片了,就是这么酷
当修改域名为www.chd.me的时候,再次访问就发现已经替换为防盗链图片1.jpg了,看如下效果
以上内容就实现了如何做一个图片防盗链,防止别人使用你的资源,当然不仅仅是图片防盗链,音频,视频等也可以根据此方法实现,之后大家也可以在工作中尝试尝试。
1. JavaScript 重温系列(22篇全)
2. ECMAScript 重温系列(10篇全)
3. JavaScript设计模式 重温系列(9篇全)
4. 正则 / 框架 / 算法等 重温系列(16篇全)
5. Webpack4 入门(上)|| Webpack4 入门(下)
6. MobX 入门(上) || MobX 入门(下)
7. 120+篇原创系列汇总
回复“加群”与大佬们一起交流学习~
点击“阅读原文”查看 120+ 篇原创文章
【Web技术】1118- 图片防盗链的实现既然如此简单相关推荐
- php substr 去掉前n位_用PHP是如何做图片防盗链的
1.图片防盗链 在一些大型网站中,比如百度贴吧,该站点的图片采用了防盗链的规则,以至于使用下面代码会发生错误. 简单代码: <!DOCTYPE html> <html> < ...
- php破解referer防盗链解析,Referer原理与图片防盗链实现方法详解
本文实例讲述了Referer原理与图片防盗链实现方法.分享给大家供大家参考,具体如下: 1.图片防盗链 在一些大型网站中,比如百度贴吧,该站点的图片采用了防盗链的规则,以至于使用下面代码会发生错误. ...
- ASP.NET中利用ashx实现图片防盗链
盗链的危害我就不说了,网上有很多. 直接分析盗链原理:看下面用httpwatch截获的http发送的数据 GET /Img.ashx?img=svn_work.gif HTTP/1.1 Accept: ...
- https访问http加载不出图片_前端解决第三方图片防盗链的办法
作者:biaochenxuying 转发链接:https://github.com/biaochenxuying/blog/issues/31 问题 笔者网站的图片都是上传到第三方网站上的,比如 简书 ...
- html 图片防盗链,【反防盗链】介绍一个对付图片防盗链的方法
悲催的声明: 由于腾讯也采用了防盗链技术,本文方法已经失效了! 当我们想在文章里引用某张图片时,如果对方设置了防盗链,我们看到的将是404或forbidden或其他图片,而不是想要的那张图片,为此,我 ...
- WordPress 图片防盗链的方法
现在写博,为了达到图文并茂.增加视觉效果,往往都会把一些图片放在文章里面,这样一来,就涉及到三个方面的问题,一个是存储空间,二是流量,三是 访问及加载速度.随着国内带宽的不断升级,访问及加载已不是什么 ...
- Nginx图片防盗链、缓存和压缩的示例
一.图片防盗链 简单即是最好,最简单的方法是用ngx_http_referer_mmodule模块的valid_referers参数来构建,这也是最常见和最常用的方法: 1 2 3 4 5 6 7 8 ...
- 第十三节:HttpHander扩展及应用(自定义扩展名、图片防盗链)
一. 自定义扩展名 1. 前言 凡是实现了IHttpHandler接口的类均为Handler类,HttpHandler是一个HTTP请求的真正处理中心,在HttpHandler容器中,ASP.NET ...
- 前端解决第三方图片防盗链的办法 - html referrer 访问图片资源 403 问题
问题 笔者网站的图片都是上传到第三方网站上的,比如 简书.掘金.七牛云上的,但是最近简书和掘金都开启了 防盗链,防止其他网站访问他们网站上的图片了,导致笔者的网站存在他们网站上的图片全挂了. 具体问题 ...
最新文章
- Android之本地数据存储(一):SharedPreferences
- python——字符串常用方法
- 用到的oracle sql语句-001
- SQL注入——报错注入
- django项目中使用KindEditor富文本编辑器
- aliyun的maven下载jar的方法
- 【CCF】20180902-买菜
- 如何快速的入门Docker并且实现部署
- maven安装与配置等相关知识
- 百度大脑EasyMonitor升级2.0,全新发布软硬一体方案EM-BOX 边缘部署易集成
- matlab中asix off_遗传算符MATLAB程序-入门必看
- Java8(JDK1.8)新特性
- 魔都职场外卖(加班)大赏
- Vivado 与 Vitis 2022.1 安装记录
- 全新MN梦奈宝塔主机系统V1.5版本源码
- 大数据训练营课程大纲项目简介
- druid监控无法关闭(坑),及处理方式
- aria2c: command not found
- 「停止更新」黑苹果安装教程:联想小新锐7000 i5-7300HQ HD630 GTX1050
- 京东2018笔试题 神奇数