一种防用户篡改页面水印的方法与流程

1.本发明属于页面优化技术领域，尤其是涉及一种防用户篡改页面水印的方法。


背景技术：

2.在web页面中，为了防止信息泄露或知识产权被侵犯，前端水印这一需求是非常有必要的，水印的添加可分为两类，一种是前端浏览器环境添加，另一种是后端服务环境添加。前端添加这种方式服务器运算量、内存的减少，能够快速响应请求，主流实现方法分为以下两类：一、svg/png等图片结合cssbackground属性；二、canvas，但这两种方案安全性都较低，很容易被人通过各种骚操作直接获取到源文件，方案一可以通过打开浏览器的开发者工具，直接修改元素的css属性，去掉水印即可，方案二看起来优于方案一，但也可以在控制台的元素区域把整个canvas元素暴力删除掉，达到去水印的目的。
3.现有防止用户篡改页面水印的方法有以下几种：第一，用户可以通过按f12打开浏览器开发者工具，监听键盘按下事件，阻止f12事件即可；第二，用户可以通过点击鼠标右键打开浏览器开发者工具，监听右键菜单事件，阻止鼠标右键事件即可；以上两种方式都可以禁止用户打开浏览器开发者工具，但是这种方式太简单粗暴了，因为浏览器开发者工具除了检查元素，还有一些其他功能，直接禁用会伤害用户体验；第三，可以监听浏览器开发者工具的打开事件，虽然浏览器没有提供原生的打开事件，但可以通过检查浏览器可视区域和浏览器窗口的差值来判断用户是否打开了浏览器开发者工具，第三中方法有个漏洞，就是它只能用来检测开发者工具在浏览器页面中内嵌打开时的情况，但是现在的浏览器几乎都提供了新窗口打开开发者工具的功能，所以这个检测很容易被绕过。


技术实现要素：

4.有鉴于此，本发明旨在提出一种防用户篡改页面水印的方法，以期解决上述部分技术问题中的至少之一。
5.为达到上述目的，本发明的技术方案是这样实现的：
6.本发明第一方面提供了一种防用户篡改页面水印的方法，包括以下步骤：
7.s1、创建一个options对象，其中包含了观察器需要监听的变化类型和其他控制选项；
8.s2、定义reset函数，用于在回调函数执行之前暂停和恢复观察器的工作，并在恢复观察器之后执行回调方法；
9.s3、定义callback函数，此函数将会被传递给mutationobserver对象，用于监视h1元素的变化，当h1元素的样式发生改变或文本内容发生改变时，相应的回调函数将被触发；
10.s4、判断h1元素的样式是否发生变化；
11.如果h1元素的样式发生变化，则在reset函数中进行重新设置；如果h1元素的文本内容发生变化，则在reset函数中进行特定文本内容的重新设置。
12.进一步的，所述步骤s1中创建一个options对象并设置控制选项来告诉
mutationobserver对象监听哪些变化；
13.监视目标节点的子元素是否发生变化；
14.监视目标节点的属性是否发生变化；
15.是否监视目标节点的所有后代节点；
16.是否在attributes属性被更改时记录修改前的值；
17.监视目标节点或其子节点的文本内容是否发生变化；
18.是否在characterdata被更改时记录修改前的值。
19.进一步的，所述步骤s4前执行如下步骤：
20.创建mutationobserver对象observer并调用其observe()方法开始监视h1元素的变化。
21.本发明第二方面提供了一种电子设备，包括处理器以及与处理器通信连接，且用于存储所述处理器可执行指令的存储器，所述处理器用于执行上述第一方面所述的防用户篡改页面水印的方法。
22.本发明第三方面提供了一种服务器，包括至少一个处理器，以及与所述处理器通信连接的存储器，所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述处理器执行，以使所述至少一个处理器执行如第一方面所述的防用户篡改页面水印的方法。
23.本发明第四方面提供了一种计算机可读取存储介质，存储有计算机程序，所述计算机程序被处理器执行时实现第一方面所述的防用户篡改页面水印的方法。
24.相对于现有技术，本发明所述的一种防用户篡改页面水印的方法具有以下有益效果：
25.(1)本发明所述的一种防用户篡改页面水印的方法，相较于传统的防止用户篡改页面水印的方法而言本方法不会禁用其他功能进而保证了用户体验，且安全系数更高，可以防止通过新窗口打开开发者工具的功能躲过检测。
附图说明
26.构成本发明的一部分的附图用来提供对本发明的进一步理解，本发明的示意性实施例及其说明用于解释本发明，并不构成对本发明的不当限定。在附图中：
27.图1为本发明实施例所述的方法流程示意图。
具体实施方式
28.需要说明的是，在不冲突的情况下，本发明中的实施例及实施例中的特征可以相互组合。
29.下面将参考附图并结合实施例来详细说明本发明。
30.实施例一：
31.如图1所示，s1、创建一个options对象，其中包含了观察器需要监听的变化类型和其他控制选项；
32.步骤s1中创建一个options对象并设置控制选项来告诉mutationobserver对象监听哪些变化；
33.监视目标节点的子元素是否发生变化；
34.监视目标节点的属性是否发生变化；
35.是否监视目标节点的所有后代节点；
36.是否在attributes属性被更改时记录修改前的值；
37.监视目标节点或其子节点的文本内容是否发生变化；
38.是否在characterdata被更改时记录修改前的值。
39.s2、定义reset函数，用于在回调函数执行之前暂停和恢复观察器的工作，并在恢复观察器之后执行回调方法；
40.s3、定义callback函数，此函数将会被传递给mutationobserver对象，用于监视h1元素的变化，当h1元素的样式发生改变或文本内容发生改变时，相应的回调函数将被触发；
41.创建mutationobserver对象observer并调用其observe()方法开始监视h1元素的变化；
42.s4、判断h1元素的样式是否发生变化；
43.如果h1元素的样式发生变化，则在reset函数中进行重新设置；如果h1元素的文本内容发生变化，则在reset函数中进行特定文本内容的重新设置。
44.通过监测到dom元素上任何属性的变化情况，以及监听其子元素的变化情况，当用户通过开发者工具修改了水印元素的属性时，利用mutationobserver可以监听到该用户行为，并第一时间恢复水印，mutationobserver监听的是元素的属性，css样式应当作为元素的style属性内嵌在html中。同时也可以结合其他某些防止用户修改的场景，利用该方法阻止用户修改行为。相较于传统的防止用户篡改页面水印的方法而言本方法不会禁用其他功能进而保证了用户体验，且安全系数更高，可以防止通过新窗口打开开发者工具的功能躲过检测。
45.实施例二：
46.一种电子设备，包括处理器以及与处理器通信连接，且用于存储处理器可执行指令的存储器，处理器用于执行上述实施例一的防用户篡改页面水印的方法。
47.实施例三：
48.一种服务器，包括至少一个处理器，以及与处理器通信连接的存储器，存储器存储有可被至少一个处理器执行的指令，指令被处理器执行，以使至少一个处理器执行如实施例一的防用户篡改页面水印的方法。
49.实施例四：
50.一种计算机可读取存储介质，存储有计算机程序，计算机程序被处理器执行时实现实施例一的防用户篡改页面水印的方法。
51.本领域普通技术人员可以意识到，结合本文中所公开的实施例描述的各示例的单元及方法步骤，能够以电子硬件、计算机软件或者二者的结合来实现，为了清楚地说明硬件和软件的可互换性，在上述说明中已经按照功能一般性地描述了各示例的组成及步骤。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本发明的范围。
52.在本技术所提供的几个实施例中，应该理解到，所揭露的方法和系统，可以通过其
它的方式实现。例如，以上单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。上述单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本发明实施例方案的目的。
53.最后应说明的是：以上各实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述各实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分或者全部技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的范围，其均应涵盖在本发明的权利要求和说明书的范围当中。
54.以上仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

