CN110489943B

CN110489943B - 页面水印防篡改方法和系统

Info

Publication number: CN110489943B
Application number: CN201910637217.6A
Authority: CN
Inventors: 李阳; 张蕾; 陈昱彤; 殷蔚蓝
Original assignee: Seashell Housing Beijing Technology Co Ltd
Current assignee: Seashell Housing Beijing Technology Co Ltd
Priority date: 2019-07-15
Filing date: 2019-07-15
Publication date: 2020-07-28
Anticipated expiration: 2039-07-15
Also published as: CN110489943A

Abstract

本发明公开了一种页面水印防篡改方法和系统，其中，所述方法包括：检测所述水印的内容和/或所述水印在视野中的状态；以及当所述水印的内容发生变动和/或所述水印在视野中的状态发生变动时，在预设位置重新展示预设的水印信息。该方法克服现有技术中的页面水印并不具有的防篡改功能，稍微懂点技术的用户可以通过浏览器开发者工具来动态修改DOM，即可隐藏水印，无法起到保证用户权益的作用的问题。

Description

页面水印防篡改方法和系统

技术领域

本发明涉及VR展示技术领域，具体地，涉及一种页面水印防篡改方法和系统。

背景技术

为限制用户对包含VR模型的前端页面进行截图、录制视频等行为，需在用户在尚未购买VR模型的情况下访问VR页面需覆盖一层水印信息。

现有技术中的页面水印并不具有的防篡改功能或者防篡改功能差，稍微懂点技术的用户可以通过浏览器开发者工具来动态修改DOM，即可隐藏水印，无法起到保证用户权益的作用。

因此，提供一种在使用过程中可以有效地克服上述技术问题的页面水印防篡改方法和系统是本发明亟需解决的问题。

发明内容

针对上述技术问题，本发明的目的是克服现有技术中的页面水印并不具有的防篡改功能或者防篡改功能差，稍微懂点技术的用户可以通过浏览器开发者工具来动态修改DOM，即可隐藏水印，无法起到保证用户权益的作用的问题，从而提供一种在使用过程中可以有效地克服上述技术问题的页面水印防篡改方法和系统。

为了实现上述目的，本发明提供了页面水印防篡改方法，所述方法包括：

检测所述水印的内容和/或所述水印在视野中的状态；以及

当所述水印的内容发生变动和/或所述水印在视野中的状态发生变动时，在预设位置重新展示预设的水印信息。

优选地，所述检测所述水印的内容包括：对所述水印内部的HTML DOM节点中包含有水印信息的<div>标签节点是否被修改或删除进行检测。

优选地，所述检测所述水印在视野中的状态为检测所述水印是否呈现在用户的视野中；其中，所述检测包括：对所述水印内部的HTML DOM中包含有水印信息的<div>标签节点是否被移走或隐藏进行检测。

优选地，所述方法还包括：

当所述水印的内容发生变动和/或所述水印在视野中的状态发生变动时，隐藏页面上VR模型的渲染展示。

优选地，所述水印通过以下步骤而被生成：

接收用于生成所述水印的信息；

在所述信息是文本的情况下，将该文本转换成背景为透明状的水印图像，并根据该背景为透明状的水印图像，生成水印DATA URL；在所述水印为图片的情况下，根据该图片生成水印DATA URL；以及

通过<div>标签节点展示所述水印DATA URL。

本发明还提供了一种页面水印防篡改系统，其特征在于，所述系统包括：

检测模块，用于检测水印的内容和/或所述水印在视野中的状态；

水印控制模块，在所述水印的内容发生变动和/或所述水印在视野中的状态发生变动的情况下，在预设位置重新展示预设的水印信息。

优选地，所述系统还包括：模型控制模块，当所述水印的内容发生变动和/或所述水印在视野中的状态发生变动时，隐藏页面上VR模型的渲染展示。

优选地，所述系统还包括：

水印生成模块，用于接收用于生成所述水印的信息；

