CN116991694A

CN116991694A - 一种网页操作采集方法

Info

Publication number: CN116991694A
Application number: CN202311264961.9A
Authority: CN
Inventors: 姜波; 李沛芾; 郭斐斐
Original assignee: Sino Singapore Cloud Service Beijing Technology Co ltd
Current assignee: Sino Singapore Cloud Service Beijing Technology Co ltd
Priority date: 2023-09-28
Filing date: 2023-09-28
Publication date: 2023-11-03
Anticipated expiration: 2043-09-28
Also published as: CN116991694B

Abstract

本申请提供了一种网页操作采集方法，涉及互联网技术及通信领域，所述方法用于采集网页操作数据，所述方法包括：确定当前网页中存在无权限采集网页操作的第一内容时，获取所述第一内容所对应的第一资源的网址，根据所述第一内容或所述第一资源的类型，获取预定的加载方式，按照所述预定的加载方式加载所述第一资源为第二内容，基于所述第二内容采集所述网页操作。其中，采集所述网页操作包括采集用户操作、采集网页数据等。可见，本申请提供的方法，解决了针对网页中如embed标签、跨域资源等无权限采集网页操作的问题，有利于保证采集操作的完整性，和生成完整的可回溯、可用于还原用户操作的网页操作记录数据。

Description

一种网页操作采集方法

技术领域

本发明实施例涉及互联网技术及通信领域，尤其涉及一种网页操作采集方法。

背景技术

在一些对安全、信用较高的网页系统中，例如购买保险，办理贷款等，记录用户操作网页的过程，生成可回溯的网页操作过程记录数据，已成为该类软件的一种常见需求；在近年发展的网页同屏交流系统中，采集一端的用户操作数据或网页数据向另一端发送，在另一端还原用户操作或替换网页数据实现同屏效果。以上系统均需应用采集网页操作及网页数据的相关技术实现，但由于网页的特殊性，例如网页中时常包含iFrame标签以及iframe中涉及跨域的内容、网页中包含Embed标签等，因当前网页没有对该部分内容的操作权限，因此无法获取到用户对其操作的数据，由此导致部分网页系统可回溯数据不完整，网页同屏中出现白屏和中断等问题。因此，以上网页操作采集中存在的记录数据不全，回溯无效等问题，亟需应用新技术解决。

发明内容

分析以上问题，无法采集网页操作数据的主要原因在于：当前网页对某些内容没有操作权限。

第一方面，本发明提出一种网页操作记录的方法：确定当前网页中存在无权限采集网页操作的第一内容时，获取所述第一内容所对应的第一资源的网址，根据所述第一内容或所述第一资源的类型，获取预定的加载方式，按照所述预定的加载方式加载所述第一资源为第二内容，基于所述第二内容采集所述网页操作。

其中，采集所述网页操作包括采集用户操作生成网页操作数据、采集网页数据生成网页操作数据中的一种或多种，所述网页数据包括DOM数据、网页HTML数据、CSS数据中的一种或者多种。

本领域技术人员可知，在网页中嵌入同一类型的资源包含多种方式，某些方式例如利用外部应用或者互动程序(插件)等渲染内容，该类方式当前网页没有对该部分内容的操作权限，某些方式当前网页具有权限，可采集到网页操作数据。本申请的实现原理是，在检测到不具备权限的内容时，更换为一种可采集到网页操作数据的方式加载该内容。

需要说明的是，本申请中的网页操作数据，包括但不限于在用户执行网页操作过程中所采集的网页操作指令数据，以及基于网页数据发生的变化所采集的网页数据，包括全量网页数据以及增量网页数据等，所述网页数据包括网页DOM数据、序列化后的DOM数据、网页HTML数据、网页CSS数据等。

在本申请中，将当前网页中存在无权限采集网页操作的内容定义为第一内容。以上实现方式中，确定当前网页中存在所述第一内容，包括以下方式：

已知当前网页中存在无权限采集网页操作的第一内容；

