CN112966232B - 页面水印防篡改方法、系统、电子设备和可读存储介质 - Google Patents

Abstract

本申请涉及一种页面水印防篡改方法、系统、电子设备和计算机可读存储介质。其中，该页面水印防篡改方法包括：执行脚本引入步骤，创建全局入口文件并在所述全局入口文件中声明一DOM节点，并将预先定义封装的水印脚本文件引入所述全局入口文件；页面水印生成步骤，基于SVG技术和所述DOM节点进行背景水印矢量图的绘制、配置函数封装并插入所述全局入口文件；节点监测步骤，基于MutationObserver接口监测所述全局入口文件中背景水印所属的目标节点是否被篡改，从而实现节点监测；水印重新绘制步骤，当监测到所述目标节点被篡改时，重新绘制背景水印矢量图并重新触发节点监测。通过本申请，实现了有效防止恶意攻击者通过浏览器调试端篡改企业系统设置的专属水印。

Description

页面水印防篡改方法、系统、电子设备和可读存储介质

技术领域

本申请涉及计算机技术领域，特别是涉及页面水印防篡改方法、系统、电子设备和计算机可读存储介质。

背景技术

随着计算机技术的飞速发展，信息网络已成为社会发展的重要保证，Web网站与应用越来越广泛，同时越来越多的个人与企业将服务器架在Web平台上。但是Web业务的飞速发展也引起了许多黑客的关注，许多Web系统存在一定的安全问题，也存在一定的安全漏洞，黑客会利用一些常见的Web安全漏洞对网站进行攻击，窃取用户信息，给用户造成利益损害，因此研究Web前端常见安全问题及对策对于互联网安全是十分重要的，也十分急切的。

目前许多Web管理系统都会设置专属水印功能来防止恶意截图或信息窃取，但安全系数很多都比较低，通过浏览器调试端很容易就能篡改或绕过。如，通过CSS背景图案拼接的方式，具体利用CSS background或background-image属性来整体生成背景水印，再调节一定的透明度，来完成全局专属水印的定制。通过CSS背景图案拼接方式虽然很容易完成专属水印的定制，但是在浏览器端是最容易被用同样的方式来进行图案的替换的，只需要在浏览器调试端通过对Style中对应的background属性进行替换即可仿造。再如，利用Canvas技术通过不同的HTML5画布属性来进行绘制，根据不同的需求，利用画布提供的不同函数来完成点、线、面、填充、文字等的制作来生成最终的水印。虽然，Canvas技术相对于CSS图案拼接的方式在实现上要更加复杂一些，但被直接篡改的难度明显提升，可仍然无法阻止通过浏览器调试端暴力删除整体Canvas Dom的形式来绕过水印。

发明内容

本申请实施例提供了一种页面水印防篡改方法、装置、系统、电子设备和计算机可读存储介质，以至少解决相关技术中恶意攻击者通过浏览器调试端篡改水印窃取系统信息的问题。

第一方面，本申请实施例提供了一种页面水印防篡改方法，包括：

执行脚本引入步骤，创建全局入口文件并在所述全局入口文件index.html中声明一DOM节点，以作为根节点元素进行水印的挂载绘制，并将预先定义封装的水印脚本文件watermark.js引入所述全局入口文件index.html；

页面水印生成步骤，基于SVG技术(英文全称为Scalable Vector Graphics，意为可缩放的矢量图形)和所述DOM节点进行背景水印矢量图的绘制、配置函数封装并插入所述全局入口文件；

节点监测步骤，基于MutationObserver接口监测所述全局入口文件中背景水印所属的目标节点是否被篡改，从而实现节点监测，其中，Mutation Observer接口用来监视DOM的变动。DOM的任何变动，比如节点的增减、属性的变动、文本内容的变动，该接口都可以得到通知；

水印重新绘制步骤，当监测到所述目标节点被篡改时，重新绘制背景水印矢量图并重新触发节点监测。

基于上述步骤，本申请通过HTML5的SVG绘制水印和配置函数封装，以及对所述目标节点的DOM树的直接监测和重置，有效防止恶意攻击者通过浏览器调试端篡改企业系统设置的专属水印，以达到保护企业系统信息安全的目的。

在其中一些实施例中，所述页面水印生成步骤进一步包括：