通过<div>标签节点展示所述水印DATA URL。

本发明还提供一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现所述的VR 3D模型水印添加方法。

本发明还提供一种机器可读存储介质，其上存储有程序，该程序被执行时实现所述的VR 3D模型水印添加方法。

根据上述技术方案，本发明提供的页面水印防篡改方法在使用过程中的有益效果为：可以从多个方面对页面水印进行检测，例如：水印的内容和/或所述水印在视野中的状态；并且在两者中的任意一者发生变动时，就会在预设位置重新展示预设的水印信息，可以有效地限制用户对包含VR模型的前端页面进行截图、录制视频等行为，克服现有技术中的页面水印并不具有的防篡改功能，稍微懂点技术的用户可以通过浏览器开发者工具来动态修改DOM，即可隐藏水印，无法起到保证用户权益的作用的问题。

本发明的其他特征和优点将在随后的具体实施方式部分予以详细说明。

附图说明

附图是用来提供对本发明的进一步理解，并且构成说明书的一部分，与下面的具体实施方式一起用于解释本发明，但并不构成对本发明的限制。在附图中：

图1是本发明的一种优选的实施方式中提供的页面水印防篡改方法的流程图；

图2是本发明的一种优选的实施方式中提供的页面水印防篡改方法的流程图；

图3是本发明的一种优选的实施方式中提供的水印生成步骤的流程图；

图4a是本发明的一种优选的实施方式中提供的页面水印防篡改系统的结构示意图；

图4b是本发明的一种优选的实施方式中提供的页面水印防篡改系统的结构示意图；

图5是本发明的一种优选的实施方式中的提供的电子设备的结构示意图；以及，

图6是本发明的一种优选的实施方式中的提供的水印的预览效果图。

具体实施方式

以下结合附图对本发明的具体实施方式进行详细说明。应当理解的是，此处所描述的具体实施方式仅用于说明和解释本发明，并不用于限制本发明。

以下首先对页面水印防篡改方法进行详细描述，如图1所示，本发明提供了页面水印防篡改方法，所述方法包括：

检测所述水印的内容和/或所述水印在视野中的状态；其中，

所述水印的内容是指水印的显示内容，例如我们原先的水印是“A”，但是会被修改成“B”，这就是说所述水印的内容发生了变动；

所述水印在视野中的状态可以理解为所述水印是否在用户的视野中，因为初始状态或者默认状态下，所述水印是呈现在用户的视野中的，利用一些篡改技术，可以将所述水印移出用户的视野，这种就是所述水印在视野中的状态发生了变动；

当所述水印的内容发生变动和/或所述水印在视野中的状态发生变动时，重新展示所述水印。不管是两者中的谁发生了变动，都要重新展示所述水印，因为水印在生成以后会被存储起来，所以只需要将存储的水印重新展示出来即可。在该步骤中实质上存在一步判断的过程，即所述水印的内容发生变动和/或所述水印在视野中的状态是否发生变动，如果发生了变动，则执行在预设位置重新展示预设的水印信息的操作，否则还是进行水印检测步骤；

在上述方案中，本发明对所述水印的多个方面进行检测，只要其中一个方面发生变动，就会重新展示所述水印，这个过程十分迅速，用户几乎观察不到重新展示的过程，达到的效果就相当于所述水印无法被修改，一直呈现在页面上，因此，可以有效地保护页面上呈现的内容不被盗取。而且重新展示的水印是在预设的位置展示预设的水印信息，这个预设的位置是用户事先设定好的，防止重新展示的水印位置影响页面内容的显示效果或者影响用户的操作，而预设的水印即用户事先生成需要展示的水印，该水印在生成后会被存储，以方便后面的重新展示使用。

HTML DOM是HTML Document Object Model(文档对象模型)的缩写，HTML DOM则是专门适用于HTML/XHTML的文档对象模型。可以将HTML DOM理解为网页的API，它将网页中的各个元素都看作一个个对象，从而使网页中的元素也可以被计算机语言获取或者编辑。

