CN111857932A

CN111857932A - 一种基于puppeteer用于运维审计系统的web代填方法

Info

Publication number: CN111857932A
Application number: CN202010733185.2A
Authority: CN
Inventors: 刘博�; 刘韬; 范渊; 吴永越; 郑学新
Original assignee: Chengdu DBAPPSecurity Co Ltd
Current assignee: Chengdu DBAPPSecurity Co Ltd
Priority date: 2020-07-27
Filing date: 2020-07-27
Publication date: 2020-10-30

Abstract

本发明提出了一种基于puppeteer用于运维审计系统的web代填方法，先进行DOM操作录制：通过puppeteer启动操作录制程序，检测用户在目标web应用中的操作行为，并记录下用户的DOM节点信息和输入的内容，最后将用户整体的操作流程存储至文本文件中；然后进行web代填：启动代填程序，然后从运维审计系统中申请代填配置，并读取DOM操作录制生成的文本文件，将代填配置与文本文件结合生成web代填重放的输入，并根据输入进行web代填。本发明基于puppeteer不仅可以实现对普通网站的代填，也可以处理如非同源iframe无法代填等特殊问题，保障了web代填的覆盖率，同时提高了稳定性和准确性。

Description

一种基于puppeteer用于运维审计系统的web代填方法

技术领域

本发明属于运维审计web代填领域，具体地说，涉及一种基于puppeteer用于运维审计系统的web代填方法。

背景技术

Web应用运维是运维审计系统的重要功能，而web应用账号密码的代填是web应用运维最应该需要做的事情，否则运维人员需要手动填入账号密码，安全性极低，有着很大的密码泄露风险，并且每次都需要手动输入账号密码并登录，非常麻烦，所以web代填的重要性不言而喻，同时实现该功能的情况下，保证web代填的成功率、稳定性、准确性对于运维审计系统来说也非常重要。web代填一般都会采用在web应用中注入JavaScript代码的方式，因为JavaScript可以操作DOM节点，进而实现web代填，但该方式的覆盖率较低，有很多原因会导致代填失败，例如：由于浏览器安全限制的原因，对于非同源的iframe中的DOM元素，这种方法就无能为力，所以需要一种覆盖率更高，同时稳定性和准确性也更强的方案。

现有技术中有专利文献公开了一种网页表单自动填写方法及装置(CN 108664461A)；该方案是通过以下三个步骤实现网页表单自动填写的：

1.建立表单元素与业务元素的映射

2.解析网页的DOM树，以获取表单元素在屏幕中的位置；

3.根据表单元素与业务元素的映射关系，模拟鼠标与键盘事件，将业务数据赋值给对应的表单元素。

而该现有技术具有以下缺点：

该方案缺陷：

1.手动设置标识符，唯一性很难保证。方案中通过设置<input name＝”xxx”/>标签的name字段的值作为唯一标识符，并描述说一般不会重复，但这很难保证，手动输入的标识符重复量大的情况下，效率低下，且会出错。

2.通过解析网页DOM树，计算出的屏幕位置坐标，会随着电脑屏幕尺寸、分辨率等变化而变化，一旦发生变化则需要重新计算，性能较差。

3.该方案仅支持表单元素的代填，因为它的标识符被<input name＝”xxx”/>标签限制，但如果表单元素的可见性需要前序多个步骤的事件进行触发，例如：表单处于弹框之中，该方法则无法处理，覆盖率较低。

发明内容

本发明针对现有技术性能较差，且覆盖率低下的问题，提出了一种基于puppeteer用于运维审计系统的web代填方法，通过自动化模拟人类的点击和输入行为，并基于puppeteer实现对普通网站的代填，提高了web代填的覆盖率，同时提高了稳定性和准确性。

本发明具体实现内容如下：

本发明提出了一种基于puppeteer用于运维审计系统的web代填方法，首先进行DOM操作录制：通过puppeteer启动操作录制程序，检测用户在目标web应用中的操作行为，并记录下用户的DOM节点信息和输入的内容，最后将用户整体的操作流程存储至文本文件中；然后进行web代填：启动代填程序，然后从运维审计系统中申请代填配置，并读取DOM操作录制生成的文本文件，将代填配置与文本文件结合生成web代填重放的输入，并根据输入进行web代填。

为了更好地实现本发明，进一步地，所述进行DOM操作录制包括以下步骤：

步骤1：使用操作录制程序打开浏览器，并与浏览器建立CDP通信协议连接；

步骤2：通过浏览器开始监听用户在浏览器的操作；

步骤3：在用户操作后，使用浏览器将用户的操作通过CDP通道发送到操作录制程序；

步骤4：用户操作完毕，结束操作录制程序与浏览器之间的CDP通信协议；操作录制系统生成操作记录的文本文件。