背景水印绘制步骤，利用SVG技术进行背景水印矢量图的绘制，并进行配置函数封装，得到svg标签及用于绘制所述背景水印的水印函数；具体的，所述配置函数的配置参数至少包括：文字内容，文字大小，文字颜色，整体宽度，整体高度，角度旋转，透明度，层级等；

背景水印插入步骤，根据所述DOM节点生成一DOM容器，将所述svg标签经编码转换后结合CSS的样式属性作为整体样式插入至所述DOM容器，以生成所述背景水印矢量图。可选的，所述编码转换可以为Base64转换，所述Base64是网络上最常见的用于传输8Bit字节码的编码方式之一，Base64就是一种基于64个可打印字符来表示二进制数据的方法。

基于上述步骤，对外暴露简洁的水印配置方法，保证水印组件入口的唯一性，降低了安全水印使用的技术难度，使用户可以基于上述简单的配置参数生产不同需求的定制的专属水印。

在其中一些实施例中，所述节点监测步骤进一步包括：

DOM子节点监测步骤，通过直接监测所述目标节点的DOM子节点判断所述DOM子节点是否新增或删除，并获取被增加或被删除的节点；

属性节点监测步骤，通过监测所述目标节点的DOM子节点的属性值判断对应的属性节点是否发生变化，并获取发生变化的属性节点所在的元素节点；

文本节点监测步骤，通过监测所述目标节点对应的数据内容判断所述目标节点的节点内容或节点文本是否发生变化，并获取变化后的节点内容或节点文本。

在其中一些实施例中，所述节点监测步骤进一步包括：

节点后代子集合监测步骤，用于监测所述目标节点的所有后代子集合，以同时监测所述目标节点的DOM子节点、属性节点及文本节点的变化，并判断所述目标节点是否被篡改。

基于上述步骤，可同时监测DOM子节点、属性节点及文本节点的变化，一旦发现其中任一种节点被篡改，则会判断所述目标节点发生了变化，则重新绘制背景水印矢量图并重新触发节点监测。

第二方面，本申请实施例提供了一种页面水印防篡改系统，包括：

执行脚本引入模块，创建全局入口文件并在所述全局入口文件index.html中声明一DOM节点，以作为根节点元素进行水印的挂载绘制，并将预先定义封装的水印脚本文件watermark.js引入所述全局入口文件index.html；

页面水印生成模块，基于SVG技术和所述DOM节点进行背景水印矢量图的绘制、配置函数封装并插入所述全局入口文件；

节点监测模块，基于MutationObserver接口监测所述全局入口文件中背景水印所属的目标节点是否被篡改，从而实现节点监测；

水印重新绘制模块，当监测到所述目标节点被篡改时，重新绘制背景水印矢量图并重新触发节点监测。

基于上述模块，本申请通过HTML5的SVG绘制水印和配置函数封装，以及对所述目标节点的DOM树的直接监测和重置，有效防止恶意攻击者通过浏览器调试端篡改企业系统设置的专属水印，以达到保护企业系统信息安全的目的。

在其中一些实施例中，所述页面水印生成模块进一步包括：

背景水印绘制模块，利用SVG技术进行背景水印矢量图的绘制，并进行配置函数封装，得到svg标签及用于绘制所述背景水印的水印函数；具体的，所述配置函数的配置参数至少包括：文字内容，文字大小，文字颜色，整体宽度，整体高度，角度旋转，透明度，层级等

背景水印插入模块，根据所述DOM节点生成一DOM容器，将所述svg标签经编码转换后结合CSS的样式属性作为整体样式插入至所述DOM容器，以生成所述背景水印矢量图。可选的，所述编码转换可以为Base64转换，所述Base64是网络上最常见的用于传输8Bit字节码的编码方式之一，Base64就是一种基于64个可打印字符来表示二进制数据的方法。

基于上述模块，对外暴露简洁的水印配置方法，保证水印组件入口的唯一性，降低了安全水印使用的技术难度，使用户可以基于上述简单的配置参数生产不同需求的定制的专属水印。

在其中一些实施例中，所述节点监测模块进一步包括：

DOM子节点监测模块，通过直接监测所述目标节点的DOM子节点判断所述DOM子节点是否新增或删除，并获取被增加或被删除的节点；

