CN108304173B

CN108304173B - 一种获取网页执行JavaScript函数调用路径的方法

Info

Publication number: CN108304173B
Application number: CN201710033454.2A
Authority: CN
Inventors: 张卫丰; 刘蕊成; 赵晨; 陈贵美; 许蕾; 王子元; 周国强; 张迎周
Original assignee: Nupt Institute Of Big Data Research At Yancheng
Current assignee: Nupt Institute Of Big Data Research At Yancheng
Priority date: 2017-01-13
Filing date: 2017-01-13
Publication date: 2021-11-16
Anticipated expiration: 2037-01-13
Also published as: CN108304173A

Abstract

本发明公开了一种获取网页执行JavaScript函数调用路径的方法，通过使用JavaScript的动态插桩工具Jalangi对网页进行动态插桩，对网页中JavaScript执行路径中的所有函数加入函数调用路径信息。首先定义一个可以在JavaScript函数的最后添加一个参数的方法，该方法用于在函数执行前在函数的参数列表中保存执行到当前的函数调用路径信息；然后对如setTimeOut，setInterval，apply和call等函数加入参数的操作进行特殊处理，保证函数调用路径的延续和统一执行；最后对于生成iframe、script和a标签的部分，输出对应的函数调用路径信息。该发明对函数调用关系有一个完整的链路输出，方便开发者追踪和调试。

Description

一种获取网页执行JavaScript函数调用路径的方法

技术领域

本发明涉及一种获取网页执行JavaScript函数调用路径的方法，属于互联网领域。

背景技术

随着Web2.0技术的发展，使用JavaScript的应用发展随之不断加快。JavaScript是一种网络脚本语言，已经被广泛用于Web应用开发，常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。通常JavaScript脚本是嵌入在HTML页面中，以实现特定的功能。

许多大型JavaScript应用程序间的函数调用关系是非常复杂的，在开发或者调试过程中，经常需要跟踪某个函数是由哪些函数调用后才触发执行的，弄清楚这些函数的调用顺序对我们理解程序代码中的数据流向、进而排查定位错误是非常重要的。

浏览器中可以通过调试获得JavaScript函数调用关系，如Firefox需要开发者输入console.trace()显示该函数调用的上下文关系，但无法获取完整的调用链路；另外浏览器的函数调用关系碰到setTimeOut和setInterval等定时函数无法对其调用执行的函数进行追踪，一旦使用setTimeOut或setInterval等函数，将导致函数调用路径的断链。

发明内容

技术问题：本发明的目的是通过对网页代码进行执行，获得网页中JavaScript的完整函数调用路径信息，克服现有浏览器技术只能获得JavaScript函数上下文调用关系的缺点和对setTimeOut函数与setInterval函数无法继续追踪的缺点；另外还可以动态配置开发者需要显示的调用路径信息，并且获得跨iframe的函数调用信息。

为实现上述目的，本发明通过使用JavaScript动态插桩工具，对整个网页的JavaScript源码进行插桩，获取JavaScript执行时的函数调用路径信息；对setTimeOut和setInterval等函数进行特殊处理，保证使用定时函数不会出现调用路径断链的情况；允许动态配置调用路径，并在网页加载时进行调用路径的显示，具有一定的灵活性，对于获取到的调用路径信息，通过匹配的方法，获取生成该iframe或脚本的调用信息和当前执行的函数调用信息。

本发明方法具体包括如下步骤：

步骤1：对网页执行的JavaScript代码进行插桩

使用JavaScript的动态插桩工具Jalangi，在网页加载时对所有执行的JavaScript代码进行插桩，以便获取插桩代码中所需要的链路信息。

步骤2：对JavaScript函数调用路径信息进行获取和追踪

由于JavaScript语言具有允许动态绑定属性到函数的特性，所以考虑在调用路径的函数上绑定一个用于记录追踪路径的trace属性，该trace属性记录了主动调用当前函数的函数，通过在全局变量中对trace属性的保存，达到记录页面中JavaScript源码所有调用关系的目的。

步骤3：对JavaScript中特殊函数存取调用关系信息的处理

步骤3.1：对于setTimeOut和setInterval函数的处理

JavaScript中的setTimeOut用于设定一个时间，时间一到就执行某个函数；setInterval用于每隔一段时间重复执行某一函数。插桩后的JavaScript代码不进行等待而是直接执行，并且也对trace路径进行记录，保证了控制流、数据流的完整性。

步骤3.2：对于apply和call函数的处理

由于将属性动态绑定到函数需要使用apply和call函数，因此当记录trace遇到apply和call函数时，需要考虑函数参数个数的不同，并将trace信息加入到apply和call方法中，以保证调用信息能够延续下去。

步骤4：对trace信息进行输出

开发者可以选择自行配置输出条件，将插入了iframe、script、a标签的地方认定为调用路径的结束处，对需要的路径在控制台中进行输出。