为了更好地实现本发明，进一步地，所述文本文件包括元素节点唯一标识符、操作类型、操作内容；所述操作类型包括type输入、select下拉列表选择、click点击；

在所述步骤3中，当操作录制程序接收到浏览器发送的用户的操作后，通过DOM唯一标识符生成算法生成所接收到的操作对应的元素节点唯一标识符，并获取对应的操作类型及操作内容。

为了更好地实现本发明，进一步地，所述DOM唯一标识符生成算法具体为：接收到操作时，首先判断对应的节点是否有ID属性：

若有节点有ID属性，则生成DOM唯一标识符；

若节点没有ID属性，则向上寻找父节点，然后判断父节点是否具有ID属性：

若父节点有ID属性，则对节点与父节点的标识符进行拼接生成DOM唯一标识符；

若父节点没有ID属性，则继续向上寻找祖先节点，并判断祖先节点是否具有ID属性，若祖先节点有ID属性，则将节点、父节点及祖先节点的标识符进行拼接生成唯一标识符；

若祖先节点没有ID属性，则继续向上寻找节点操作，直到产生DOM唯一标识符。

为了更好地实现本发明，进一步地，所述web代填具体包括以下步骤：

步骤(1)：启动代填程序读取DOM操作录制生成的文本文件；

步骤(2)：向运维审计系统申请代填配置；

步骤(3)：将代填配置与文本文件进行合并；

步骤(4)：通过代填程序启动浏览器，并与浏览器建立CDP通信协议连接；

步骤(5)：代填程序根据步骤(3)合并生成的结果向浏览器派发操作指令；

步骤(6)：浏览器接收操作指令，并根据操作指令的内容进行web代填；

步骤(7)：浏览器代填完成，断开与代填程序的连接。

为了更好地实现本发明，进一步地，所述与浏览器建立CDP通信协议连接的具体操作为：代填程序启动浏览器，通过传递remote-debugging-port参数告知浏览器正在以远程调试模式启动，浏览器启动后会将启动的端口号打印在标准输出中，操作录制程序与该端口号进行通信，并与浏览器建立连接。

本发明与现有技术相比具有以下优点及有益效果：

(1)本发明通过DOM操作录制的方式，监听用户操作DOM的事件，通过DOM唯一标识符生成算法，自动计算出该节点元素在DOM树中的唯一标识，效率高且生成的唯一标识符准确；且代替运维人员手动输入账号密码等敏感文本，提高安全性；

(2)本方案通过浏览器支持的CDP协议，让代填程序与浏览器进行协议通信，将唯一标识符和代填信息通过网络协议发送给浏览器，浏览器根据唯一标识符找到对应DOM节点元素，进行代填；不需要计算屏幕位置坐标等，应用更广泛，适应性更强；

(3)本方案通过浏览器支持的CDP协议，不仅支持表单代填，还支持前序动作的执行，包括点击按钮打开弹窗等等，原因是因为DOM操作录制的标识符是通过算法自动生成的，可以保证唯一性。进而浏览器可以通过唯一的标识符找到对应的节点，进行对应的操作；

(4)减少重复输入，提高效率，并便于账号等资产管理。

附图说明

图1为DOM操作录制过程流程示意图；

图2为web代填过程流程示意图；

图3为DOM操作录制过程中操作录制程序与浏览器的流程交互示意图；

图4为DOM唯一标识符生成算法的原理示例图；

图5为web代填过程中代填程序与浏览器之间的流程交互示意图。

具体实施方式

为了更清楚地说明本发明实施例的技术方案，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，应当理解，所描述的实施例仅仅是本发明的一部分实施例，而不是全部的实施例，因此不应被看作是对保护范围的限定。基于本发明中的实施例，本领域普通技术工作人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

实施例1：

本实施例提出了一种基于puppeteer用于运维审计系统的web代填方法，如图1、图2所示，首先进行DOM操作录制：通过puppeteer启动操作录制程序，检测用户在目标web应用中的操作行为，并记录下用户的DOM节点信息和输入的内容，最后将用户整体的操作流程存储至文本文件中；然后进行web代填：启动代填程序，然后从运维审计系统中申请代填配置，并读取DOM操作录制生成的文本文件，将代填配置与文本文件结合生成web代填重放的输入，并根据输入进行web代填。

工作原理：web代填的目的是将文本类信息准确、稳定的填入指定的DOM节点，最准确的代填就是人类的点击和输入，如果可以自动化的模拟此行为，就可以解决此问题，并且同时解决JavaScript操作DOM节点成功率较低的问题；而事实上自动化的模拟人类操作DOM节点的行为可以通过技术手段进行录制、重放，这就是借助DOM操作录制的web代填。

