Next.js 集成防盗链功能的解决方案-JavaScript中文网-JavaScript教程资源分享门户

什么是防盗链？

防盗链是指通过一些措施，防止你的图片、视频等媒体资源被其他网站非法使用。

一般情况下，我们需要在服务端对 HTTP 请求头中的 Referer(来自哪个页面) 进行判断，如果请求头中的 Referer 值不是当前站点的域名，则可以认为是盗链行为。此时，我们可以通过服务端响应状态码或者返回一张仅包含「禁止盗链」图片的响应内容给请求者。

Next.js 中如何实现防盗链？

Next.js 作为一个流行的 React 框架，本身并没有集成防盗链的功能。但是，我们可以通过使用 node.js 中的 http 模块来完成防盗链的功能。下面，我们就来详细介绍一下如何在 Next.js 中实现防盗链的功能。

Step 1: 安装依赖包

为了实现防盗链的功能，我们需要安装一些依赖包。在 Next.js 项目的根目录下，执行以下命令：

npm i http url fs --save

其中，http 模块是 Node.js 自带的一个模块，用于处理 HTTP 请求和响应。url 模块则是 Node.js 自带的一个模块，用于解析并处理 URL。fs 模块是 Node.js 中的一个模块，用于文件的读写。

Step 2: 编写中间件函数

在 Next.js 项目的根目录下，创建一个名为 preventHotlinking.js 的中间件函数，代码如下：

// javascriptcn.com 代码示例
const http = require('http');
const url = require('url');
const fs = require('fs');

module.exports = (req, res, next) => {
  // 获取图片的路径
  const imagePath = url.parse(req.url).pathname;
  
  // 判断是否是图片文件
  if (/\.(jpg|jpeg|png|bmp|gif|webp)$/i.test(imagePath)) {
    // 获取 referer
    const referer = req.headers.referer || req.headers.referrer || '';
    // 获取主机名
    const { hostname } = url.parse(referer, false, true);
    const currentHost = req.headers.host;
    
    // 判断是否跨域，如果是的话则要求referer与本站的domain相同才可加载
    if (hostname && currentHost && hostname !== currentHost) {
      res.writeHead(403, {
        'Content-Type': 'text/html;charset=utf8'
      });
      
      fs.readFile(__dirname + '/no_hotlinking.jpg', (err, data) => {
        if (err) {
          console.log(err);
          return;
        }
        res.end(data);
      });
      
      return;
    }
  }

  next();
}

上述代码首先通过 url.parse 函数获取图片的路径，然后正则表达式校验图片的扩展名是否符合标准。接着获取 referer(或者 referrer) 值，根据其值判断本次请求是否来自当前站点，如果来源不是本站点，则返回一个状态码为 HTTP 403 的响应。最后一个 no_hotlinking.jpg 是一个本地资源，表示防盗链的占位图片。

Step 3: 集成函数

在 Next.js 项目中，将编写的中间件函数作为 server 中 middleware 数组的一部分集成起来。在 Next.js 项目的根目录下，打开 server.js 文件（如果不存在则需要手动创建），并编写以下代码：

// javascriptcn.com 代码示例
const express = require('express');
const next = require('next');
const preventHotlinking = require('./preventHotlinking');

const server = express();
const port = process.env.PORT || 3000;
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  server.use(preventHotlinking);
  server.all('*', (req, res) => {
    return handle(req, res);
  });

  server.listen(port, (err) => {
    if (err) throw err;
    console.log(`> Ready on http://localhost:${port}`);
  });
});

上述代码中，我们使用 express 来创建服务器。在应用中间件之前，应用程序必须配置如下代码，以允许能够在 HTTP 请求中读取请求正文。

server.use(express.json());
server.use(express.urlencoded({ extended: true }));

然后，我们将刚才编写的防盗链中间件作为 server 的中间件之一加入。server.all 函数就是为所有请求（*）指定回调函数，如果请求不符合路由，则使用 handle 处理器来处理。

Step 4: 正确设置 publicConfig

最后一步，打开 next.config.js，确保正确设置 publicConfig。

module.exports = {
  publicConfig: {
    blockingPreventHotlinking: true
  }
};

以上设置 publicConfig 的 blockingPreventHotlinking 属性为 true 即可实现 Next.js 集成防盗链功能的解决方案。

总结

本文详细介绍了如何在 Next.js 项目中实现防盗链功能。通过 node.js 中的 http 模块、url 模块、fs 模块等组成，以及中间件函数和 publicConfig 的配合使用，为 Next.js 提供了简单且实用的防盗链功能，通过本文的学习，可以让开发者更好地保护自己的网站资源的安全性。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/654cd7397d4982a6eb62b9fb