在HTML DOM中，所有事物都是节点。DOM是被视为节点树的HTML；每个节点都拥有包含着关于节点某些信息的属性。这些属性是：

nodeName(节点名称)nodeValue(节点值)nodeType(节点类型)。

在本发明的一种优选的实施方式中，所述检测所述水印的内容包括：对所述水印内部的HTML DOM节点的变动情况进行实时检测。所述HTML DOM节点中包含有水印的<div>标签节点，当所述<div>标签节点被删除或者修改，则水印的内容就会发生变动；

例如在实际的运用过程中利用通过MutationObserver API来实时地监听所述HTML DOM节点的变动情况，可以有效地检测出所述水印的内容是否发生变动，一旦所述水印的内容发生变动，就会在预设位置重新展示所存储的预设的水印信息，以达到保护页面内容的目的。

在本发明的一种优选的实施方式中，所述检测所述水印在视野中的状态包括：对所述水印内部的水印<div>标签节点的变动情况进行周期性检测。所述HTML DOM节点中包含有水印的<div>标签节点，当所述<div>标签节点被移走或者隐藏，这时候该节点还是存在的，水印处于正常显示，只是并不在用户的视野中进行显示，则水印在视野中的状态发生变动(用户不会看到该水印)。本发明可以对该种情况进行有效地检测，实现对水印的保护。

例如在实际的运用过程中利用通过window.requestAnimationFrame()或window.setInterval()方法来定时判断水印HTML DOM节点状态是否发生变动；一旦所述水印不在用户视野中(所述<div>标签节点被移走或者隐藏为特定的两种情况而已)，就会在预设位置重新展示预设的水印信息，以达到保护页面内容的目的。

如图2所示，在本发明的一种优选的实施方式中，所述方法包括：

检测所述水印的内容和/或所述水印在视野中的状态；其中，

当所述水印的内容发生变动和/或所述水印在视野中的状态发生变动时，在预设位置重新展示预设的水印信息。不管是两者中的谁发生了变动，都要重新展示所述水印，因为水印在生成以后会被存储起来，所以只需要在预设的位置将存储的预设的水印重新展示出来即可，在该步骤中实质上存在一步判断的过程，即所述水印的内容发生变动和/或所述水印在视野中的状态是否发生变动，如果发生了变动，则执行重新展示所述水印的操作，否则还是进行水印检测步骤；

当所述水印的内容发生变动和/或所述水印在视野中的状态发生变动时，隐藏页面上VR模型的渲染展示，因为在检测到水印发生变动时，可以判定有人恶意在篡改水印，企图通过不正当手段获取页面上的内容，为了更好的保护页面上的内容(例如VR模型)，本发明还对页面上VR模型的渲染展示进行隐藏，以达到彻底保护页面内容的目的，以防止他人更换其他的手段来篡改水印。

在上述方案中，本发明对所述水印的多个方便进行检测，只要其中一个方面发生变动，就会在预设位置重新展示预设的水印信息，这个过程十分迅速，用户几乎观察不到重新展示的过程，达到的效果就相当于所述水印无法被修改，一直呈现在页面上，而且还对页面上VR模型的渲染展示进行隐藏，因此，可以有效地保护页面上呈现的内容不被盗取。

如图3所示，在本发明的一种优选的实施方式中，所述水印通过以下步骤而被生成：

步骤S301，接收用于生成所述水印的信息；也就是首选确定需要展示水印的内容，例如：“贝壳”、“如视”、品牌logo等，

步骤S302，在所述信息是文本的情况下，例如为“如视”文本，则将该文本转换成背景为透明状的水印图像，并根据该背景为透明状的水印图像，生成水印DATA URL；例如可以通过HTMLCanvasElement.toDataURL()方法返回一个包含图片展示的Data URL，格式如下所示：

//

const canvas＝document.createElement(′canvas′)

const ctx＝canvas.getContext(′2d′)

