node.js突破nginx防盗链机制，下载图片案例分析原创

原创更新时间：2023年04月15日 15:58:19 原创投稿：shichen2014

这篇文章主要介绍了node.js突破nginx防盗链机制，下载图片的方法,结合具体案例形式分析了防盗链的相关原理与node.js使用axios库下载防盗链图片的相关操作技巧,需要的朋友可以参考下

问题

今天项目需求要求采集几个网站的信息，包括一些区块链统计图表之类的信息。

笔者使用的是node.js+axios库发送get请求来获取在图片，下载到本地。测试代码如下：

import fs from 'fs';
import path from 'path';
import http from 'http';
import https from 'https';

const __dirname = path.resolve();
let filePath = path.join(__dirname,'/imgtmp/');
async function downloadfile(url,filename,callback){
    try {
        let ext = path.extname(url);
        
        console.log('下载的文件名：',filename)
        let mod = null;//http、https 别名
        if(url.indexOf('https://')!==-1){
            mod = https;
        }else{
            mod = http;
        }
        const req = mod.get(url, {
            headers:{
                "Content-Type": "application/x-www-form-urlencoded"
              }
        },(res)=>{
            let writePath = '';
            writePath = filePath + '/' + filename;
            const file = fs.createWriteStream(writePath)
            res.pipe (file)
            file.on ("error", (error) => {
                console.log (`There was an error writing the file. Details: `,error)
                return false;
            })
            file.on ("close", () => {
                callback (filename)
            })

            file.on ('finish', () => {
                file.close ()
                console.log ("Completely downloaded.")
            })
        })

        req.on ("error", (error) => {
            console.log (`Error downloading file. Details: $ {error}`)
        })
    } catch (error) {
        console.log('图片下载失败！',error);
    }
    
}

let url = 'https://xx.xxxx.com/d/file/zxgg/a2cffb8166f07c0232eca49f8c9cc242.jpg';//图片url
let filename = path.basename(url);
await downloadfile(url,filename,()=>{
    console.log(filename,"文件已下载成功");
})

运行代码，图示文件下载成功！

然而当笔者打开图片一看，就傻眼了~图片显示损坏，再看大小，只有304字节~

目测应该是图片保存了一些错误信息，于是用editplus以文本形式打开该图片，果然看到了错误信息~

解决方法

百度了一下，确定是图片nginx服务器Referer防盗链设置，于是继续百度，找到了问题的关键~

谷歌浏览器打开网址，在控制台上看到了这段Referer信息：

对方的网站在Referer设置的就是他的网址，于是改进代码，在headers中加入Referer参数"referer":'https://www.xxxx.com/'：

import fs from 'fs';
import path from 'path';
import http from 'http';
import https from 'https';

const __dirname = path.resolve();
let filePath = path.join(__dirname,'/imgtmp/');
async function downloadfile(url,filename,callback){
    try {
        let ext = path.extname(url);
        
        console.log('下载的文件名：',filename)
        let mod = null;//http、https 别名
        if(url.indexOf('https://')!==-1){
            mod = https;
        }else{
            mod = http;
        }
        const req = mod.get(url, {
            headers:{
                "Content-Type": "application/x-www-form-urlencoded",
                "referer":'https://www.xxxx.com/'
              }
        },(res)=>{
            let writePath = '';
            writePath = filePath + '/' + filename;
            const file = fs.createWriteStream(writePath)
            res.pipe (file)
            file.on ("error", (error) => {
                console.log (`There was an error writing the file. Details: `,error)
                return false;
            })
            file.on ("close", () => {
                callback (filename)
            })

            file.on ('finish', () => {
                file.close ()
                console.log ("Completely downloaded.")
            })
        })

        req.on ("error", (error) => {
            console.log (`Error downloading file. Details: $ {error}`)
        })
    } catch (error) {
        console.log('图片下载失败！',error);
    }
    
}

let url = 'https://xx.xxxx.com/d/file/zxgg/a2cffb8166f07c0232eca49f8c9cc242.jpg';//图片url
let filename = path.basename(url);
await downloadfile(url,filename,()=>{
    console.log(filename,"文件已下载成功");
})

再次运行代码，图片文件下载成功，打开显示一切正常！

后记

笔者又测试了另一种实现方法，即使用playwright调用浏览器打开页面，再使用await page.locator('selector路径').screenshot({ path: 'image图片保存路径'}); 将图片网页截图保存下载。

对比了一番，发现使用playwright截图的方法需要在遍历图片元素的时候根据当前元素逆向获取parentNode节点以及遍历childNodes节点，算法相对比较复杂！而且screenshot函数截图的效果也会比原图略显模糊，因此推荐使用axios传递Referer参数的方法获取原图。

PS：方法二的调试过程中写了一段逆向遍历selector的函数，提供给大家参考，如有不足之处，欢迎指正~

/**
 * 获取selector
*/
function getSelectorPath(element) {
    if (!!element.id !== false) {
      return '#' + element.id;
    }
    if (element === document.body && !!element) {
      return element.tagName.toLowerCase();
    }
  
    let ix = 0;
    const siblings = element.parentNode?.childNodes;
    for (let i = 0; i < siblings?.length; i++) {
      const sibling = siblings[i];
      if (sibling.innerHTML === element.innerHTML && !!element.parentNode) {
        return `${getSelectorPath(element.parentNode)} > ${element.tagName.toLowerCase()}:nth-child(${ix + 1})`;
      }
      if (sibling.nodeType === 1) {
        ix++;
      }
    }
}

您可能感兴趣的文章:

Node.js调用java之node-java问题
这篇文章主要介绍了Node.js调用java之node-java问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
详解Node.js开发中的express-session
express-session 是基于express框专门用于处理session的中间件，本篇文章主要介绍了详解Node.js开发中的express-session，有兴趣的可以了解一下
2017-05-05
NodeJs中express框架的send()方法简介
这篇文章主要介绍了NodeJs中express框架的send()方法简介，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-06-06
nodejs基础之buffer缓冲区用法分析
这篇文章主要介绍了nodejs基础之buffer缓冲区用法,结合实例形式分析了buffer缓冲区的概念、功能、创建、读写等相关操作技巧,需要的朋友可以参考下
2018-12-12
nodejs与浏览器中全局对象区别点总结
在本篇文章里小编给大家整理的是一篇关于nodejs与浏览器中全局对象区别点总结内容，对此有需要的朋友们可以学习下。
2021-12-12
详解如何使用Node.js编写命令工具——以vue-cli为例
本篇文章主要介绍了如何使用Node.js编写命令工具——以vue-cli为例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-06-06
npm配置国内镜像资源+淘宝镜像的方法
这篇文章主要介绍了npm配置国内镜像资源+淘宝镜像的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-09-09
nodejs dgram模块广播+组播的实现示例
这篇文章主要介绍了nodejs dgram模块广播+组播的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-11-11
nodejs中实现sleep功能实例
这篇文章主要介绍了nodejs中实现sleep功能实例,本文讲解了sleep功能的开发过程和使用效果及性能测试,需要的朋友可以参考下
2015-03-03
基于 Node 实现简易 serve静态资源服务器的示例详解
静态资源服务器(HTTP 服务器)可以将静态文件(如 js、css、图片）等通过 HTTP 协议展现给客户端。本文介绍如何基于 Node 实现一个简易的静态资源服务器，感兴趣的朋友一起看看吧
2022-06-06