DOM操作录制过程：借助于puppeteer，用户启动DOM操作录制程序后，该程序可以检测到用户在目标web应用中的点击、输入等行为，并可以记录其DOM节点信息和输入的内容，最后将用户整体的操作流程存储至文本文件中，用于web代填重放。

web代填过程：该过程的本质是对DOM操作录制的重放，但需要从运维审计系统中申请一些代填配置，例如：账号名、密码等。首先启动web代填程序，读取操作行为文本文件并向运维审计系统申请代填配置，并将二者合并，生成最后进行web代填重放的输入，合并的过程可以理解为将变量替换为值的过程，最后根据输入，进行web代填，代填完成。本发明与现有技术一种网页表单自动填写方法及装置(CN 108664461 A)相比具有以下优化：

(1)现有技术手动设置标识符，唯一性很难保证。方案中通过设置<input name＝”xxx”/>标签的name字段的值作为唯一标识符，并描述说一般不会重复，但这很难保证，标识符重复则会出错。

而本方案通过DOM操作录制的方式，监听用户操作DOM的事件，通过DOM唯一标识符生成算法，自动计算出该节点元素在DOM树中的唯一标识。

(2)现有技术通过解析网页DOM树，计算出的屏幕位置坐标，会随着电脑屏幕尺寸、分辨率等变化而变化，一旦发生变化则需要重新计算，性能较差。

而本方案通过浏览器支持的CDP协议，让代填程序与浏览器进行协议通信，将唯一标识符和代填信息通过网络协议发送给浏览器，浏览器根据唯一标识符找到对应DOM节点元素，进行代填。

(3)现有技术仅支持表单元素的代填，因为它的标识符被<input name＝”xxx”/>标签限制，但如果表单元素的可见性需要前序多个步骤的事件进行触发，例如：表单处于弹框之中，该方法则无法处理，覆盖率较低。

而本方案通过浏览器支持的CDP协议，不仅支持表单代填，还支持前序动作的执行，包括点击按钮打开弹窗等等，原因是因为DOM操作录制的标识符是通过算法自动生成的，可以保证唯一性。进而浏览器可以通过唯一的标识符找到对应的节点，进行对应的操作。

实施例2：

本实施例在上述实施例1的基础上，为了更好地实现本发明，进一步地，如图3所示，所述DOM操作录制技术具体包括以下操作：

1.打开浏览器，与浏览器建立CDP(浏览器远程调试协议)协议连接

操作录制程序启动浏览器，通过传递--remote-debugging-port参数告知浏览器正在以远程调试模式启动，浏览器启动后会将启动的端口号打印在标准输出中，操作录制程序与该端口号进行通信，并与浏览器建立连接。

2.浏览器开始监听用户在浏览器中的操作

连接建立完成后，浏览器会开始监听用户在浏览器中的操作，当用户进行点击、输入等操作时，操作都会被监听。

3.用户操作后，发送CDP报文

开启监听后，用户的操作会通过CDP通道发送给操作录制程序，操作录制程序会进一步通过DOM唯一标识符生成算法，生成该元素的唯一标识符，并获取操作类型以及操作的内容。

4.操作完成浏览器关闭，生成操作记录文件

当用户完成操作后，关闭浏览器，操作录制程序与浏览器的协议通信结束，最后负责生成操作记录文件，用于代填回放时的依据。文件内容大致如下表1所示：

元素节点唯一标识符	操作类型	操作内容
			#form>#username	type	％Username
#form>#password	type	％Password

表1文本文件的大致内容示意表

其中操作类型可分为三种：

1.type输入

2.select下拉列表选择

3.click点击

点击可以针对于一些需要打开弹窗后进行文本代填类的网站，可以提高代填的覆盖率。

其中操作内容可以为变量，例如：

％Username会在后续代填中被替换为业务系统中的用户名，％Password会被替换为密码。

本实施例的其他部分与上述实施例1相同，故不再赘述。

实施例3：

本实施例在上述实施例1-2任一项的基础上，如图4所示，DOM唯一标识符生成算法原理为：DOM唯一标识符生成算法的目的是为了保证一个节点在DOM树中的唯一性，避免通过手动配置标识符的方式导致标识符重复的风险。

在图4中，假设用户在左下角的input[type＝”text”]的输入框中输入了％Username，则：

1.判断该节点是否有ID属性，发现没有，则向上寻找；

2.判断父节点form.login是否有ID属性，发现没有，对标识符进行拼接，拼接成form.login>input[type＝”text”]，继续向上寻找；

3.判断祖先节点div#wrapper是否有ID属性，发现有，则停止向上查询，进行拼接，拼接成div#wrapper>form.login>input[type＝”text”]后返回；

4.到此为止就产生了唯一标识符。

