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

复制代码
// 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);

复制代码
<-- html部分 -->
<body>
    <img src="http://www.chenhd.me:8888/2.png" />
</body>

• 127.0.0.1 www.chenhd.me
• 127.0.0.1 www.chd.me3 Q( [- {0 A  X7 v. M  N) R2 W4 A
  

• windows系统修改hosts文件地址为C:\Windos\System32\drivers\etc下的hosts文件，拷贝hosts文件修改后替换即可
• mac系统下较为方便通过终端直接sudo vi /etc/hosts修改即可- r% P  m  z; z* }4 _