ctx.fillText(″)//

const base64Ur1＝canvas.toDataURL()

在所述水印为图片的情况下，例如为品牌Logo，可以先将图片转换成Base64字符串，然后以<svg>标签的模式进行包装以防止图片过大，最后该图片生成水印DATA URL，格式如下所示：

//base64Str Base64

const base64Url＝｀data：image/svg+xml；utf8，<svg><image xlink：

href＝″

{base64Str}″/></svg>｀

以及步骤S303，通过<div>标签节点展示所述水印DATA URL。大体的步骤包括：动态生成一个<div>标签节点，将刚才生成的水印Data URL作为该<div>标签节点的背景图片，然后通过fixed固定定位将水印占满整个屏幕内容生成水印<div>标签节点，格式如下所示：

再将生成的水印<div>标签节点然后塞入到HTML合适的DOM结构即可。

如图6所示，为水印的预览效果图，图的中部是显示内容，例如为VR模型，这个图中铺满了“如视”水印。

在上述方案中，详细介绍了水印的生成步骤，完成水印的生成后，还需要对其进行存储，以便于后期的重新展示。

以下对页面水印防篡改系统进行详细阐述，如图4a所示，本发明提供了页面水印防篡改系统，其特征在于，所述系统包括：

检测模块，用于检测水印的内容和/或所述水印在视野中的状态；其中，所述水印的内容是指水印的显示内容，例如我们原先的水印是“A”，但是会被修改成“B”，这就是说所述水印的内容发生了变动；

水印控制模块，在所述水印的内容发生变动和/或所述水印在视野中的状态发生变动的情况下，重新展示所述水印。不管是两者中的谁发生了变动，都要重新展示所述水印，因为水印在生成以后会被存储起来，所以只需要将存储的水印重新展示出来即可。

在上述方案中，本发明对所述水印的多个方便进行检测，只要其中一个方面发生变动，就会重新展示所述水印，这个过程十分迅速，用户几乎观察不到重新展示的过程，达到的效果就相当于所述水印无法被修改，一直呈现在页面上，因此，可以有效地保护页面上呈现的内容不被盗取。

例如在实际的运用过程中利用通过MutationObserver API来实时地监听所述HTML DOM节点的变动情况，可以有效地检测出所述水印的内容是否发生变动，一旦所述水印的内容发生变动，就会重新展示存储的所述水印，以达到保护页面内容的目的。

在本发明的一种优选的实施方式中，所述检测所述水印在视野中的状态包括：对所述水印内部的水印<div>标签节点的变动情况进行周期性检测。所述HTML DOM节点中包含有水印的<div>标签节点，当所述<div>标签节点被移走或者隐藏，则水印在视野中的状态发生变动(用户不会看到该水印)；

例如在实际的运用过程中利用通过window.requestAnimationFrame()或window.setInterval()方法来定时判断水印HTML DOM节点是否发生变动；一旦所述水印不在用户视野中(所述水印在视野中的状态发生变动)，就会重新展示存储的所述水印，以达到保护页面内容的目的。

如图4b所示，在本发明的一种优选的实施方式中，所述系统还包括：模型控制模块，当所述水印的内容发生变动和/或所述水印在视野中的状态发生变动时，隐藏页面上VR模型的渲染展示。因为在检测到水印发生变动时，可以判定有人恶意在篡改水印，企图通过不正当手段获取页面上的内容，为了更好的保护页面上的内容(例如VR模型)，本发明还对页面上VR模型的渲染展示进行隐藏，以达到彻底保护页面内容的目的，以防止他人更换其他的手段来篡改水印。

如图4b所示，在本发明的一种优选的实施方式中，所述系统还包括：

水印生成模块，用于接收用于生成所述水印的信息；也就是首选确定需要展示水印的内容，例如：“贝壳”、“如视”、品牌logo等，

