一种网页水印生成、防篡改的方法技术

本发明专利技术提供一种网页水印生成、防篡改的方法，包括步骤：S1、根据水印信息内容创建水印文档对象模型；S2、使用Web Components技术对水印文档对象模型进行封装，将封装的水印文档对象模型进行备份，并插入到当前网页中生成水印；S3、调用Mutation Observer监听当前网页中的水印文档对象模型的变化情况；S4、判断该变化情况是否为篡改行为，若否，则回到步骤S3，若是，则执行步骤S5；S5、卸载当前网页被篡改的水印文档对象模型，重新添加预先备份的水印文档对象模型重新生成水印，并回到步骤S3。本发明专利技术提供的网页水印生成、防篡改的方法，能够有效阻止网页水印篡改行为，应用于网络信息安全技术领域。术领域。术领域。

【技术实现步骤摘要】
一种网页水印生成、防篡改的方法


[0001]本专利技术涉及网络信息安全
，特别是涉及一种网页水印生成、防篡改的方法。

技术介绍

[0002]首先对本说明书可能涉及到的术语进行解释：
[0003]1.文档对象模型(DOM)，将web网页和脚本或编程语言链接起来。通常是指JavaScript，但将HTML、SVG或XML文档建模为对象并不是JavaScript语言的一部分。DOM模型用一个逻辑树来表示一个文档，树的每个分支的终点都是一个节点(node)，每个节点都包含着对象(objects)。DOM的方法(methods)让你可以用特定方式操作这个树，用这些方法你可以改变文档的结构、样式或者内容。节点可以关联上事件处理器，一旦某一事件被触发了，那些事件处理器就会被执行。
[0004]2.Cavnas用于动画、图形处理、数据可视化等方面。浏览器提供的一套通过Javascript编程语言和HTML的<canvas>元素进行绘制图形的方式。
[0005]3.Svg可缩放矢量图形(Scalable Vector Graphics，SVG)基于XML语言，用来描述二维的矢量图形。
[0006]4.Web Components相关概念，Shadow DOM(影子DOM)：一组JavaScript API，用于将封装的“影子”DOM树附加到元素(与主文档DOM分开呈现)并控制其关联的功能。通过这种方式，可以保持元素的功能私有化。
[0007]5.MutationObserver，一种浏览器提供的监听DOM树的接口，属于DOM3 Events规范的一部分。
[0008]6.CSS层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
[0009]目前网页水印技术基本以在HTML页面上创建普通DOM、Canvas或SVG元素的形式实现水印生成。并添加一些防止水印篡改的手段实现限制用户修改。一般会基于MutationObserver提供的能力进行监听。当页面上的水印被用户手动在浏览器控制台篡改时，通过监听信息识别到篡改操作，重新对水印的DOM对象进行处理。将备份的水印重新替换或添加到页面中，阻止用户篡改行为。
[0010]现有网页水印技术一：根据目标水印信息创建文档对象模型，一般为普通DOM标签元素、Canvas元素或SVG元素。将其对象模型插入整个页面文档对象模型中，实现水印生成。这种技术简单直接，但防篡改能力差，用户可以轻易修改水印的文档对象模型。
[0011]现有网页水印技术二：创建水印文档对象模型，并基于MutationObserver为水印文档模型添加监听器，当监听器检测到改动时，重新生成水印文档对象模型并插入页面中。通过监听文档对象模型等的技术，已有较好的预防恶意篡改水印操作的能力。但仍有一定的不足，其中最主要的问题是，监听装置只负责监听当前水印文档对象模型本身包括它自
身的内联样式和其它属性值，但可以通过修改其所处的上层文档对象模型的CSS样式，影响整个水印文档对象模型的CSS样式，如可以在水印DOM模型的上一级DOM模型中添加CSS样式属性对其进行样式修改，用户便有了样式修改的能力，可以将水印的文档对象模型的颜色或透明度等进行调整，如设置透明度为零，实现水印隐藏，进而为恶意用户实现了的篡改目的。
[0012]因此，需要提供一种网页水印生成、防篡改的方法以解决上述技术问题。

技术实现思路

[0013]本专利技术提供一种网页水印生成、防篡改的方法，能够有效阻止网页水印篡改行为，应用于网络信息安全

