J*aScript实现前端水印功能_j*ascript安全_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

JaScript实现前端水印功能_jascript安全

2025-10-31

浏览次数：次

返回列表

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

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

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

基本原理与实现方式

前端水印的核心是创建一个覆盖在页面上的半透明 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 删除水印节点或禁用脚本。为提升防御能力，可以加入以下措施：

BJXSHOP网上开店专家

BJXShop网上购物系统是一个高效、稳定、安全的电子商店销售平台，经过近三年市场的考验，在中国网购系统中属领先水平；完善的订单管理、销售统计系统；网站模版可DIY、亦可导入导出；会员、商品种类和价格均实现无限等级；管理员权限可细分；整合了多种在线支付接口；强有力搜索引擎支持... 程序更新：此版本是伴江行官方商业版程序，已经终止销售，现于免费给大家使用。比其以前的免费版功能增加了：1，整合了论坛

0 查看详情 BJXSHOP网上开店专家

监听 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);