JavaScript实现前端水印功能_javascript安全-js教程-PHP中文网

JavaScript实现前端水印功能_javascript安全

幻影之瞳

发布： 2025-10-31 19:07:02

原创

108人浏览过

前端水印通过canvas生成半透明文本背景并固定定位覆盖页面，用于标识用户身份以防范信息泄露，虽可被禁用JS或截图绕过，但结合MutationObserver防删、定时校验与多层叠加等增强措施，能在管理后台等场景中有效提升溯源能力。

javascript实现前端水印功能_javascript安全

前端水印功能常用于防止截图泄露敏感信息，比如在管理后台、数据报表或视频会议系统中显示用户身份、时间戳等。通过 JavaScript 动态生成透明叠加层，可以在不影响用户体验的前提下实现防伪和溯源目的。虽然前端水印无法完全阻止恶意行为，但能起到警示和追踪作用。

基本原理与实现方式

前端水印的核心是创建一个覆盖在页面上的半透明 DOM 元素，通常使用 canvas 生成带文本的图像，再将其作为背景平铺。这种方式渲染效率高，且难以通过简单审查元素删除。

关键步骤包括：

利用 canvas 绘制包含用户名、时间、IP 等信息的水印文本
将 canvas 导出为 base64 图片数据
动态创建一个全屏 fixed 定位的 div，设置其 background-image 为该图片
将该元素插入 body 最底层，防止被其他内容遮挡

示例代码：

function createWatermark(text = '默认水印') {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  canvas.width = 200;
  canvas.height = 100;
  ctx.rotate(-Math.PI / 6);
  ctx.font = '14px Microsoft YaHei';
  ctx.fillStyle = 'rgba(0,0,0,0.1)';
  ctx.textAlign = 'left';
  ctx.fillText(text, 20, 50);

  const watermarkDiv = document.createElement('div');
  const url = canvas.toDataURL();
  watermarkDiv.style.position = 'fixed';
  watermarkDiv.style.top = '0';
  watermarkDiv.style.left = '0';
  watermarkDiv.style.width = '100%';
  watermarkDiv.style.height = '100%';
  watermarkDiv.style.pointerEvents = 'none'; // 不影响点击穿透
  watermarkDiv.style.backgroundImage = `url(${url})`;
  watermarkDiv.style.zIndex = '9999';
  watermarkDiv.style.opacity = '0.8';

  document.body.appendChild(watermarkDiv);
}
// 调用
createWatermark('用户：admin | 时间：2025-04-05');

登录后复制

增强安全性与反删除机制

由于前端代码可被调试修改，攻击者可能通过 DevTools 删除水印节点或禁用脚本。为提升防御能力，可以加入以下措施：

立即学习“Java免费学习笔记（深入）”；

阿贝智能

阿贝智能是基于AI技术辅助创作儿童绘本、睡前故事和有声书的平台，助你创意实现、梦想成真。

查看详情

监听 DOM 变化：使用 MutationObserver 监测水印元素是否被移除，一旦发现立即重建
定时校验：通过 setInterval 定期检查水印是否存在，间隔建议 1~2 秒
防止控制台拦截：混淆关键函数名，避免暴露 createWatermark 这类明显标识
多层水印：添加多个不同位置的水印容器，增加清除难度

简单反删除示例：

let observer;
function protectWatermark(watermarkEl) {
  observer = new MutationObserver(() => {
    if (!document.body.contains(watermarkEl)) {
      document.body.appendChild(watermarkEl);
    }
  });
  observer.observe(document.body, { childList: true, subtree: true });
}
// 在 createWatermark 结尾调用
protectWatermark(watermarkDiv);

登录后复制