网站页面水印效果的实现（下）：页面水印防篡改

旧城等待， 2024-03-04 05:44 193阅读 0赞

上一节 （[网站页面水印效果的实现（上）：页面水印的添加][Link 1]）和大家介绍了页面水印如何生成以及如何使用，这一节来介绍如何防止水印被篡改，其实重点就是水印被删除。毕竟辛辛苦苦搞出来的水印，是为了保护自己的知识产权，结果被人轻轻松松就给搞掉了，岂不是悲哀。

要防止被篡改，就需要先知道有哪些方法可以进行篡改。直接在页面操作不太可能，但是其实如果不加防范，可以非常轻松的就把水印干掉。可以从客户端浏览器的开发者工具中，通过浏览Elements信息，找到水印对应的div将其删除，就可以轻松的将水印删除。

![b67e751090db4b969bfed430a73a0b88.png][]

知道了水印如何被攻击和篡改，也就大致有了应对的解决方案。只要在程序设计时，监听水印信息的变化，从而判断是否需要重新生成水印即可。那又如何才能知道水印信息是否发生变化哪？

上一节中，曾提到有四点需要注意的关键因素：

***一、要使用js动态加载div元素，不能通过直接在页面添加div标签的方式创建***

现在大家明白是为什么了吧，如果直接在html创建div元素，一旦被删除，如何重新生成，反而相当麻烦，倒不如从一开始就把他搞成动态的，这就简单多了，一旦发现前端将水印签名遮罩层div给删除了，直接重新运行一遍被watchEffect包裹的代码逻辑即可恢复水印。

***二、要使用watchEffect方法而不是onMounted处理页面元素逻辑***

因为onMounted只会运行一次，除非页面被销毁重构，否则无论页面信息如何变化，都不会再执行内部的代码逻辑，因此也就无法恢复水印信息；

***三、要使用js动态加载css样式，不能通过class方式添加***

因为前端去修改你的class后台是监控不到的，他可以通过修改class来破坏水印信息。

这就是为什么，在上一节中将这几点给大家重点标红提示出来，当时没有做过多解释，在这里揭晓答案。

接下来处理如何监听的问题，JS为我们提供了一个接口-MutationObserver，用于观察DOM树的变化，可以监视指定DOM元素的所有变化，包括元素本身及其各级子元素的属性、内容的变化，并在变化发生时执行相应的操作。在不需要轮询的情况下，实时监测DOM变化，以便做出相应的处理。

于是在onMounted创建MutationObserver对象，并设置回调函数和监听配置。

onMounted(() => {
      obs = new MutationObserver((res) => {
        // console.info(res);
        for (let r of res) {
          for (let dom of r.removedNodes) {
            // 删除水印遮罩层div元素，触发重新生成水印
            if (customDiv == dom) {
              flag.value++;
              return;
            }
          }
          // 修改水印遮罩层div属性，触发重新生成水印
          if(customDiv == r.target){
            flag.value++;
            return;
          }
        }
      })
      obs.observe(yaken.value, {
        childList: true,           //监听目标节点的子节点的增加或删除事件
        attributes: true,          //监听目标节点的属性变化
        subtree: true,             //监听目标节点的所有后代节点而不仅仅是直接子节点
        characterData: true        //监听目标节点内容的变化
      });
    })

首先创建了一个MutationObserver对象，并设置了回调函数，一旦监听到了变化，就将触发回调函数里面的逻辑。回调函数返回的结果res其实就是一个消息记录的集合，通过遍历这个集合，找到对应操作触发的消息，在通过比对目标对象与触发监听消息的对象是否一致，来判断某个页面组件及其各层子组件的属性、内容等是否被操作过，从而决定要进行什么样的后处理。在这段代码中，主要监听了两个事件，一个是节点删除事件的消息，另一个是目标节点属性被修改事件消息。只要这两项信息被修改，就立即触发watchEffect内部逻辑，重构水印信息（[网站页面水印效果的实现（上）：页面水印的添加][Link 1]）。哪又如何触发这个逻辑哪？要在watchEffect中监听整个div的变化吗？当然不是，watchEffect只需要知道情况发生变化了即可，它并不需要了解变化的具体细节，所以只需要设置一个标志位参数flag就够了。只要情况发生变化，就改变标志位的值，watchEffect通过监听标志位参数变化触发内部逻辑。`与` `watch相同的是，它`可以监听数据的变化，并在数据变化时自动执行传入的回调函数`。与``watch不同的是`，它不需要指定要监听的具体数据，它会自动追踪***回调函数中所使用的响应式数据***，并在数据发生变化时触发回调。所以标志位参数flag一定要设置成响应式的，然后可以直接放到回到函数中。

创建了MutationObserver对象并设置好了回调函数就完事了吗？当然没有，上面乱七八糟的一大堆，都是对监听的后处理操作，你到底要监听谁、监听那些方面的信息你还没有配置，所以还需要给MutationObserver对象配置要监听的目标对象是谁，并且告诉它你要监听那些方面的变化。这里监听的对象是yaken引用的父元素的div，而不是我们动态创建的div，因为如果你监控了动态创建的div，一旦前端把它删除了，监控对象就消失了，监控机制也就失效了。这样一来，还得反复给重建构建的div元素配置监听，这样做显然不太明智。因此直接监控其父元素的变化。至于要监控哪些方面的变化，这里配置了四个属性：节点增删事件、节点属性变化、节点内容变化、各级子节点变化。

监听配置好了，再来修改一下watchEffect的代码逻辑：

和上一节 （[网站页面水印效果的实现（上）：页面水印的添加][Link 1]）代码比较一下，只是多了一个监听对象flag，以及添加了一个判断，用来判断customDiv对象是否为空，不为空，说明存在页面元素，那就先移除它再重新构建一个div即可。

最后不要忘记，在组件卸载的时候要取消监听，并且要将创建的水印区域div对象置空，以免存在内存泄漏的风险。

onUnmounted(() => {
      obs.disconnect();
      customDiv = null;
    })

到此为止，一个简单的水印防篡改的代码就完成了。当然，除了页面元素的删除、属性内容的修改触发了水印信息重构外，还可以根据实际情况自定义更多的触发条件，以保证水印安全，这里就不做过多介绍了，大家在实际工作中用到了再自行添加即可。接下来可以做个测试，此时再打开浏览器控制台，删除水印div试试看，你会发现根本删不掉。其实不是没删掉，是删掉了，只不过瞬间又重新生成了一个新的而已。

[Link 1]: https://blog.csdn.net/cnttr/article/details/132735335
[b67e751090db4b969bfed430a73a0b88.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/04/6595b8d7c6534f61b90bd95fce274bdf.png