前端实现的水印很容易通过 CSS 或者 删除 DOM 节点的方式去除掉，该怎么办？

  • Z时代
  • 2024-02-08
  • 分类：IT

项目中要支持预览发票等内容时，要为其添加用户名作为水印内容，在测试阶段测试人员说这个水印可以 CSS 或者 删除 DOM 节点的方式去除。

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

回答：

监听 DOM 变化，被删掉后又加进去。

当然，这些都是防君子不防小人的，别人还可以想办法干掉你的监听。

毕竟你的代码都已经在用户侧了。

回答：

可以使用 MutationObserver 监听dom的变化，阻止用户去除水印
https://juejin.cn/post/7020602166591111205

回答：

  1. 在水印元素上设置 pointer-events: none 属性，这样水印元素将不会响应用户的鼠标事件，防止用户通过点击或拖拽删除水印。
  2. 使用 JavaScript 实现水印，并将水印代码混淆和压缩，增加代码的可读性和修改难度，使其难以被绕过。
  3. 在水印元素和其父元素上设置 user-select: none 属性，防止用户选中并删除水印。
  4. 将水印元素添加到 canvas 元素中，这样水印就成为了画布上的一部分，不容易被绕过或删除。可以使用 canvas 的 API 来实现水印的绘制和样式控制。
  5. 使用第三方水印服务，将水印服务与原始内容分离，防止用户通过删除 DOM 节点或修改 CSS 样式来删除水印。在这种情况下，用户访问的内容由水印服务动态生成，而不是直接从服务器获取原始内容。
本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

回答：

能干掉css，dom就能干掉 js 难度不一样而已 常规通过canvas生成图片就足够了。

回答：

通过 Canvas 生成图片就好了，特别是在打印的的时候。这样除非说在用户端修改你的渲染代码，其他情况下打印出来的结果都是会有水印的。

但是如果说用户在打印之前通过自行修改的方式截图，那么不管什么样的方式都很难避免。
除非说完全使用 Canvas 来实现。

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

以上是 前端实现的水印很容易通过 CSS 或者 删除 DOM 节点的方式去除掉，该怎么办？ 的全部内容， 来源链接： utcz.com/p/933801.html

回到顶部