当前位置：首页 > article >正文

前端如何实现图片伪防盗链，保护页面图片

article 2024/10/2 10:00:00

在前端开发中，实现图片防盗链通常涉及到与后端服务器的交互，因为防盗链机制主要是在服务器端实现的。然而，前端也可以采取一些措施来增强图片保护，并与服务器端的防盗链策略配合使用。以下是前端可以采用的一些方法：

一、使用 Token 保护图片资源

1、动态生成 Token

在用户请求图片时，可以在前端生成一个包含时间戳的 token，然后将其附加到图片 URL 中。这个 token 可以在服务器端验证。

前端代码示例（使用 JavaScript）：

// 生成当前时间戳作为 token
function generateToken() {
    return Date.now();
}

// 获取图片 URL
function getImageUrl() {
    const token = generateToken();
    return `https://example.com/images/photo.jpg?token=${token}`;
}

// 设置图片 src
document.getElementById('image').src = getImageUrl();

解释：
generateToken() 函数生成一个时间戳作为 token。
getImageUrl() 函数将 token 附加到图片 URL 中，以便进行验证。

2、在图片请求中使用 Token

在图片加载时，确保 URL 中包含有效的 token。前端可以在页面加载时动态设置图片 URL。

前端代码示例（使用 Vue.js）：

<template>
  <img :src="imageUrl" alt="Protected Image" />
</template>

<script>
export default {
  data() {
    return {
      imageUrl: ''
    };
  },
  methods: {
    generateToken() {
      return Date.now(); // 或使用其他方法生成 token
    }
  },
  created() {
    const token = this.generateToken();
    this.imageUrl = `https://example.com/images/photo.jpg?token=${token}`;
  }
};
</script>

解释：

使用 Vue 的生命周期钩子 created 来生成 token 并设置图片 URL。

二、设置图片加载控制

1、防止右键下载

在前端，你可以通过 CSS 或 JavaScript 来禁用图片的右键菜单，从而防止用户通过右键菜单下载图片。

前端代码示例（使用 CSS）：

<style>
.no-right-click {
  pointer-events: none;
}
</style>

<img class="no-right-click" src="https://example.com/images/photo.jpg" alt="Protected Image" />

前端代码示例（使用 JavaScript）：

document.addEventListener('contextmenu', function (e) {
    if (e.target.tagName === 'IMG') {
        e.preventDefault();
    }
});

解释：

使用 CSS 属性 pointer-events: none 来禁用右键菜单。
使用 JavaScript 事件监听器来阻止右键菜单弹出。

2、使用水印

在图片上添加水印是另一种保护图片的方式。前端可以通过 Canvas 绘制水印，但通常这在图片生成或处理阶段进行更为合适。

前端代码示例（使用 Canvas）：

<canvas id="myCanvas" width="600" height="400"></canvas>
<script>
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');
  const img = new Image();

  img.src = 'https://example.com/images/photo.jpg';
  img.onload = function() {
    ctx.drawImage(img, 0, 0);
    ctx.font = '30px Arial';
    ctx.fillStyle = 'red';
    ctx.fillText('Watermark', 10, 50);
  };
</script>

解释：

使用 Canvas 绘制图片并添加水印文本。

三、与服务器端防盗链机制配合

验证 Referer

在前端代码中，可以通过设置 Referer 头（这通常由浏览器自动处理）来帮助服务器验证请求来源。

前端代码示例（使用 Fetch API）：

fetch('https://example.com/images/photo.jpg', {
  method: 'GET',
  headers: {
    'Referer': 'https://yourwebsite.com'
  }
}).then(response => response.blob())
  .then(blob => {
    const url = URL.createObjectURL(blob);
    document.getElementById('image').src = url;
  });

解释：