属性节点监测模块，通过监测所述目标节点的DOM子节点的属性值判断对应的属性节点是否发生变化，并获取发生变化的属性节点所在的元素节点；

文本节点监测模块，通过监测所述目标节点对应的数据内容判断所述目标节点的节点内容或节点文本是否发生变化，并获取变化后的节点内容或节点文本。

在其中一些实施例中，所述节点监测模块进一步包括：

节点后代子集合监测模块，用于监测所述目标节点的所有后代子集合，以同时监测所述目标节点的DOM子节点、属性节点及文本节点的变化，并判断所述目标节点是否被篡改。

基于上述模块，可同时监测DOM子节点、属性节点及文本节点的变化，一旦发现其中任一种节点被篡改，则会判断所述目标节点发生了变化，则重新绘制背景水印矢量图并重新触发节点监测。

第三方面，本申请实施例提供了一种电子设备，包括存储器、处理器以及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现如上述第一方面所述的页面水印防篡改方法。

第四方面，本申请实施例提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现如上述第一方面所述的页面水印防篡改方法。

相比于相关技术，本申请实施例提供的页面水印防篡改方法、系统、电子设备及计算机可读存储介质，实现了有效防止恶意攻击者通过浏览器调试端篡改企业系统设置的专属水印并提供了一种对外的简单配置以使用户可以快速使用安全水印技术。

本申请的一个或多个实施例的细节在以下附图和描述中提出，以使本申请的其他特征、目的和优点更加简明易懂。

附图说明

此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：

图1是根据本申请实施例的页面水印防篡改方法的流程示意图；

图2是根据本申请实施例的页面水印防篡改方法的另一流程示意图；

图3是根据本申请实施例的页面水印防篡改系统的结构框图；

图4是根据本申请优选实施例的页面水印防篡改方法的流程示意图。

附图说明：

1、执行脚本引入模块；2、页面水印生成模块；3、节点监测模块；

4、水印重新绘制模块；

201、背景水印绘制模块；202、背景水印插入模块；

301、DOM子节点监测模块；302、属性节点监测模块；

303、文本节点监测模块；304、节点后代子集合监测模块。

具体实施方式

为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行描述和说明。应当理解，此处所描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。基于本申请提供的实施例，本领域普通技术人员在没有作出创造性劳动的前提下所获得的所有其他实施例，都属于本申请保护的范围。

显而易见地，下面描述中的附图仅仅是本申请的一些示例或实施例，对于本领域的普通技术人员而言，在不付出创造性劳动的前提下，还可以根据这些附图将本申请应用于其他类似情景。此外，还可以理解的是，虽然这种开发过程中所作出的努力可能是复杂并且冗长的，然而对于与本申请公开的内容相关的本领域的普通技术人员而言，在本申请揭露的技术内容的基础上进行的一些设计，制造或者生产等变更只是常规的技术手段，不应当理解为本申请公开的内容不充分。

在本申请中提及“实施例”意味着，结合实施例描述的特定特征、结构或特性可以包含在本申请的至少一个实施例中。在说明书中的各个位置出现该短语并不一定均是指相同的实施例，也不是与其它实施例互斥的独立的或备选的实施例。本领域普通技术人员显式地和隐式地理解的是，本申请所描述的实施例在不冲突的情况下，可以与其它实施例相结合。

除非另作定义，本申请所涉及的技术术语或者科学术语应当为本申请所属技术领域内具有一般技能的人士所理解的通常意义。本申请所涉及的“一”、“一个”、“一种”、“该”等类似词语并不表示数量限制，可表示单数或复数。本申请所涉及的术语“包括”、“包含”、“具有”以及它们任何变形，意图在于覆盖不排他的包含；例如包含了一系列步骤或模块(单元)的过程、方法、系统、产品或设备没有限定于已列出的步骤或单元，而是可以还包括没有列出的步骤或单元，或可以还包括对于这些过程、方法、产品或设备固有的其它步骤或单元。本申请所涉及的“连接”、“相连”、“耦接”等类似的词语并非限定于物理的或者机械的连接，而是可以包括电气的连接，不管是直接的还是间接的。本申请所涉及的“多个”是指两个或两个以上。“和/或”描述关联对象的关联关系，表示可以存在三种关系，例如，“A和/或B”可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。字符“/”一般表示前后关联对象是一种“或”的关系。本申请所涉及的术语“第一”、“第二”、“第三”等仅仅是区别类似的对象，不代表针对对象的特定排序。