步骤5：对调用路径信息进行匹配并形成跨iframe的调用关系

根据trace信息可以得到各个不同iframe内部的JavaScript函数调用路径，通过对调用路径中调用关系的比对，可以将不同的iframe联系起来，形成跨iframe的调用关系。

与现有技术相比，本发明具有如下有益效果：

弥补现有浏览器函数调用关系中对setTimeOut和setInterval等定时函数无法继续追踪的缺陷，通过Jalangi工具的动态插桩，获取网页中JavaScript执行时的完整调用路径信息，方便开发人员在JavaScript开发过程中的跟踪与调试；可以动态配置用户需要获取的特定调用路径，方便对网页中的某一类信息进行追踪和检测。

附图说明

图1是保存函数调用路径方法的流程图；

图2是在函数执行过程中保存调用路径的流程图；

图3是调用路径输出后对跨iframe函数调用处理的流程图；

具体实施方式

下面结合附图对本发明作进一步详细说明。

步骤1：对网页执行的JavaScript代码进行插桩

使用JavaScript的动态插桩工具Jalangi，给浏览器设置代理服务器，在网页加载时，所有执行的脚本文件将通过Jalangi的代理服务器，代理服务器对这些代码进行动态插桩，可以对所需要的信息进行配置，可以获取JavaScript中函数执行前后的属性等信息。

步骤2：对JavaScript函数调用路径信息进行获取和追踪

如图1所示，由于JavaScript语言具有允许动态绑定属性到函数的特性，所以考虑在调用路径的函数上绑定一个用于记录追踪路径的trace属性，通过对trace属性的修改和传递，达到传递函数调用信息、获取函数调用路径的目的。

使用Array.prototype.slice.call(arguments)，可以获取当前函数的参数列表，在函数执行之前，将trace信息添加入获取到的参数列表中，并使用JavaScript的apply方法，将修改过的参数重新推进函数的参数部位。

由此可以将主动调用当前函数的函数进行保存，即获得两两对应的函数调用关系。所有的两两对应关系都保存在一个数组类型的全局变量中，当需要输出时，通过遍历整个数组，获得完整的调用路径关系。

具体的保存调用路径算法如下所示：

步骤3：对JavaScript中特殊函数存取调用路径信息的处理

步骤3.1：对于setTimeOut和setInterval函数的处理

JavaScript中的setTimeOut函数用于设定一个时间，时间一到就执行该函数，而setInterval函数用于设定一个时间，每隔一段时间就执行一次该函数。

setTimeOut和setInterval两个函数的应用使得浏览器无法得到连贯的JavaScript执行控制流、数据流。

Jalangi提供了invokeFun函数，可以调用当前函数并对其进行立即执行。Jalangi对每个执行过程中的函数维护了一个用于唯一标识的sid，在执行invokeFun()方法之前对该sid进行保存，并在调用之后将sid进行返回，保证sid不在执行过程中被Jalangi工具所改变。

具体算法如下所示：

步骤3.2：对于apply和call函数的处理

由于步骤2中使用apply函数将trace信息存放在函数的参数中，而apply和call函数的作用是改变函数运行时的作用域，因此，遇到执行的函数为apply或者call时，需要根据它们的参数个数情况进行特殊处理。

apply函数用于不知道具体参数个数的情况，第二参数为数组，数组中存放的是需要传递的参数列表。若调用apply函数时，原函数没有参数或其第二个参数为空，则需要将trace以数组形式传递给apply函数；如果本身参数足够，则将trace加入到第二个参数的最后。

call函数用于已知参数个数的情况，在存储trace信息时，需要将其作为call函数的最后一个参数。

步骤3.3：对于其它函数的处理

当执行用户自定义的函数和大部分的原生函数时，直接调用步骤2中定义的算法，即可将函数调用路径信息保存在函数的属性中。

步骤4：对trace信息进行输出

开发者或用户可以自行定义输出的标准，即对用户所需要的信息进行配置，以输出相应的调用路径。可以选择记录对象属性读取信息、算数运算操作信息、函数调用信息等。当插入为iframe、script、a标签时，如果这些标签静态插入url或是src，则实际上在原页面中的调用路径已经结束，因此通常将插入了iframe、script、a标签的地方认定为调用路径的结束处。在相应位置进行输出即可得到调用的trace路径。

步骤5：对调用路径信息进行匹配并形成跨iframe的调用关系

如图3，根据trace信息可以得到各个不同iframe内部的JavaScript函数调用路径，通过对调用路径中调用关系的比对，可以将不同的iframe联系起来形成跨iframe的调用关系。

该调用路径的伪代码如下所示：

本发明不限于上述实例，一切采用等同替换或等效替换形成的技术方案均属于本发明要求保护的范围。

Claims