本实施例的其他部分与上述实施例1-2任一项相同，故不再赘述。

实施例4：

本实施例在上述实施例1-3任一项的基础上，为了更好地实现本发明，进一步地，如图5所示，所述web代填操作包括以下步骤：

1.读取操作记录文件

读取操作录制产生的操作记录文件，格式如下表2所示：

表2操作记录文件格式

2.向运维审计系统申请代理配置

申请代理配置，例如：

％Username:admin

％Password:123456

3.合并

将上述12步进行合并，合并后结果如下表3所示：

元素节点唯一标识符	操作类型	操作内容
			#form>#username	type	admin
#form>#password	type	123456

表3合并表示意

4.打开浏览器，与浏览器建立CDP协议连接

代填程序启动浏览器，通过传递--remote-debugging-port参数告知浏览器正在以远程调试模式启动，浏览器启动后会将启动的端口号打印在标准输出中，操作录制程序与该端口号进行通信，并与浏览器建立连接。

5.根据123步合并的结果向浏览器派发操作指令

将上述3步产生的结果通过CDP协议发送给浏览器，CDP协议报文是纯文本报文，简化的报文信息如下：

代填程序组装CDP报文格式后，通过WebSocket协议传输给浏览器，浏览器接收到代填程序发送的指令，进而进行下一步的操作。

6.浏览器根据第5步发送的指令进行代填

由于在第4步启动浏览器时，传递了--remote-debugging-port参数，浏览器得知是以远程调试协议启动，在接收到客户端发送的指令后，会根据指令进行特定的操作，其中就包括点击、输入等行为，这与在浏览器注入JavaScript代码不同，注入JavaScript会把代码植入至页面中，与页面可能会产生兼容性问题，而这是通过浏览器支持的协议，在更底层完成指令的交互。因为在操作录像过程中，已经通过DOM唯一标识符算法生成了唯一标识符，所以浏览器在执行指令时，就不会产生错误，因为标识符是全局唯一的，这保证了代填的稳定性。

7.代填完成，断开连接

执行完所有的指令后，代填程序会与浏览器断开连接，用户进而可以进行后续的操作。

本实施例的其他部分与上述实施例1-3任一项相同，故不再赘述。

以上所述，仅是本发明的较佳实施例，并非对本发明做任何形式上的限制，凡是依据本发明的技术实质对以上实施例所作的任何简单修改、等同变化，均落入本发明的保护范围之内。

Claims

1.一种基于puppeteer用于运维审计系统的web代填方法，其特征在于，首先进行DOM操作录制：通过puppeteer启动操作录制程序，检测用户在目标web应用中的操作行为，并记录下用户的DOM节点信息和输入的内容，最后将用户整体的操作流程存储至文本文件中；然后进行web代填：启动代填程序，然后从运维审计系统中申请代填配置，并读取DOM操作录制生成的文本文件，将代填配置与文本文件结合生成web代填重放的输入，并根据输入进行web代填。

2.如权利要求1所述的一种基于puppeteer用于运维审计系统的web代填方法，其特征在于，所述进行DOM操作录制包括以下步骤：

步骤2：通过浏览器开始监听用户在浏览器的操作；

3.如权利要求2所述的一种基于puppeteer用于运维审计系统的web代填方法，其特征在于，所述文本文件包括元素节点唯一标识符、操作类型、操作内容；所述操作类型包括type输入、select下拉列表选择、click点击；

4.如权利要求3所述的一种基于puppeteer用于运维审计系统的web代填方法，其特征在于，所述DOM唯一标识符生成算法具体为：接收到操作时，首先判断对应的节点是否有ID属性：

若有节点有ID属性，则生成DOM唯一标识符；

5.如权利要求1所述的一种基于puppeteer用于运维审计系统的web代填方法，其特征在于，所述web代填具体包括以下步骤：

步骤（1）：启动代填程序读取DOM操作录制生成的文本文件；

步骤（2）：向运维审计系统申请代填配置；

步骤（3）：将代填配置与文本文件进行合并；

步骤（4）：通过代填程序启动浏览器，并与浏览器建立CDP通信协议连接；

步骤（5）：代填程序根据步骤（3）合并生成的结果向浏览器派发操作指令；

步骤（6）：浏览器接收操作指令，并根据操作指令的内容进行web代填；

步骤（7）：浏览器代填完成，断开与代填程序的连接。

6.如权利要求5所述的一种基于puppeteer用于运维审计系统的web代填方法，其特征在于，所述与浏览器建立CDP通信协议连接的具体操作为：代填程序启动浏览器，通过传递remote-debugging-port参数告知浏览器正在以远程调试模式启动，浏览器启动后会将启动的端口号打印在标准输出中，操作录制程序与该端口号进行通信，并与浏览器建立连接。