根据已有的第一内容特征集合，对网页加载的HTML内容进行检测，获取所述第一内容，例如，将embed标签确定为所述第一内容，将跨域请求的资源确定为所述第一内容等。

在一种可能的实现方式中，获取所述第一内容所对应的第一资源的网址，根据所述第一内容的类型，获取对应的网址获取方法，基于所述网址获取方法获取所述第一资源的网址。可选的，从所述第一内容的URL属性或src属性中获取所述第一资源的网址。

在一种可能的实现方式中，当前网页无法直接获取到所述第一资源的网址，例如，在当前页面打开一页面地址显示所述网页内容，而该页面地址并非所述第一资源网址，即所述页面地址用于渲染所述第一内容但不包含所述第一资源网址，例如对所述第一资源网址进行了加密处理等。针对以上情形，向服务端发送所述第一内容对应的页面地址，由所述服务端获取所述第一内容对应的所述第一资源的网址，并接收服务端发送的所述第一资源的网址。该种实现方式中，利用服务端能力获取所述第一资源的网址，例如，在服务端打开所述页面地址，通过抓包等获取到真正的所述第一资源网址。

可选的，在以上实现方式无法获取到真正的所述第一资源网址的情况下，在所述服务端根据所述页面地址加载所述第一内容，并基于所加载的所述第一内容获取网页数据发送，当前页面接收服务端发送的网页数据以按照所述预定的加载方式加载所述第一资源为第二内容。其中，所述网页数据包括DOM数据、序列化后的DOM数据、网页HTML数据、CSS数据中的一种或者多种。

在一种可能的实现方式中，确定当前网页中存在无权限采集网页操作的第一内容后，还包括，拦截对所述第一内容的操作事件，或者，在当前网页中移除所述第一内容。

对应的，在确定当前网页中存在所述第一内容之后，拦截页面操作事件，在加载对应的所述第二内容后，停止拦截所述页面操作事件。

第二方面，本申请还提出了一种JavaScript库，所述JavaScript库嵌入在网页中运行以执行以上第一方面中的任意一项方法。

综上所述，本发明主要技术特征是，识别不具有获取操作和数据的权限的网页内容，然后将该类网页内容的加载自动改写为一种通过网页JavaScript可获取网页操作或和数据的方式，以解决对一些网页内容采集不到操作数据的问题。本发明至少具有如下有益效果：对网页中包含的无权限采集网页操作的内容，提供了一种处理的方法，更换该类内容的加载方式，使当前网页有权限采集用户对其的操作数据，有利于保证网页操作采集的完整性，生成完整的可回溯数据，以解决在可回溯系统、网页同屏交流系统中存在的无法采集到网页操作的问题。

附图说明

图1为本申请实施例提供的一种网页操作采集的处理流程示意图；

图2为本申请实施例提供的一种通过服务端获取所述第一资源的网址的流程示意图；

图3为本申请实施例提供的一种通过服务端渲染获取网页数据并生成第二内容的流程示意图；

图4为本申请实施例提供的一种网页操作采集的处理流程示意图。

具体实施方式

本申请的实施方式部分仅用于对本申请进行解释，而非旨在限制本申请。

以下，对本申请的实施例进行描述，显然，所描述的实施例仅仅是本申请一部分的实施例，而不是全部的实施例。本领域普通技术人员可知，随着技术的发展和新场景的出现，本申请实施例提供的技术方案对于类似的技术问题，同样适用。

网页操作采集，也即采集用户对网页的操作，所采集的数据可用于模拟用户在网页上的操作行为，采集过程可以包括用户点击、填写表单、滚动页面等操作，将该类信息采集生成网页操作指令，在执行回放或还原时，使用JavaScript执行所述网页操作指令，以还原与用户操作时相同的执行效果。另外一种采集网页操作的方式是，根据用户在网页上执行操作过程中网页数据发生的变化进行采集，例如在网页上建立MutationObserver，在监听到网页数据发生改变后，记录生成操作过程中的发生变化的网页数据，所述网页数据包括但不限于DOM数据、网页HTML数据、CSS数据等，相应的，在执行回放或还原时，根据所记录的网页数据渲染网页，还原网页操作过程。以上，为两种主要的网页操作采集方式，与传统录制操作视频记录操作过程的方式相比较，所采集的数据量较小，利于保存，回放效果好，画质无损。

