JavaScript奇技淫巧：防删水印

JShaman原创资料，作者：w3sft，如转载请保留此信息。

为了保护版权、防截图、防拍照等，有些我们会给网页中的视频、图片或文字加水印。

实现的方式，可能有多种，比如：对图片、视频而言，可以在服务端完成水印，但对于文字信息类，一般只能在前端页面中进行水印添加。

本文分享一种图层式防删水印技术。其效果是：在页面渲染完成后，由JavaScript进行图层水印添加，并会实时检测水印状态，如果水印被删除、隐藏、或设置为透明，都会重置水印。

源码

防删文字水印
水印内容不可删除，如检测到被删除，会重新添加水印

技术原理

添加水印的方式平平无奇，只是新建了一个canvas图层，在图层中叠加水印内容。

取巧的是用MutationObserver对水印进行监控和重置。MutationObserver是一个很有创意的接口，它可以监听页面元素变化，任何元素的修改，如节点的增减、属性值更新、文本内容的改动都会触发MutationObserve事件，在本例中，会监测两种事件：节点删除、节点属性发生变化。

如，删除水印节点：

删除时触发事件，时此会还原节点、重置水印：

如，结点属性被修改（修改display为none使元素不可见，或修改opacity为0使元素完全透明），都会触监听事件，并重置节点属性：

其实应用于产品或项目时，可将JS代码用JShaman进行混淆加密，以防止代码被分析识破从而被针对性的反制。

注：本文演示中是给div添加水印，实际应用此技术时，水印可添加给任意种类的元素内容。

更多文章：

JS编程实用技巧：监听变量数据变化。_js 如何判断数据流连续几秒内没有变化_w2sfot的博客-CSDN博客在JS编程中，如果能监测变量的内容，当变量值发生变化时，实时发出通知，这定是一项很有用的功能。下面就来实现它。监听效果先来看效果，当变量值发生变化时，自动提示出旧值和新值：实现方式用一个例程实现上述效果。一个js、一个html。js内容：/*** @desc 属性改变监听，属性被set时出发watch的方法，类似vue的watch* @...https://blog.csdn.net/w2sft/article/details/1053718015款全球知名的JavaScript混淆加密工具_w2sfot的博客-CSDN博客2、JScrambler（葡萄牙）：JScrambler 是一个用于混淆和保护JavaScript应用程序的高级JavaScript工具，提供了广泛的功能，包括字符串隐藏、指针混淆、代码虚拟化、控制流变形等等。4、JavaScript Obfuscator（美国）：JavaScript Obfuscator是另一个非常受欢迎的 JavaScript 混淆库，可以压缩、混淆和加密 JavaScript 代码，同时保持其原有功能。添加图片注释，不超过 140 字（可选）添加图片注释，不超过 140 字（可选）https://blog.csdn.net/w2sft/article/details/129994703?spm=1001.2014.3001.5502用JavaScript实现：网页内容防复制_w2sfot的博客-CSDN博客很多时候，我们不希望自己网页上的内容被复制，比如原创内容、小说、文章等等。在网页前端，使用JavaScript编程，似乎有不少防复制方法，比如：禁用copy事件、禁止鼠标右键菜单，等等。但本文要介绍的，不是这些常用的方法，而是把文字变成canvas画布，画出的文字是不能被复制的。https://blog.csdn.net/w2sft/article/details/129535437?spm=1001.2014.3001.550272篇Node.JS教程：Node.JS编程从入门到精通_nodejs从入门到精通_w2sfot的博客-CSDN博客72篇Node.JS教程：Node.JS编程从入门到精通https://blog.csdn.net/w2sft/article/details/129040933?spm=1001.2014.3001.5502JavaScript奇淫技巧：反调试_js反调试_w2sfot的博客-CSDN博客https://www.jshaman.com/https://blog.csdn.net/w2sft/article/details/128513280?spm=1001.2014.3001.5502