移动端防删除水印组件

一、背景：为什么 H5 水印这么容易被“破解”？

在日常项目开发中，相信很多人都手动实现过水印功能，尤其是在一些后台系统、订单页面、敏感数据展示场景中，水印几乎是“标配”。

在 小程序 和 App（原生 / WebView） 场景下，水印基本是安全的：

• 用户无法轻易打开调试工具
• DOM 结构不可直接操作
• 样式和节点也很难被篡改

👉 但一到 H5，就完全是另一个世界了。

稍微懂点前端的用户都知道：

• 打开 Chrome DevTools
• 选中水印 DOM
• 直接 Delete
• 或者改个 display: none
• 再狠一点，给你来个 top: -9999px

🔆 水印瞬间消失，形同虚设。
这对于一些防数据泄露、防截图、防外传的场景来说，是完全不可接受的。

二、传统水印方案的问题总结

我们先来总结一下传统 H5 水印方案普遍存在的问题：

1️⃣ DOM 可被直接删除

<div class="watermark">xxx</div>

在调试器里：

• 选中元素
• 删除dom
• 水印被删除

2️⃣ 样式可被强制覆盖

.watermark {
  display: none;
}

或者：

.watermark {
  opacity: 0;
}

3️⃣ 位置可被恶意挪走

.watermark {
  position: fixed;
  top: -9999px;
}

📌 总结一句话：

只要水印是“静态的”，它就一定能被干掉。

三、核心思路：让水印“活”起来，而不是画死

既然删 DOM、改 CSS 都能搞掉水印，那解决思路就很清晰了：

你删一次，我就给你生成一次
你改样式，我就帮你还原
你隐藏，我就让它自己“复活”

这就是我实现的 —— 防盗水印方案。

四、防盗水印整体设计思路

整个方案核心只有一句话：

水印不是一次性渲染，而是一个被持续“监控和修复”的对象
具体拆分为三个层面：

✅ 1. 监听 DOM 是否被删除（防删除）

在 H5 环境中，我们可以使用 MutationObserver 来监听 DOM 变化。
监听内容包括：

• 水印节点是否被删除
• 水印节点是否被替换
• 父节点结构是否发生变化
  一旦发现：

水印 DOM 不存在了

👉 立刻重新生成水印节点并插入页面
用户手动删一次？
没关系，下一帧你又看见它了 😄

✅ 2. 监听样式变化（防隐藏、防透明）

有些用户不删 DOM，而是“文明一点”：

• display: none
• visibility: hidden
• opacity: 0
• z-index 调到最底层

对此我做了两件事：

🔹 记录水印的“初始样式快照”
包括：
- position
- top / left
- opacity
- z-index
- pointer-events
- transform
🔹 实时对比当前样式
一旦检测到：
样式被人为修改
👉 立刻还原为初始状态
哪怕你在控制台里强行改：

$0.style.display = 'none'

下一次样式校验时，它依然会被改回来。

五、最终效果展示

经过这一套防护之后，水印的表现是：

• ❌ 删不掉
• ❌ 隐藏不了
• ❌ 挪不走
• ❌ 覆盖不了
  哪怕用户：
• 打开 DevTools
• 疯狂修改 DOM
• 手动改 CSS
• 甚至写脚本干预
  最终结果只有一个：

水印会一次又一次地“复活”

六、性能与安全性考虑

当然，这里也不是无脑监听：

• MutationObserver 只监听必要节点
• 样式校验做了节流
• 只在 H5 环境启用
• 小程序 / App 完全不受影响

📌 既保证安全性，也兼顾性能

结尾

如果你觉得这篇文章帮你解决了你现在的问题，那就请给我来个 三连支持一下 ♥️

➡️ 点赞 支持一下
➡️ 收藏 以防找不到
➡️ 评论 我会回访你！
➡️ 关注 不会迷路哦！

你的支持是我持续更新的动力，我们下篇更精彩！🚀🔥

参考github项目地址：hy-design-uni

👉 欢迎大家给华玥组件库star。 ✅