本发明旨在通过对Web系统的水印机制进行深入研究分析，提出一种防止通过浏览器调试端篡改水印的安全方法，从而提升Web系统专属水印的安全等级，更好的保护用户的信息安全。

图1是根据本申请实施例的页面水印防篡改方法的流程示意图，参考图1所示，该流程包括如下步骤：

执行脚本引入步骤S1，创建全局入口文件并在全局入口文件index.html中声明一DOM节点，以作为根节点元素进行水印的挂载绘制，并将预先定义封装的水印脚本文件watermark.js引入全局入口文件index.html；

页面水印生成步骤S2，基于SVG技术和DOM节点进行背景水印矢量图的绘制、配置函数封装并插入全局入口文件；

节点监测步骤S3，基于MutationObserver接口监测全局入口文件中背景水印所属的目标节点是否被篡改，从而实现节点监测，具体的，定义一变量接收Window全局的MutationObserver，然后在新建的MutationObserver函数中开启对于目标节点中DOM节点、属性节点、文本节点和/或子树集合进行监测；

水印重新绘制步骤S4，当监测到目标节点被篡改时，重新绘制背景水印矢量图并重新触发节点监测，具体的，通过调用水印函数重新绘制渲染svg标签，通过重新进入所述步骤S3重新触发节点监测。

基于上述步骤，本申请通过HTML5的SVG绘制水印和配置函数封装，以及对目标节点的DOM树的直接监测和重置，有效防止恶意攻击者通过浏览器调试端篡改企业系统设置的专属水印，以达到保护企业系统信息安全的目的。

在其中一些实施例中，页面水印生成步骤S2进一步包括：

背景水印绘制步骤S201，利用SVG技术进行背景水印矢量图的绘制，并进行配置函数封装，得到svg标签及用于绘制背景水印的水印函数；具体的，配置函数的配置参数至少包括：文字内容，文字大小，文字颜色，整体宽度，整体高度，角度旋转，透明度，层级等，首先引入svg标签，配置待显示的区域宽度和高度，然后在svg标签内引入text标签，设置text标签内的边框、填充色、透明度、字体内容、字体大小、字体颜色、偏移等属性，根据不同属性进行调节，来生成期望的背景水印的展示效果；

背景水印插入步骤S202，根据DOM节点生成一DOM容器，将svg标签经编码转换后结合CSS的样式属性作为整体样式插入至DOM容器，以生成背景水印矢量图。可选的，编码转换可以为Base64转换，Base64是网络上最常见的用于传输8Bit字节码的编码方式之一，Base64就是一种基于64个可打印字符来表示二进制数据的方法；具体的，将svg标签进行Base64转换，生成可用的Base64Url结合进CSS的style属性中，以整体styleStr的方式融合至DOM容器。

基于上述步骤，对外暴露简洁的水印配置方法，保证水印组件入口的唯一性，降低了安全水印使用的技术难度，使用户可以基于上述简单的配置参数生产不同需求的定制的专属水印。

在其中一些实施例中，节点监测步骤S3进一步包括：

DOM子节点监测步骤S301，通过直接监测目标节点的DOM子节点判断DOM子节点是否新增或删除，并获取被增加或被删除的节点；具体的，对目标节点的DOM子节点进行直接监测，遍历要监听的子节点childList，观察是否新增了目标节点的某个DOM子节点，或者删除了目标节点的某个DOM子节点，如果目标节点的某个DOM子节点发生了变化，则返回新的childList，通过addedNodes返回被添加的节点，通过removedNodes返回被删除的节点。

属性节点监测步骤S302，通过监测目标节点的DOM子节点的属性值判断对应的属性节点是否发生变化，并获取发生变化的属性节点所在的元素节点；具体的，通过观察目标节点的子节点的attributes属性来判断该子节点的属性值是否发生了变化，如果监测到伪造者通过某种方式篡改了该子节点中的class或style等属性，则返回发生变化的属性节点所在的元素节点，attributeName可返回变更属性的名称；