目前，网页操作采集的应用场景非常广泛，例如以下场景：

可回溯应用场景，需采集用户投保过程生成电子数据，实现保险销售行为可回溯。该类场景中，通过网页操作采集技术，生成可用于回溯的网页操作记录数据。

网页同屏应用场景，网页同步是指多个用户在不同终端或浏览器上同时浏览同一个网页时，网页内容和状态能够进行实时的同步更新。为实现不同终端间的网页同步更新，在一个终端发生网页操作后，通过网页操作采集技术采集网页操作数据向另一终端发送以使各终端间的网页显示保持同步。

但是，现有的网页操作采集技术并不适用于所有网页，其在网页操作采集时可能存在以下问题：

例如，客户在基于投保链接执行投保的场景中，按要求需在用户投保过程中展示一些必要资料，要求用户仔细阅读并回复，例如产品条款、费率表、健康告知等，该类资料一般为PDF文档，在网页中嵌入PDF文档，通常包括以下方式：

第一种，使用<embed>标签：使用<embed>标签可以在网页中直接嵌入PDF文档。示例代码如下：

第二种，使用<iframe>标签：使用<iframe>标签可以创建一个内嵌的框架，在其中显示PDF文档。示例代码如下：

第三种，使用Google Docs Viewer：Google Docs Viewer是一个在线文档查看器，可以通过Google Docs Viewer来嵌入和浏览PDF文档。示例代码如下：

第四种，使用PDF.js库：PDF.js是一个开源的JavaScript库，可以在网页中渲染和展示PDF文档。您可以通过引入相应的PDF.js库文件并使用相应的API来实现在网页中嵌入PDF文档。

分析以上几种嵌入和展示PDF文档的方式，第一种<embed> 标签实质是定义了一个容器，用来嵌入外部应用或者互动程序(插件)，其内部呈现的内容仅浏览器插件、互动程序等具有操作权限，当用户浏览时，网页中的JavaScript根本无法采集到其浏览过程。第二种<iframe>是一个内嵌的框架，虽然JavaScript提供了在父窗口中获取iframe中的元素以及在在iframe中获取父窗口的元素的方法，但如果页面跨域，该类方法均无法执行。第三种方式Google Docs Viewer为一在线的文档查看器，除非https://docs.google.com/viewer本身提供了记录用户操作和返回用户操作的方法，否则，根本无法采集到任何用户操作数据，事实也正是如此。第四种方式中，以下是使用PDF.js库来嵌入和显示PDF文档的示例：

<!DOCTYPE html>

<html>

<head>

<title>PDF.js Example</title>

</head>

<body>

var url = 'path/mydocument.pdf';

var container = document.getElementById('pdfContainer');