在所述信息是文本的情况下，例如为“如视”文本，则将该文本转换成背景为透明状的水印图像，并根据该背景为透明状的水印图像，生成水印DATA URL；例如可以通过HTMLCanvasElement.toDataURL()方法返回包含图片展示的Data URL，

在所述水印为图片的情况下，例如为品牌Logo，可以先将图片转换成Base64字符串，然后以<svg>标签的模式进行包装以防止图片过大，最后该图片生成水印DATA URL；以及，

通过<div>标签节点展示所述水印DATA URL。大体的步骤包括：动态生成一个<div>标签节点，将刚才生成的水印Data URL作为该<div>标签节点的背景图片，然后通过fixed固定定位占满整个屏幕内容生成水印<div>标签节点，再生成的水印<div>标签节点然后塞入到HTML合适的DOM结构即可。

在上述方案中，详细介绍了水印生成模块的功能和工作原理，完成水印的生成后，还需要对其进行存储，以便于后期的重新展示。

图5是本发明一实施例提供的电子设备的结构示意图。如图5所示，所述电子设备包括：处理器501、存储器502、通信接口503和总线504；其中，所述处理器501、存储器502、通信接口503通过所述总线504完成相互间的通信；所述通信接口503用于该电子设备和终端的通信设备之间的信息传输；所述处理器501用于调用所述存储器502中的程序指令，以执行上述页面水印防篡改方法。

本发明实施例还提供一种机器可读存储介质，其上存储有程序，该程序被执行时实现上文所述的页面水印防篡改方法。

以上结合附图详细描述了本发明实施例的可选实施方式，但是，本发明实施例并不限于上述实施方式中的具体细节，在本发明实施例的技术构思范围内，可以对本发明实施例的技术方案进行多种简单变型，这些简单变型均属于本发明实施例的保护范围。

另外需要说明的是，在上述具体实施方式中所描述的各个具体技术特征，在不矛盾的情况下，可以通过任何合适的方式进行组合。为了避免不必要的重复，本发明实施例对各种可能的组合方式不再另行说明。

本领域技术人员可以理解实现上述实施例方法中的全部或部分步骤是可以通过程序来指令相关的硬件来完成，该程序存储在一个存储介质中，包括若干指令用以使得单片机、芯片或处理器(processor)执行本申请各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移走硬盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。

此外，本发明实施例的各种不同的实施方式之间也可以进行任意组合，只要其不违背本发明实施例的思想，其同样应当视为本发明实施例所公开的内容。

Claims

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

检测所述水印的内容和/或所述水印在视野中的状态；以及

当所述水印的内容发生变动和/或所述水印在视野中的状态发生变动时，在预设位置重新展示预先被存储的预设的水印信息，并隐藏页面上VR模型的渲染展示；

所述检测所述水印的内容包括：对所述水印内部的HTML DOM节点中包含有水印信息的<div>标签节点是否被修改或删除进行检测；

所述检测所述水印在视野中的状态为检测所述水印是否呈现在用户的视野中；其中，所述检测所述水印是否呈现在用户的视野中包括：对所述水印内部的HTML DOM中包含有水印信息的<div>标签节点是否被移走或隐藏进行检测；

所述水印通过以下步骤而被生成：

接收用于生成所述水印的信息；

在所述信息是文本的情况下，将该文本转换成背景为透明状的水印图像，并根据所述背景为透明状的水印图像，生成水印DATA URL；在所述水印为图片的情况下，根据该图片生成水印DATA URL；以及

通过<div>标签节点展示所述水印DATA URL。

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

水印控制模块，在所述水印的内容发生变动和/或所述水印在视野中的状态发生变动的情况下，在预设位置重新展示预先被存储的预设的水印信息；

所述系统还包括：模型控制模块，当所述水印的内容发生变动和/或所述水印在视野中的状态发生变动时，隐藏页面上VR模型的渲染展示；

所述系统还包括：

水印生成模块，用于接收用于生成所述水印的信息；

通过<div>标签节点展示所述水印DATA URL。

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

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