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

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

一、使用 Token 保护图片资源

1. 「动态生成 Token」

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

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

   // 生成当前时间戳作为 token
   functiongenerateToken() {
   returnDate.now();
   }
   
   // 获取图片 URL
   functiongetImageUrl() {
   const token = generateToken();
   return`https://example.com/images/photo.jpg?token=${token}`;
   }
   
   // 设置图片 src
   document.getElementById('image').src = getImageUrl();
   

   「解释：」

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

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

<script>
exportdefault {
  data() {
return {
imageUrl: ''
    };
  },
methods: {
    generateToken() {
returnDate.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>
   
   <imgclass="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 事件监听器来阻止右键菜单弹出。

<canvasid="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 绘制图片并添加水印文本。

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

1. 「验证 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;
     });
   

   「解释：」

• 使用 fetch 请求图片，手动设置 Referer 头部（尽管大多数浏览器自动设置）。

总结

前端在实现图片防盗链方面，主要通过动态生成 Token、设置图片加载控制（如禁用右键菜单和添加水印）以及与服务器端防盗链机制配合来保护图片资源。虽然真正的防盗链逻辑通常是在服务器端实现，但前端可以采取这些措施来增强保护效果。结合前端和后端的策略，可以有效地防止未经授权的图片访问和盗用。

关注更多AI编程资讯请去AI Coding专区：https://juejin.cn/aicoding