1.一种获取网页执行JavaScript函数调用路径的方法，其特征在于，首先定义一个在JavaScript函数的最后添加一个参数的操作方法，该操作方法用于在函数执行前在函数的参数列表中保存执行到当前的函数调用路径信息，然后对setTimeOut，setInterval，apply和call函数加入参数的操作进行特殊处理，最后对于生成iframe、script和a标签的部分，输出对应的函数调用路径信息；

对setTimeOut，setInterval，apply和call函数加入参数的操作进行特殊处理，包含以下步骤：

1)使用JavaScript的动态插桩工具Jalangi，在网页加载时对所有执行的JavaScript代码进行插桩，以便获取插桩代码中所需要的链路信息；

2)由于JavaScript语言具有允许动态绑定属性到函数的特性，所以考虑在调用路径的函数上绑定一个用于记录追踪路径的trace属性，该trace属性记录了主动调用当前函数的函数，通过在全局变量中对trace属性的保存，达到记录页面中JavaScript源码所有调用关系的目的；

3)使用2)中的方法，对setTimeOut，setInterval，apply和call函数针对性地进行调用关系信息的存储；

对于生成iframe、script和a标签的部分，输出对应的函数调用路径信息，包括以下步骤：

4)按照3)中方法，开发者选择自行配置输出条件，将插入了iframe、script、a标签的地方认定为调用路径的结束处，对需要的路径在控制台中进行输出；

5)根据trace信息得到各个不同iframe内部的JavaScript函数调用路径，通过对调用路径中调用关系的比对，将不同的iframe联系起来，形成跨iframe的调用关系。

2.根据权利要求1所述的获取网页执行JavaScript函数调用路径的方法，其特征是步骤1)中，对网页执行的JavaScript代码进行插桩，即：

使用JavaScript的动态插桩工具Jalangi，给浏览器设置代理服务器，在网页加载时，所有执行的脚本文件将通过Jalangi的代理服务器，代理服务器对这些代码进行动态插桩，对所需要的信息进行配置，获取JavaScript中函数执行前后的属性信息。

3.根据权利要求1所述的获取网页执行JavaScript函数调用路径的方法，其特征是步骤2)中，对JavaScript函数调用路径信息进行获取和追踪：

由于JavaScript语言具有允许动态绑定属性到函数的特性，所以考虑在调用路径的函数上绑定一个用于记录追踪路径的trace属性，通过对trace属性的修改和传递，达到传递函数调用信息获取函数调用路径的目的；

使用Array.prototype.slice.call(arguments)获取当前函数的参数列表，在函数执行之前，将trace信息添加入获取到的参数列表中，并使用JavaScript的apply方法，将修改过的参数重新推进函数的参数部位；

由此将主动调用当前函数的函数进行保存，即获得两两对应的函数调用关系，所有的两两对应关系都保存在一个数组类型的全局变量中，当需要输出时，通过遍历整个数组，获得完整的调用路径关系。

4.根据权利要求1所述的获取网页执行JavaScript函数调用路径的方法，其特征在于步骤3)中，对JavaScript中特殊函数存取调用路径信息的处理，即：

对于setTimeOut和setInterval的处理：由于setTimeOut和setInterval两个函数会使得浏览器无法得到连贯的JavaScript执行控制流、数据流，而Jalangi提供了invokeFun函数，调用当前函数并对其进行立即执行，因此使用Jalangi对每个执行过程中的函数维护一个用于唯一标识的sid，在执行invokeFun()方法之前对该sid进行保存，并在调用之后将sid进行返回，保证sid不在执行过程中被Jalangi工具所改变；

对于apply和call记录trace的处理：apply和call函数的使用会改变函数运行时的作用域，因此，需要考虑这两个函数不同的参数个数情况，即若调用apply函数时，原函数没有参数或其第二个参数为空，则需要将trace以数组形式传递给apply，若本身参数足够，则将trace加入第二个参数的最后；call函数用于已知参数个数的情况，在存储trace信息时，需要将其作为call函数的最后一个参数；

对于其它函数的处理：当执行用户自定义的函数和大部分的原生函数时，直接将函数调用路径信息保存在函数的属性中。

5.根据权利要求1所述的获取网页执行JavaScript函数调用路径的方法，其特征在于步骤4)中，对trace信息进行输出，开发者或用户自行定义输出的标准，即对用户所需要的信息进行配置，以输出相应的调用路径，选择记录对象属性为读取信息、算数运算操作信息、函数调用信息；当插入为iframe、script、a标签时，如果这些标签静态插入url或是src，则实际上在原页面中的调用路径已经结束，因此将插入了iframe、script、a标签的地方认定为调用路径的结束处；在相应位置进行输出，即可得到调用的trace路径。

6.根据权利要求1所述的获取网页执行JavaScript函数调用路径的方法，其特征在于步骤5)中，对调用路径信息进行匹配并形成跨iframe的调用关系，根据trace信息得到各个不同iframe内部的JavaScript函数调用路径，通过对调用路径中调用关系的比对，将不同的iframe联系起来，形成跨iframe的调用关系。