使用 Springboot + Nginx 的 http_secure_link_module 實現圖片防盜鏈并在 Vue 中展示功能

在當今互聯網環境中，圖片資源的安全性和有效管理至關重要。為了防止未經授權的訪問和濫用圖片資源，我們采用 Nginx 的 http_secure_link_module 模塊來實現圖片防盜鏈功能。這不僅能保護圖片的合法使用，還能有效控制資源的訪問權限，提升系統的安全性和穩定性。ZvU28資訊網——每日最新資訊28at.com

在本次配置中，我們對 secure_link 模塊進行了定制化的設置，以滿足特定的業務需求。通過引入 $remote_addr 變量，我們能夠更精確地控制訪問來源，進一步增強了防盜鏈的效果。同時，對密鑰的配置和 token 、過期時間的生成算法進行優化，確保了只有在合法條件下才能訪問圖片資源。ZvU28資訊網——每日最新資訊28at.com

Nginx 配置（nginx.conf）

user  nginx;worker_processes  1;error_log  /var/log/nginx/error.log warn;pid        /var/run/nginx.pid;events {    worker_connections  1024;}http {    include       /etc/nginx/mime.types;    default_type  application/octet-stream;    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '                      '$status $body_bytes_sent "$http_referer" '                      '"$http_user_agent" "$http_x_forwarded_for"';    access_log  /var/log/nginx/access.log  main;    sendfile        on;    keepalive_timeout  65;    # 啟用 secure_link 模塊    server {        listen 80;        server_name  your_domain;        # 私有密鑰配置        secure_link_secret your_private_secret;  # 此處的密鑰是用于生成和驗證 token 的關鍵元素，需要妥善保管和保密。它參與了 MD5 哈希計算，確保 token 的唯一性和安全性。        location /images {            secure_link $arg_token,$arg_expires,$remote_addr;            secure_link_md5 "$secure_link_secret$uri$arg_expires$remote_addr";  # 這個表達式詳細說明了如何根據密鑰、圖片的 URI、過期時間和客戶端的 IP 地址生成 MD5 哈希值，用于驗證請求的合法性。            if ($secure_link = "") {  # 如果 token 為空，直接拒絕訪問，返回 403 禁止訪問狀態碼。                return 403;            }            if ($secure_link = "0") {  # 如果 token 驗證失敗，返回 410 資源已不存在的狀態碼。                return 410;            }            root /path/to/images;  # 指定圖片的實際存儲路徑，確保 Nginx 能夠正確找到并提供服務。        }    }}

Pom.xml 依賴配置

<?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven.apache.org/POM/4.0.0"         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">    <modelVersion>4.0.0</modelVersion>    <groupId>com.example</groupId>    <artifactId>image-security</artifactId>    <version>1.0.0-SNAPSHOT</version>    <properties>        <java.version>11</java.version>    </properties>    <dependencies>        <dependency>            <groupId>org.springframework.boot</groupId>            <artifactId>spring-boot-starter</artifactId>        </dependency>        <dependency>            <groupId>org.yaml</groupId>            <artifactId>snakeyaml</artifactId>            <version>1.33</version>        </dependency>    </dependencies>    <build>        <plugins>            <plugin>                <groupId>org.springframework.boot</groupId>                <artifactId>spring-boot-maven-plugin</artifactId>            </plugin>        </plugins>    </build></project>

Yaml 配置文件（application.yml）

image:  domain: http://your_domainnginx:  secure-link-secret: your_secure_link_secret

ImageController 類（ImageController.java）

import org.springframework.beans.factory.annotation.Autowired;import org.springframework.beans.factory.annotation.Value;import org.springframework.core.env.Environment;import org.springframework.stereotype.Controller;import org.yaml.snakeyaml.Yaml;import java.io.InputStream;import java.util.Map;@Controllerpublic class ImageController {    @Autowired    private Environment environment;    public String generateImageUrl(String imageName) {        String imageDomain = environment.getProperty("image.domain");        // 生成過期時間（假設 1 小時后過期）        LocalDateTime expirationTime = LocalDateTime.now().plusHours(1);        long expiresInSeconds = expirationTime.toEpochSecond(ZoneOffset.UTC);        // 生成 token        String token = generateToken(imageName, expiresInSeconds);        return imageDomain + "/images/" + imageName + "?token=" + token + "&expires=" + expiresInSeconds;    }    private String generateToken(String uri, long expires) {        String secret = environment.getProperty("nginx.secure-link-secret");        String data = uri + expires + secret;        try {            MessageDigest digest = MessageDigest.getInstance("MD5");            byte[] hash = digest.digest(data.getBytes());            return Base64.getUrlEncoder().encodeToString(hash);        } catch (NoSuchAlgorithmException e) {            e.printStackTrace();            return null;        }    }}

Spring Boot 控制器生成圖片列表

import org.springframework.web.bind.annotation.GetMapping;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RestController;import java.util.ArrayList;import java.util.List;@RestController@RequestMapping("/image")public class ImageController {    @GetMapping("/list")    public List<String> getImageList() {        List<String> imageUrls = new ArrayList<>();        imageUrls.add(generateImageUrl("image1.jpg"));        imageUrls.add(generateImageUrl("image2.jpg"));        // 此處根據實際邏輯生成帶有 token 和 expires 參數的圖片鏈接        return imageUrls;    }}

Vue 中展示圖片列表

<template>  <div>    <ul>      <li v-for="imageUrl in imageList" :key="imageUrl">        <img :src="imageUrl" />      </li>    </ul>  </div></template><script>export default {  data() {    return {      imageList: []    };  },  mounted() {    // 發送請求獲取圖片列表    this.$http.get('/image/list')     .then(response => {        const imageDomain = '${process.env.VUE_APP_IMAGE_DOMAIN}';        this.imageList = response.data.map(url => imageDomain + url);      })     .catch(error => {        console.error('獲取圖片列表失敗', error);      });  }};</script>

總結

本次方案通過引入 Nginx 的 http_secure_link_module 模塊實現了圖片防盜鏈功能，增強了圖片資源的安全性。在配置方面，我們使用 Yaml 文件來管理關鍵配置信息，包括圖片域名和 Nginx 的安全鏈接密鑰。通過在 ImageController 類中讀取這些配置，生成帶有令牌和過期時間的圖片 URL。在 Vue 端，我們根據配置的域名來完整地構建圖片的訪問地址。整個方案具有良好的靈活性和可擴展性，能夠根據實際業務需求進行調整和優化，有效保護圖片資源的合法訪問和使用。ZvU28資訊網——每日最新資訊28at.com

本文鏈接：http://m.www897cc.com/showinfo-26-101706-0.html使用 Springboot + Nginx 的 http_secure_link_module 實現圖片防盜鏈在 Vue 展示

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇： 2024 React 生態工具最能打的組合！

下一篇： Python 中窗口操作的完整指南