文本节点监测步骤S303，通过监测目标节点对应的数据内容判断目标节点的节点内容或节点文本是否发生变化，并获取变化后的节点内容或节点文本。

本实施例还提供了一种页面水印防篡改方法，图2是根据本申请实施例的页面水印防篡改方法的另一流程示意图，参考图2所示，该流程与上述实施例不同之处在于，节点监测步骤S3进一步包括：

节点后代子集合监测步骤S304，用于监测目标节点的所有后代子集合，以同时监测目标节点的DOM子节点、属性节点及文本节点的变化，并判断目标节点是否被篡改。

基于上述步骤，可同时监测DOM子节点、属性节点及文本节点的变化，一旦发现其中任一种节点被篡改，则会判断目标节点发生了变化，则重新绘制背景水印矢量图并重新触发节点监测。本申请提出一种多维度的监测机制，可基于上述实施例进行节点的单独监测，也可基于实施例进行同时监测，从而保证背景水印效果展示的实时性及安全性。

下面通过优选实施例对本申请实施例进行描述和说明。

图4是根据本申请优选实施例的页面水印防篡改方法的流程示意图，参考图4所示，该页面水印防篡改方法包括如下步骤：

步骤S51，通过创建全局入口文件，声明DOM节点进行水印的挂载绘制，以实现全局基础容器挂载。具体的，采用在全局入口文件index.html中声明出一个根结点元素进行水印的挂载绘制。

步骤S52，执行脚本引入，将预先定义封装好的水印脚本文件watermark.js引入全局入口文件index.html中。

步骤S53，利用SVG技术进行背景水印矢量图的绘制，并进行配置函数的封装。具体的，首先引入svg标签，配置需要展示的区域宽度和高度，然后在svg标签内引入text标签，设置text标签内的边框，填充色，透明度，字体内容，字体大小，字体颜色，偏移等属性，根据不同属性的调节，来生成用户定制的展示效果。

步骤S54，进行具体容器位置的svg水印脚本插入，找到之前全局入口文件中提前预埋好的DOM节点，选取预埋好的DOM节点来手动生成一个DOM容器，将预制好的svg水印脚本先进行Base64的转换，将生成的可用的Base64Url结合进CSS的style属性中，最后以整体styleStr的方式融合进DOM容器之中，来生产我们最终的水印效果。

步骤S55，开启DOM节点数的实时全监测，进行页面节点的最直接监测。具体的，先定义一个变量来接收window全局的MutationObserver，然后在new MutationObserver函数中开启对于目标容器中的DOM子节点，属性节点，文本节点，子树集合等的整体监测。

具体的，首先，经步骤S551对目标节点的DOM子节点进行直接监测，遍历要监听的子节点childList，观察是否新增了目标节点的某个DOM子节点，或者删除了目标节点的某个DOM子节点，如果目标节点的某个DOM子节点发生了变化，则返回新的childList，通过addedNodes返回被添加的节点，通过removedNodes返回被删除的节点。当发现DOM子节点被直接暴力添加或删除，进入步骤S56重新启动水印绘制，重新触发节点监测。具体的，重新设置目标容器的相对定位，然后重新初始化目标容器的子节点，同时重新触发步骤S55实现的监测机制。

步骤S552，监测目标节点的子节点的属性节点变化。具体的，通过对观察目标节点的子节点的attributes属性，来判断某个子节点的属性值是否发生了变化，如果监测到伪造者通过某种方式篡改了子节点中的class或style等属性，则返回发生变化的属性节点所在的元素节点，attributeName可返回变更属性的名称，当发现属性节点发生了变化，进入步骤S56重新启动水印绘制，重新触发节点监测。具体的，先断开监测机制，避免一直重复触发，之后重新调用封装好的水印函数来重新绘制渲染背景水印，同时重新触发步骤S55实现的监测机制。

步骤S553，监测目标节点的文本节点变化，当目标节点为characterData节点时，这时要观察目标节点的文本内容是否发生了变化，即对目标节点的数据内容进行监测，如果发现展示的数据文本内容被修改时则会返回新的characterData，当发现文本节点发生了变化，进入步骤S56重新启动水印绘制，重新触发节点监测。具体的，直接通过水印函数来重新绘制渲染svg水印，同时重新触发步骤S55实现的监测机制。

