前端水印生成与防护的JavaScript实现_javascript安全-js教程-PHP中文网

前端水印生成与防护的JavaScript实现_javascript安全

幻影之瞳

发布： 2025-11-05 12:51:21

原创

540人浏览过

答案：前端水印通过JavaScript动态生成半透明文本覆盖页面，用于防截图盗用，可结合MutationObserver防止删除，并嵌入用户信息溯源，但存在被禁用JS、截图录屏绕过等安全局限，需配合后端机制使用。

前端水印生成与防护的javascript实现_javascript安全

在前端开发中，水印常用于防止内容被非法截图或盗用，尤其在数据可视化、后台管理系统、敏感信息展示等场景中尤为重要。通过 JavaScript 动态生成水印，不仅能增强版权保护意识，还能在一定程度上起到追踪泄露源的作用。本文将介绍如何实现前端水印的生成与防护，并讨论其安全性局限。

动态水印的 JavaScript 实现

前端水印通常以半透明文本或图案的形式叠加在页面上，用户无法直接选中或复制。可以通过创建一个覆盖层（div）并不断插入水印内容来实现。

以下是一个简单的水印生成函数示例：

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

function createWatermark(text = '保密文档', options = {}) {
  const {
    fontSize = '16px',
    color = 'rgba(0, 0, 0, 0.1)',
    rotate = -20,
    zIndex = 9999
  } = options;
<p>const watermark = document.createElement('div');
watermark.id = 'watermark';
watermark.style.position = 'fixed';
watermark.style.top = '0';
watermark.style.left = '0';
watermark.style.width = '100%';
watermark.style.height = '100%';
watermark.style.pointerEvents = 'none'; // 不影响用户操作
watermark.style.zIndex = zIndex;
watermark.style.opacity = '0.5';</p><p>// 生成重复水印背景
let html = '';
for (let i = 0; i < document.documentElement.clientWidth / 100; i++) {
for (let j = 0; j < window.innerHeight / 50; j++) {
html += <code><span style=" position: absolute; left: ${i * 100}px; top: ${j * 50}px; font-size: ${fontSize}; color: ${color}; transform: rotate(${rotate}deg); pointer-events: none; user-select: none; ">${text}</span></code>;
}
}
watermark.innerHTML = html;
document.body.appendChild(watermark);
}</p><p>// 调用示例
createWatermark('机密 - 张三 - 2025-04-05 10:23', { fontSize: '14px', color: 'rgba(255,0,0,0.1)' });</p>

登录后复制

防止水印被轻易移除

虽然水印能起到警示作用，但前端代码对用户是可见的，攻击者可通过开发者工具删除 DOM 元素或禁用脚本。为增加移除难度，可采取以下防护措施：

定时检测水印是否存在：使用 setInterval 定期检查水印元素是否被删除，若被删除则重新插入。
监听 DOM 变化：利用 MutationObserver 监听 body 子元素变化，一旦发现水印被移除，立即恢复。
混淆关键代码：将水印逻辑封装并混淆，增加逆向分析成本。
结合用户标识动态生成内容：如将用户 ID、IP 或时间戳嵌入水印，便于溯源。

示例：使用 MutationObserver 防止删除

NameGPT名称生成器

免费AI公司名称生成器，AI在线生成企业名称，注册公司名称起名大全。

查看详情

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

const observer = new MutationObserver(() => {
  if (!document.getElementById('watermark')) {
    createWatermark('防删水印 - ' + getUserInfo()); // 重新生成
  }
});
<p>observer.observe(document.body, { childList: true, subtree: true });</p>

登录后复制