Building call graphs for embedded client-side code in dynamic web applications

Abstract

When developing and maintaining a software system, programmers often rely on IDEs to provide editor services such as syntax highlighting, auto-completion, and "jump to declaration". In dynamic web applications, such tool support is currently limited to either the server-side code or to hand-written or generated client-side code. Our goal is to build a call graph for providing editor services on client-side code while it is still embedded as string literals within server-side code. First, we symbolically execute the server-side code to identify all possible client-side code variations. Subsequently, we parse the generated client-side code with all its variations into a VarDOM that compactly represents all DOM variations for further analysis. Based on the VarDOM, we build conditional call graphs for embedded HTML, CSS, and JS. Our empirical evaluation on real-world web applications show that our analysis achieves 100% precision in identifying call-graph edges. 62% of the edges cross PHP strings, and 17% of them cross files-in both situations, navigation without tool support is tedious and error prone.

Varis: IDE Support for Embedded Client Code in PHP Web Applications

“…In the first step, we approximate the output of a PHP program using a symbolic execution engine we developed in prior work [7], [5]. The symbolic executer explores all feasible paths in the program to obtain all possible outputs (with In the second step, we parse this output with symbolic values and conditional characters.…”

“…In the final step, we assemble all these conditional ASTs for HTML, CSS, and JS into a single VarDOM representation which compactly represents all possible variations of the generated client code. More technical details can be found in [5]. The VarDOM provides the foundation for different types of analysis.…”

“…For example, Varis will show the AJAX option and allow the user to choose the navigation from the opening <script> tag at line 14 to its respective closing tag at either line 18 or 22. Details on the call graph construction algorithm and its accuracy are described in [5].…”

“…For most subject systems used in our study, the initial creation of the VarDOM and call graph completed within a few seconds [5]. When the source code is changed, Varis reanalyzes relevant files only.…”

“…DRC collects program entities in the symbolic output via heuristics without explicitly parsing the output into a DOM and ASTs as we did with Varis. In [5], we demonstrated building call graphs for embedded client code (without tooling). In this work, we put together the call graph application and a number of other services into a supporting tool for web development.…”