除了上述三种DOM子节点，属性节点，文本节点的可单独监测的方式外，还可整体检测目标节点的所有后代子集合subtree，即同时观察上述的三种节点变化。一但发现任意一种监测节点被篡改，即会判断与之前相比是否发生了变化，一但变化则会进入步骤S56重新启动水印绘制，重新触发节点监测，以实现通过完整的多维度的监测机制，从而保证了水印效果的实时性与安全性。

需要说明的是，在上述流程中或者附图的流程图中示出的步骤可以在诸如一组计算机可执行指令的计算机系统中执行，并且，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。

本实施例还提供了一种页面水印防篡改系统，该系统用于实现上述实施例及优选实施方式，已经进行过说明的不再赘述。如以下所使用的，术语“模块”、“单元”、“子单元”等可以实现预定功能的软件和/或硬件的组合。尽管以下实施例所描述的系统较佳地以软件来实现，但是硬件，或者软件和硬件的组合的实现也是可能并被构想的。

图3是根据本申请实施例的页面水印防篡改系统的结构框图，如图3所示，该系统包括：

执行脚本引入模块1，创建全局入口文件并在全局入口文件index.html中声明一DOM节点，以作为根节点元素进行水印的挂载绘制，并将预先定义封装的水印脚本文件watermark.js引入全局入口文件index.html；

页面水印生成模块2，基于SVG技术和DOM节点进行背景水印矢量图的绘制、配置函数封装并插入全局入口文件；

节点监测模块3，基于MutationObserver接口监测全局入口文件中背景水印所属的目标节点是否被篡改，从而实现节点监测，具体的，定义一变量接收Window全局的MutationObserver，然后在新建的MutationObserver函数中开启对于目标节点中DOM节点、属性节点、文本节点和/或子树集合进行监测；

水印重新绘制模块4，当监测到目标节点被篡改时，重新绘制背景水印矢量图并重新触发节点监测，具体的，通过调用水印函数重新绘制渲染svg标签。

基于上述模块，本申请通过HTML5的SVG绘制水印和配置函数封装，以及对目标节点的DOM树的直接监测和重置，有效防止恶意攻击者通过浏览器调试端篡改企业系统设置的专属水印，以达到保护企业系统信息安全的目的。

其中，页面水印生成模块2进一步包括：背景水印绘制模块201，利用SVG技术进行背景水印矢量图的绘制，并进行配置函数封装，得到svg标签及用于绘制背景水印的水印函数；具体的，配置函数的配置参数至少包括：文字内容，文字大小，文字颜色，整体宽度，整体高度，角度旋转，透明度，层级等，首先引入svg标签，配置待显示的区域宽度和高度，然后在svg标签内引入text标签，设置text标签内的边框、填充色、透明度、字体内容、字体大小、字体颜色、偏移等属性，根据不同属性进行调节，来生成期望的背景水印的展示效果；背景水印插入模块202，根据DOM节点生成一DOM容器，将svg标签经编码转换后结合CSS的样式属性作为整体样式插入至DOM容器，以生成背景水印矢量图。可选的，编码转换可以为Base64转换，Base64是网络上最常见的用于传输8Bit字节码的编码方式之一，Base64就是一种基于64个可打印字符来表示二进制数据的方法；具体的，将svg标签进行Base64转换，生成可用的Base64Url结合进CSS的style属性中，以整体styleStr的方式融合至DOM容器。

基于上述模块，对外暴露简洁的水印配置方法，保证水印组件入口的唯一性，降低了安全水印使用的技术难度，使用户可以基于上述简单的配置参数生产不同需求的定制的专属水印。

