探索MutationObserver：无需后端服务器，在前端实现文本水印

2023-10-01 05:37:00

网络信息爆炸的时代，信息泄露的隐患无处不在，为了防止文字数据信息被泄露或被窃取，我们可以采取措施保护数据的安全，而在前端添加水印就是一个简单而有效的方式。本文将介绍如何使用MutationObserver实现文本水印功能，让数据更加安全。

MutationObserver简介

MutationObserver是一种用于监听DOM元素变化的API，它可以监视DOM树中特定节点及其子节点的变化，包括节点的增加、删除和修改。MutationObserver是前端水印实现的利器，它允许我们在DOM元素发生变化时进行实时响应，从而实现水印的动态添加。

实现原理

文本水印的实现原理并不复杂，首先，我们需要生成一张水印图片，这张图片可以是纯色、图案、文字或其他形式，根据具体需求而定。然后，我们将水印图片作为背景添加到网页或文本内容中，使其与文本内容融为一体。这样一来，当用户试图截图或复制文本内容时，水印就会清晰可见，起到保护内容的作用。

代码示例

const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.type === "childList") {
      // 在新添加的子节点上添加水印
      const addedNodes = mutation.addedNodes;
      for (let i = 0; i < addedNodes.length; i++) {
        const node = addedNodes[i];
        if (node.nodeType === Node.ELEMENT_NODE) {
          // 判断节点是否为文本节点
          if (node.nodeName === "P" || node.nodeName === "DIV") {
            // 在文本节点上添加水印
            addWatermark(node);
          }
        }
      }
    }
  });
});

// 监听页面中的所有文本节点
observer.observe(document.documentElement, {
  childList: true,
  subtree: true,
});

// 添加水印函数
function addWatermark(node) {
  // 创建水印元素
  const watermark = document.createElement("div");
  watermark.classList.add("watermark");
  watermark.innerText = "水印文字";

  // 将水印元素添加到文本节点中
  node.insertBefore(watermark, node.firstChild);
}