前端后端实现防盗链

news2024/10/7 9:28:07

防盗链（Referer Header）是指在网页中嵌入的外部资源（如图片、音视频等）被非法使用或盗链的现象。为了避免这种情况的发生，我们可以通过前端和后端技术来防止盗链。

在这里插入图片描述

前端防盗链

前端防盗链可以通过在页面中添加 JavaScript 脚本来实现。当外部资源被加载时，我们可以检查其请求来源（即 Referer Header），如果不是我们的网站，则拒绝加载资源。

以下是一个简单的前端防盗链示例：

Copy code
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>防盗链示例</title>
    <script>
      window.onload = function() {
        var imgs = document.getElementsByTagName('img');
        for (var i = 0; i < imgs.length; i++) {
          var img = imgs[i];
          if (img.src.indexOf('your-domain.com') == -1) {
            img.src = 'default-image.jpg';
          }
        }
      }
    </script>
  </head>
  <body>
    <img src="http://other-domain.com/image.jpg">
    <img src="http://your-domain.com/image.jpg">
  </body>
</html>

在这个示例中，我们检查了所有标签的 src 属性，如果其来源不是我们的网站，则将其替换为默认图片。这样，如果有人试图盗链我们的图片，就会显示默认图片。

Node.js 防盗链

在后端，我们可以通过检查请求中的 Referer Header 来判断请求的来源是否合法。如果不合法，则可以返回 403 Forbidden 或重定向到另一个页面。

以下是一个使用 Node.js 的后端防盗链示例：

Copy code
const express = require('express');
const app = express();

app.get('/image.jpg', (req, res) => {
  const referer = req.get('Referer');
  if (!referer || !referer.includes('your-domain.com')) {
    res.redirect('/unauthorized.html');
  } else {
    res.sendFile(__dirname + '/image.jpg');
  }
});

app.listen(3000, () => {
  console.log('Server started on http://localhost:3000');
});

在这个示例中，我们使用了 Express 框架来创建一个简单的服务器。当请求 /image.jpg 时，我们检查其 Referer Header 是否包含我们的域名，如果不包含，则重定向到 unauthorized.html 页面。如果包含，则返回 image.jpg 文件。

总结
以上是前端和后端实现防盗链的两个示例。虽然这些方法并不能完全防止盗链，但可以有效地降低盗链的发生。同时，我们还可以通过 CDN、加密等方式来进一步提高防盗链的效果。

Java

如果你想在后端使用Java来实现防盗链，可以使用Servlet来拦截请求并进行判断。

以下是一个使用Java Servlet实现的后端防盗链示例：

Copy code
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/image.jpg")
public class ImageServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    protected void doGet(HttpServletRequest request, HttpServletResponse response) 
            throws ServletException, IOException {
        String referer = request.getHeader("Referer");
        if (referer == null || !referer.contains("your-domain.com")) {
            response.sendRedirect("/unauthorized.html");
        } else {
            response.setContentType("image/jpeg");
            response.setHeader("Cache-Control", "no-store");
            response.setHeader("Pragma", "no-cache");
            response.setDateHeader("Expires", 0);
            InputStream in = getServletContext().getResourceAsStream("/WEB-INF/images/image.jpg");
            OutputStream out = response.getOutputStream();
            byte[] buffer = new byte[4096];
            int bytesRead = -1;
            while ((bytesRead = in.read(buffer)) != -1) {
                out.write(buffer, 0, bytesRead);
            }
            in.close();
            out.close();
        }
    }
}

在这个示例中，我们创建了一个名为ImageServlet的servlet，当访问 /image.jpg 时，该servlet将检查请求中的 Referer Header 是否包含我们的域名。如果不包含，则重定向到 unauthorized.html 页面。如果包含，则返回 image.jpg 文件。

在返回图片时，我们还设置了一些响应头，以确保浏览器不会缓存该图片。

需要注意的是，ImageServlet中的图片应该放在 WEB-INF 目录下，以确保它们不会直接被访问到。只有通过 servlet，才能访问到图片。

以上是一个使用Java Servlet实现的后端防盗链示例，你可以根据自己的需求和情况进行适当的修改和调整。

使用HTML标签的referrer-policy属性

HTML标签有一个referrer-policy属性，可以用来控制浏览器发送referer信息的方式。该属性有几个可选值，包括no-referrer、no-referrer-when-downgrade、same-origin、origin、strict-origin、strict-origin-when-cross-origin、unsafe-url。其中，no-referrer是指不发送referrer信息，而same-origin是指只在同源情况下发送referrer信息。

<img src="image.jpg" referrer-policy="same-origin" />

使用JavaScript设置HTTP头中的referrer属性
通过JavaScript设置HTTP头中的referrer属性，也可以实现防盗链的效果。以下是一个示例代码：

fetch("image.jpg", {
  referrer: "same-origin"
})
.then(response => {
  if (response.ok) {
    // 图片加载成功
  } else {
    // 图片加载失败
  }
})
.catch(error => {
  // 加载出错
});

在这个示例中，我们使用fetch API来加载图片，并在请求中设置referrer属性为same-origin。

使用nginx反向代理

除了前端技术外，还可以使用nginx反向代理来实现防盗链。nginx是一种高性能的Web服务器，它提供了反向代理功能。我们可以将图片存放在nginx服务器上，并设置nginx的反向代理规则，只允许特定的域名访问这些图片。以下是一个示例nginx配置文件：

server {
    listen 80;
    server_name your-domain.com;
    location /images/ {
        valid_referers your-domain.com;
        if ($invalid_referer) {
            return 403;
        }
        proxy_pass http://localhost:8080/images/;
    }
}