其中，节点监测模块3进一步包括：DOM子节点监测模块301，通过直接监测目标节点的DOM子节点判断DOM子节点是否新增或删除，并获取被增加或被删除的节点；具体的，对目标节点的DOM子节点进行直接监测，遍历要监听的子节点childList，观察是否新增了目标节点的某个DOM子节点，或者删除了目标节点的某个DOM子节点，如果目标节点的某个DOM子节点发生了变化，则返回新的childList，通过addedNodes返回被添加的节点，通过removedNodes返回被删除的节点。属性节点监测模块302，通过监测目标节点的DOM子节点的属性值判断对应的属性节点是否发生变化，并获取发生变化的属性节点所在的元素节点；具体的，通过观察目标节点的子节点的attributes属性来判断该子节点的属性值是否发生了变化，如果监测到伪造者通过某种方式篡改了该子节点中的class或style等属性，则返回发生变化的属性节点所在的元素节点，attributeName可返回变更属性的名称；文本节点监测模块303，通过监测目标节点对应的数据内容判断目标节点的节点内容或节点文本是否发生变化，并获取变化后的节点内容或节点文本；和/或节点后代子集合监测模块304，用于监测目标节点的所有后代子集合，以同时监测目标节点的DOM子节点、属性节点及文本节点的变化，并判断目标节点是否被篡改。

基于上述模块，可同时监测DOM子节点、属性节点及文本节点的变化，一旦发现其中任一种节点被篡改，则会判断目标节点发生了变化，则重新绘制背景水印矢量图并重新触发节点监测，本申请提出一种多维度的监测机制，可基于上述实施例进行节点的单独监测，也可基于实施例进行同时监测，从而保证背景水印效果展示的实时性及安全性。

需要说明的是，上述各个模块可以是功能模块也可以是程序模块，既可以通过软件来实现，也可以通过硬件来实现。对于通过硬件来实现的模块而言，上述各个模块可以位于同一处理器中；或者上述各个模块还可以按照任意组合的形式分别位于不同的处理器中。

另外，结合图1和/或图2描述的本申请实施例页面水印防篡改方法可以由电子设备来实现。电子设备可以包括处理器以及存储有计算机程序指令的存储器。

具体地，上述处理器可以包括中央处理器(CPU)，或者特定集成电路(ApplicationSpecific Integrated Circuit，简称为ASIC)，或者可以被配置成实施本申请实施例的一个或多个集成电路。

其中，存储器可以包括用于数据或指令的大容量存储器。举例来说而非限制，存储器可包括硬盘驱动器(Hard Disk Drive，简称为HDD)、软盘驱动器、固态驱动器(SolidState Drive，简称为SSD)、闪存、光盘、磁光盘、磁带或通用串行总线(Universal SerialBus，简称为USB)驱动器或者两个或更多个以上这些的组合。在合适的情况下，存储器可包括可移除或不可移除(或固定)的介质。在合适的情况下，存储器可在数据处理装置的内部或外部。在特定实施例中，存储器是非易失性(Non-Volatile)存储器。在特定实施例中，存储器包括只读存储器(Read-Only Memory，简称为ROM)和随机存取存储器(Random AccessMemory，简称为RAM)。在合适的情况下，该ROM可以是掩模编程的ROM、可编程ROM(ProgrammableRead-Only Memory，简称为PROM)、可擦除PROM(Erasable ProgrammableRead-Only Memory，简称为EPROM)、电可擦除PROM(Electrically Erasable ProgrammableRead-Only Memory，简称为EEPROM)、电可改写ROM(Electrically Alterable Read-OnlyMemory，简称为EAROM)或闪存(FLASH)或者两个或更多个以上这些的组合。在合适的情况下，该RAM可以是静态随机存取存储器(Static Random-Access Memory，简称为SRAM)或动态随机存取存储器(Dynamic Random Access Memory，简称为DRAM)，其中，DRAM可以是快速页模式动态随机存取存储器(Fast Page Mode Dynamic Random Access Memory，简称为FPMDRAM)、扩展数据输出动态随机存取存储器(Extended Date Out Dynamic RandomAccess Memory，简称为EDODRAM)、同步动态随机存取内存(Synchronous Dynamic Random-Access Memory，简称SDRAM)等。

存储器可以用来存储或者缓存需要处理和/或通信使用的各种数据文件，以及处理器所执行的可能的计算机程序指令。

处理器通过读取并执行存储器中存储的计算机程序指令，以实现上述实施例中的任意一种页面水印防篡改方法。

另外，结合上述实施例中的页面水印防篡改方法，本申请实施例可提供一种计算机可读存储介质来实现。该计算机可读存储介质上存储有计算机程序指令；该计算机程序指令被处理器执行时实现上述实施例中的任意一种页面水印防篡改方法。

以上所述实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。