技术特征：
1.一种防用户篡改页面水印的方法，其特征在于，包括以下步骤：s1、创建一个options对象，其中包含了观察器需要监听的变化类型和其他控制选项；s2、定义reset函数，用于在回调函数执行之前暂停和恢复观察器的工作，并在恢复观察器之后执行回调方法；s3、定义callback函数，此函数将会被传递给mutationobserver对象，用于监视h1元素的变化，当h1元素的样式发生改变或文本内容发生改变时，相应的回调函数将被触发；s4、判断h1元素的样式是否发生变化；如果h1元素的样式发生变化，则在reset函数中进行重新设置；如果h1元素的文本内容发生变化，则在reset函数中进行特定文本内容的重新设置。2.根据权利要求1所述的一种防用户篡改页面水印的方法，其特征在于：所述步骤s1中创建一个options对象并设置控制选项来告诉mutationobserver对象监听哪些变化；监视目标节点的子元素是否发生变化；监视目标节点的属性是否发生变化；是否监视目标节点的所有后代节点；是否在attributes属性被更改时记录修改前的值；监视目标节点或其子节点的文本内容是否发生变化；是否在characterdata被更改时记录修改前的值。3.根据权利要求1所述的一种防用户篡改页面水印的方法，其特征在于：步骤s4前执行如下步骤：创建mutationobserver对象observer并调用其observe()方法开始监视h1元素的变化。4.一种电子设备，包括处理器以及与处理器通信连接，且用于存储所述处理器可执行指令的存储器，其特征在于：所述处理器用于执行上述权利要求1-3任一所述的防用户篡改页面水印的方法。5.一种服务器，其特征在于：包括至少一个处理器，以及与所述处理器通信连接的存储器，所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述处理器执行，以使所述至少一个处理器执行如权利要求1-3任一所述的防用户篡改页面水印的方法。6.一种计算机可读取存储介质，存储有计算机程序，其特征在于：所述计算机程序被处理器执行时实现权利要求1-3任一项所述的防用户篡改页面水印的方法。

技术总结
本发明提供了一种防用户篡改页面水印的方法，包括以下步骤：S1、创建一个options对象；S2、定义reset函数，用于在回调函数执行之前暂停和恢复观察器的工作，并在恢复观察器之后执行回调方法；S3、定义callback函数，此函数将会被传递给MutationObserver对象，用于监视h1元素的变化，当h1元素的样式发生改变或文本内容发生改变时，相应的回调函数将被触发；S4、如果h1元素的样式发生变化，则在reset函数中进行重新设置；如果h1元素的文本内容发生变化，则在reset函数中进行特定文本内容的重新设置。本发明有益效果：相较于传统的防止用户篡改页面水印的方法而言本方法不会禁用其他功能进而保证了用户体验，且安全系数更高，可以防止通过新窗口打开开发者工具的功能躲过检测。通过新窗口打开开发者工具的功能躲过检测。通过新窗口打开开发者工具的功能躲过检测。


技术研发人员：何颖
受保护的技术使用者：紫光云技术有限公司
技术研发日：2023.06.30
技术公布日：2023/10/5