[0014]为解决上述技术问题，本专利技术采用的一个技术方案是提供一种网页水印生成、防篡改的方法，包括步骤：
[0015]S1、根据水印信息内容创建水印文档对象模型；
[0016]S2、使用Web Components技术对水印文档对象模型进行封装，将封装的水印文档对象模型进行备份，并插入到当前网页中生成水印；
[0017]S3、调用Mutation Observer监听当前网页中的水印文档对象模型的变化情况；
[0018]S4、判断该变化情况是否为篡改行为，若否，则回到步骤S3，若是，则执行步骤S5；
[0019]S5、卸载当前网页被篡改的水印文档对象模型，重新添加预先备份的水印文档对象模型在当前网页中重新生成水印，并回到步骤S3。
[0020]在一实施例中，步骤S1之前包括步骤S0：获取当前网页的水印信息内容。
[0021]在一实施例中，步骤S0包括：在当前网页中创建DOM、Canvas或SVG元素作为水印信息内容。
[0022]在一实施例中，步骤S0包括：在当前网页客户端中，通过接口服务获取到的用户昵称和用户ID，将其作为水印信息内容。
[0023]在一实施例中，步骤S0包括：获取当前网页的水印信息内容，并为该水印信息内容输入固定的CSS样式字符串；步骤S1包括：根据水印信息内容创建水印文档对象模型，并将CSS样式字符串的权重转换成最高优先级的样式，并将该转换权重后的CSS样式字符串以内联样式的形式插入到当前网页的水印文档对象模型中。
[0024]在一实施例中，步骤S2和S3之间包括步骤S2.5：判断当前客户端浏览器是否支持Mutation Observer监听功能，若不支持则进行兼容处理，通过动态添加兼容性代码，为浏览器主动实现对，实现对此Mutation Observer监听功能的支持。
[0025]在一实施例中，步骤S4中对水印文档对象模型的篡改行为包括：对水印元素属性的修改，对DOM结构位置的修改，对水印元素的删除。
[0026]本专利技术的有益效果是：
[0027](1)通过Web Components技术封装水印文档对象模型，具体地，利用Shadow Dom(影子DOM)等相关技术，将水印所需要的样式封装在Web Componets组件中，利用这种技术可以实现对样式的隔绝，浏览器提供Web Componets组件原生的样式隔离，这时候修改水印的上层文档对象模型的样式，不能影响水印文档对象模型定义中样式；
[0028](2)利用MutationObserver的监听能力，当监听到用户修改水印文档对象模型的
行为，监听器触发操作更新水印，将备份的水印文档对象模型重新生成水印，达到很好的水印保护作用；
[0029](3)还通过提升水印文档对象模型中的CSS样式权重方式，自动为样式增加！important属性值(在样式权重中属于最高优先级的),保证了样式不会被权重高的样式覆盖。
附图说明
[0030]图1是本专利技术的网页水印生成、防篡改的方法的第一优选实施例的流程示意图；
[0031]图2是本专利技术的网页水印生成、防篡改的方法的第二优选实施例的流程示本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种网页水印生成、防篡改的方法，其特征在于，包括步骤：S1、根据水印信息内容创建水印文档对象模型；S2、使用Web Components技术对水印文档对象模型进行封装，将封装的水印文档对象模型进行备份，并插入到当前网页中生成水印；S3、调用Mutation Observer监听当前网页中的水印文档对象模型的变化情况；S4、判断该变化情况是否为篡改行为，若否，则回到步骤S3，若是，则执行步骤S5；S5、卸载当前网页被篡改的水印文档对象模型，重新添加预先备份的水印文档对象模型在当前网页中重新生成水印，并回到步骤S3。2.根据权利要求1所述的网页水印生成、防篡改的方法，其特征在于，步骤S1之前包括步骤S0：获取当前网页的水印信息内容。3.根据权利要求2所述的网页水印生成、防篡改的方法，其特征在于，步骤S0包括：在当前网页中创建DOM、Canvas或SVG元素作为水印信息内容。4.根据权利要求2所述的网页水印生成、防篡改的方法，其特征在于，步骤S0包括：在当前网页客户端中，通过...

【专利技术属性】
技术研发人员：梁德富，
申请(专利权)人：中山市可讯科技有限公司，
类型：发明
国别省市：