以上所述实施例仅表达了本申请的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本申请构思的前提下，还可以做出若干变形和改进，这些都属于本申请的保护范围。因此，本申请专利的保护范围应以所附权利要求为准。

Claims (8)

1.一种页面水印防篡改方法，其特征在于，包括：

执行脚本引入步骤，创建全局入口文件并在所述全局入口文件中声明一DOM节点，并将预先定义封装的水印脚本文件引入所述全局入口文件；

页面水印生成步骤，基于SVG技术和所述DOM节点进行背景水印矢量图的绘制、配置函数封装并插入所述全局入口文件；

节点监测步骤，基于MutationObserver接口监测所述全局入口文件中背景水印所属的目标节点是否被篡改，从而实现节点监测，所述节点监测步骤进一步包括：

DOM子节点监测步骤，通过直接监测所述目标节点的DOM子节点判断所述DOM子节点是否新增或删除，并获取被增加或被删除的节点；

属性节点监测步骤，通过监测所述目标节点的DOM子节点的属性值判断对应的属性节点是否发生变化，并获取发生变化的属性节点所在的元素节点；

文本节点监测步骤，通过监测所述目标节点对应的数据内容判断所述目标节点的节点内容或节点文本是否发生变化，并获取变化后的节点内容或节点文本；

水印重新绘制步骤，当监测到所述目标节点被篡改时，重新绘制背景水印矢量图并重新触发节点监测。

2.根据权利要求1所述的页面水印防篡改方法，其特征在于，所述页面水印生成步骤进一步包括：

背景水印绘制步骤，利用SVG技术进行背景水印矢量图的绘制，并进行配置函数封装，得到svg标签及用于绘制所述背景水印的水印函数；

背景水印插入步骤，根据所述DOM节点生成一DOM容器，将所述svg标签经编码转换后结合CSS的样式属性作为整体样式插入至所述DOM容器，以生成所述背景水印矢量图。

3.根据权利要求1或2所述的页面水印防篡改方法，其特征在于，所述节点监测步骤进一步包括：

节点后代子集合监测步骤，用于监测所述目标节点的所有后代子集合，并判断所述目标节点是否被篡改。

4.一种页面水印防篡改系统，其特征在于，包括：

执行脚本引入模块，创建全局入口文件并在所述全局入口文件中声明一DOM节点，并将预先定义封装的水印脚本文件引入所述全局入口文件；

页面水印生成模块，基于SVG技术和所述DOM节点进行背景水印矢量图的绘制、配置函数封装并插入所述全局入口文件；

节点监测模块，基于MutationObserver接口监测所述全局入口文件中背景水印所属的目标节点是否被篡改，从而实现节点监测，所述节点监测模块进一步包括：

DOM子节点监测模块，通过直接监测所述目标节点的DOM子节点判断所述DOM子节点是否新增或删除，并获取被增加或被删除的节点；

属性节点监测模块，通过监测所述目标节点的DOM子节点的属性值判断对应的属性节点是否发生变化，并获取发生变化的属性节点所在的元素节点；

文本节点监测模块，通过监测所述目标节点对应的数据内容判断所述目标节点的节点内容或节点文本是否发生变化，并获取变化后的节点内容或节点文本；

水印重新绘制模块，当监测到所述目标节点被篡改时，重新绘制背景水印矢量图并重新触发节点监测。

5.根据权利要求4所述的页面水印防篡改系统，其特征在于，所述页面水印生成模块进一步包括：

背景水印绘制模块，利用SVG技术进行背景水印矢量图的绘制，并进行配置函数封装，得到svg标签及用于绘制所述背景水印的水印函数；

背景水印插入模块，根据所述DOM节点生成一DOM容器，将所述svg标签经编码转换后结合CSS的样式属性作为整体样式插入至所述DOM容器，以生成所述背景水印矢量图。

6.根据权利要求4或5所述的页面水印防篡改系统，其特征在于，所述节点监测模块进一步包括：

节点后代子集合监测模块，用于监测所述目标节点的所有后代子集合，并判断所述目标节点是否被篡改。

7.一种电子设备，包括存储器、处理器以及存储在所述存储器上并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现如权利要求1至3中任一项所述的页面水印防篡改方法。

8.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现如权利要求1至3中任一项所述的页面水印防篡改方法。