Abstract
Web developers face some unique challenges when trying to understand, modify and document the structure of their web applications. The heterogeneity and complexity of the underlying technologies and languages heighten comprehension problems. In particular, JavaScript, as an essential part of the Web ecosystem, is a language that offers a flexibility that can make its code hard to grasp, when it comes to comprehension and documentation tasks. In this paper, we present the first iteration of WAVI (WebAppViewer), a reverse engineering tool that uses static analysis and a filter-based mechanism to retrieve and document the structure of a Web application. WAVI is able to extract elements coming from essential web languages and frameworks such as HTML, JavaScript, CSS and Node.js. The tool makes use of some simple, effective heuristics to accurately retrieve dependency links for files and methods. WAVI also offers the visualisation of the extracted information as force-directed graphs and customized class diagrams. The effectiveness of WAVI is evaluated with experiments that demonstrate that (i) it can resolve JavaScript calls better than a recent technique, and (ii) its visualisation modules are intuitive and scalable.