pdfjsLib.getDocument(url).promise.then(function(pdf) {

pdf.getPage(1).then(function(page) {

var viewport = page.getViewport({ scale: 1.5 });

var canvas = document.createElement('canvas');

var context = canvas.getContext('2d');

canvas.width = viewport.width;

canvas.height = viewport.height;

container.appendChild(canvas);

page.render({

canvasContext: context,

viewport: viewport

});

</script>

</body>

</html>

以上示例中，“mydocument.pdf”即为要显示的PDF文档的路径。其在Web页面中创建一个容器，在其内部创建一个canvas以显示PDF文档内容，并使用PDF.js库加载和渲染第一页的PDF文档，使用DataCollectionProcess.js库获取用户操作数据。该种方式中，“pdfContainer”即为显示pdf的容器，DataCollectionProcess.js库无疑对其拥有权限，可采集到关于其的用户操作数据。另外需要说明的是，以上并未完全列举显示PDF文档的方式，例如利用<object>标签也可展示PDF文档等。

可见，以上四种在网页中显示PDF文档的方式中，通常因为使用了浏览器插件、扩展程序、特定的应用程序、涉及跨域访问等问题，导致无法采集用户操作数据的问题发生。在具体的应用场景中，则表现为网页操作采集数据不完整、一些网页无法正常同步等问题。另外需要说明的是，在本申请实施例中，通过对PDF文档的用户操作采集说明本申请的技术原理，还包括在网页中可显示的其它各种资源、文档类型，因此，不应因本申请实施例中以PDF文档为例而限制本申请。

根据以上分析，无法针对PDF文档采集操作数据的主要原因是网页中的DataCollectionProcess.js库或Javascript代码对其无访问和操作权限，本申请基于该原因解决这一问题，所采用的主要技术手段是：将当前PDF文档的呈现方式，更改为可采集到操作数据的呈现方式，具体的，在检测到PDF文档以上第一、二、三种方式显示时，在运行时，将其切换为以上第四种PDF文档呈现方式。

下面采用几个具体实施例对本发明上述实施例的技术方案进行详细说明。

图1为本申请实施例提供的一种网页操作采集的处理流程示意图，详细步骤包括：

S101，确定当前网页中存在无权限采集网页操作的第一内容；

S102，获取所述第一内容所对应的第一资源的网址；

S103，根据所述第一内容或所述第一资源的类型，获取预定的加载方式，按照所述预定的加载方式加载所述第一资源为第二内容。

在本申请中，将无权限对其采集网页操作的网页内容定义为第一内容，将有权限对其采集网页操作的网页内容定义为第二内容。以上步骤中，S101步骤确定所述第一内容，包括但不限于已知当前网页中存在无权限采集网页操作的第一内容、根据已有的第一内容特征集合检测到所述第一内容等，其中，所述第一内容特征例如，包含embed标签、包含object标签、包含将跨域请求的资源等。结合以上在网页中加载PDF文档示例，所述第一内容例如：

其中，所述第一内容所对应的所述第一资源的网址为：https://a.com/example.pdf，S102步骤中，获取所述第一资源的网址，为S103重新加载所述第一资源提供支持。S103步骤中，根据所述第一资源的类型获取预定的加载方式，该示例中，判断第一内容或第一资源的类型为PDF文档，然后获取一种可加载所述第一资源为第二内容的加载方式，例如以上加载PDF文档的第四种方式，使用PDF.js库来嵌入和显示PDF文档，使可获取到用户对该文档浏览和操作的相关数据，具体加载方式在以上介绍PDF文档的加载方式中已详细说明，在此不再赘述。

embed标签是HTML中用于嵌入外部内容的标签之一。它允许您在网页中嵌入多媒体内容，如音频、视频、Flash动画等。在一种可能的实现方式中，本申请实施例判断当前网页中存在无权限采集网页操作的第一内容，将embed标签确定为所述第一内容。

跨域请求是指在浏览器中，通过JavaScript发起的跨域（即不同域名、端口或协议）的HTTP请求。浏览器出于安全考虑，限制了跨域请求的能力，这是由同源策略（Same-Origin Policy）所决定的。在一种可能的实现方式中，本申请实施例判断当前网页中存在无权限采集网页操作的第一内容，将跨域请求的资源确定为所述第一内容。

在一种可能的实现方式中，获取所述第一内容所对应的第一资源的网址，根据所述第一内容的类型，获取对应的网址获取方法，基于所述网址获取方法获取所述第一资源的网址，例如，在网页中包含以下内容：

在上面的示例中，使用了<iframe>标签来嵌入一个网页。src属性指定了要嵌入的网页的URL地址，width和height属性指定了iframe的宽度和高度。

以上方式在一个网页中嵌入其他网页的内容，比如嵌入一个地图、视频播放器或其他网站的页面等。在检测到iframe标签后，则确定所述第一内容的类型为iframe标签，所述第一资源为网页，基于所述第一内容的类型，调用对应的网址获取函数，获取所述第一资源的网址https://www.web2.com。

在一种可能的实现方式中，当判断所述第一内容中包含URL属性或src属性时，直接读取所述URL属性或所述src属性的值，在判断其符合所述第一资源的网址特征后，将所述URL属性或所述src属性的值作为所述第一资源的网址。

以上实现方式介绍了根据所述第一内容的类型获取所述第一资源网址，以及常见的获取所述第一资源网址的方法，但是，并非所有的所述第一资源的网址均可通过以上方法获得，例如，开发者对所述第一资源的网址进行了以下处理：使用代理服务器，通过将请求发送到代理服务器，再由代理服务器转发请求，以隐藏实际的网络资源网址，这样，客户端只会看到代理服务器的网址；URL重写：在服务器端进行URL重写，将实际的资源网址转换为其他形式的网址，这样，客户端只会看到重写后的网址，而不是实际的网址；动态加载资源：通过使用JavaScript等技术，在客户端动态加载资源，以隐藏实际的资源网址，例如将资源分割为多个部分，然后在客户端动态拼接和加载这些部分。以上方式均有隐藏所述第一资源的网址的效果，使客户端无法直接获取所述第一资源的网址。

针对以上情形，在一种可能的实现方式中，如图2所示的一种通过服务端获取所述第一资源的网址的流程示意图，详细步骤如下：

在当前网页10中：

S201，获取第一内容对应的页面地址；

S202，发送页面地址；

在服务端20中：

S203，接收所述页面地址；

S204，获取所述第一内容对应的所述第一资源的网址；

S205，发送所述第一资源的网址；

在当前网页10中：

S206，接收所述第一资源的网址并加载所述第一资源为第二内容。

以上实现方式中，所述页面地址并非所述第一资源的网址，可理解为隐藏所述第一资源的网址后对应加载的内容，但是，根据本发明的技术原理，为所述第一资源更换一种新的加载方式，所述页面地址并不能直接应用于所述第二内容加载。以上实现方式利用了服务端的处理能力，例如，在服务端使用网络抓包工具等获取实际的所述第一资源的网址。

但是，以上实现方式并非一定能够获取所述第一资源的网址，对一些安全级别较高的页面仍无法获取到实际的网址，因此，本发明实施例还提供了另一种实现方式，具体如下：

在当前网页10中：

S301，获取第一内容对应的页面地址；

S302，发送页面地址；

在服务端20中：

S303，接收所述页面地址，在所述服务端根据该页面地址加载所述第一内容；

S304，基于服务端加载的所述第一内容获取所述网页数据；

S305，发送网页数据；

在当前网页10中：

S306，接收网页数据，基于所述网页数据显示为所述第二内容。

以上实现方式中，在无法利用服务端能力获取所述第一资源网址的情况下，利用服务端的渲染能力获取网页数据，根据所述网页数据在客户端显示所述第二内容。需要注意的是，在当前网页中直接基于所述页面地址渲染，所获得的为所述第一内容，所述当前网页对其无采集操作的权限；而在所述服务端基于所述页面地址渲染后，利用服务端获取网页数据的能力，获取所述网页数据并发送，所述当前网页接收后，基于其显示的为所述第二内容，所述当前网页对其拥有采集操作的权限。另外需要说明的是，所述网页数据包括但不限于网页DOM数据、序列化后的DOM数据、网页HTML数据、网页CSS数据等。

在一种可能的实现方式中，如图4所示的一种网页操作采集的处理流程示意图，主要步骤如下：

S401，确定当前网页中存在无权限采集网页操作的第一内容；

S402，拦截页面操作事件；

S403，获取所述第一内容所对应的第一资源的网址；

S404，根据所述第一内容或所述第一资源的类型，获取预定的加载方式，按照所述预定的加载方式加载所述第一资源为第二内容；

S405，停止拦截页面操作事件。

以上实现方式相较于图1所示的实施例，增加了S402拦截页面操作事件以及S405停止拦截页面操作时间的步骤，以确保页面在应用本申请所提供的方法处理过程中，用户无法对页面执行任何操作，进一步保证采集的网页操作数据的完整性。

在一种可能的实现方式中，将本发明所提供的方法集成在一个JavaScript库中，以实现上述任一实施例所描述的方法，供网页开发人员快速引入和使用。在引入该JavaScript库的基础上，使网页自动具备将网页中无权限采集操作的第一内容转化为可采集网页操作的第二内容的能力。

综合以上，本申请实施例针对无权限采集网页操作的网页内容，提供了一种处理方法，使在不影响用户浏览和操作的基础上，有权限采集网页操作数据，有利于保证网页操作采集的完整性，生成完整的可回溯数据，以及在网页同屏交流系统、可回溯应用中，实现完整的网页操作数据采集。

以上，仅为本申请实施例的具体实施方式，但本申请实施例的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本申请实施例揭露的技术范围内，可轻易想到的变化或替换，都应涵盖在本申请实施例的保护范围之内。因此，本申请实施例的保护范围应以权利要求的保护范围为准。

Claims

1.一种网页操作采集方法，其特征在于，包括：

确定当前网页中存在无权限采集网页操作的第一内容时，获取所述第一内容所对应的第一资源的网址，根据所述第一内容或所述第一资源的类型，获取预定的加载方式，按照所述预定的加载方式加载所述第一资源为第二内容，基于所述第二内容采集所述网页操作，其中，采集所述网页操作包括采集用户操作生成网页操作数据、采集网页数据生成网页操作数据中的一种或多种，所述网页数据包括DOM数据、网页HTML数据、CSS数据中的一种或者多种。

2.根据权利要求1所述的方法，其特征在于，确定当前网页中存在无权限采集网页操作的第一内容，还包括，将embed标签确定为所述第一内容。

3.根据权利要求1所述的方法，其特征在于，确定当前网页中存在无权限采集网页操作的第一内容，还包括，将跨域请求的资源确定为所述第一内容。

4.根据权利要求1所述的方法，其特征在于，获取所述第一内容所对应的第一资源的网址，包括，根据所述第一内容的类型，获取对应的网址获取方法，基于所述网址获取方法获取所述第一资源的网址。

5.根据权利要求1所述的方法，其特征在于，获取所述第一资源的网址，还包括，从所述第一内容中获取URL属性或src属性的值，在判断其符合所述第一资源的网址特征后，将所述URL属性或或src属性的值作为所述第一资源的网址。

6.根据权利要求1所述的方法，其特征在于，获取所述第一资源的网址，还包括，向服务端发送所述第一内容对应的页面地址，并接收所述服务端返回的所述第一资源的网址，其中，所述页面地址用于渲染所述第一内容但不包含所述第一资源网址，所述服务端基于所述页面地址，获得所述第一内容对应的所述第一资源的网址。

7.根据权利要求1所述的方法，其特征在于，获取所述第一资源的网址，还包括，向服务端发送所述第一内容对应的页面地址，并接收服务端发送的网页数据以按照所述预定的加载方式加载所述网页数据为第二内容，其中，所述页面地址由所述服务端接收，在所述服务端根据所述页面地址加载所述第一内容，并基于所加载的所述第一内容获取所述网页数据，所述网页数据包括DOM数据、序列化后的DOM数据、网页HTML数据、CSS数据中的一种或者多种。

8.根据权利要求1所述的方法，其特征在于，确定当前网页中存在无权限采集网页操作的第一内容后，还包括，拦截对所述第一内容的操作事件，或者，在当前网页中移除所述第一内容。

9.根据权利要求1所述的方法，其特征在于，在确定当前网页中存在所述第一内容之后，拦截页面操作事件，在加载对应的所述第二内容后，停止拦截页面操作事件。

10.一种JavaScript库，其特征在于，所述JavaScript库嵌入在网页中运行以执行权利要求1～9中的任意一项所述的方法。