Unravel: Rapid web application reverse engineering via interaction recording, source tracing, and library detection

Joshua Hibschman, Haoqi Zhang

Research output: Chapter in Book/Report/Conference proceedingConference contribution

16 Scopus citations

Abstract

Professional websites with complex UI features provide real world examples for developers to learn from. Yet despite the availability of source code, it is still difficult to understand how these features are implemented. Existing tools such as the Chrome Developer Tools and Firebug offer debugging and inspection, but reverse engineering is still a time consuming task. We thus present Unravel, an extension of the Chrome Developer Tools for quickly tracking and visualizing HTML changes, JavaScript method calls, and JavaScript libraries. Unravel injects an observation agent into websites to monitor DOM interactions in real-time without functional interference or external dependencies. To manage potentially large observations of events, the Unravel UI provides affordances to reduce, sort, and scope observations. Testing Unravel with 13 web developers on 5 large-scale websites, we found a 53% decrease in time to discovering the first key source behind a UI feature and a 32% decrease in time to understanding how to fully recreate a feature.

Original languageEnglish (US)
Title of host publicationUIST 2015 - Proceedings of the 28th Annual ACM Symposium on User Interface Software and Technology
PublisherAssociation for Computing Machinery, Inc
Pages270-279
Number of pages10
ISBN (Electronic)9781450337793
DOIs
StatePublished - Nov 5 2015
Event28th Annual ACM Symposium on User Interface Software and Technology, UIST 2015 - Charlotte, United States
Duration: Nov 8 2015Nov 11 2015

Other

Other28th Annual ACM Symposium on User Interface Software and Technology, UIST 2015
CountryUnited States
CityCharlotte
Period11/8/1511/11/15

Keywords

  • Inspecting
  • Recording
  • Reverse Engineering
  • Tracing
  • Unravel
  • Web Applications

ASJC Scopus subject areas

  • Artificial Intelligence

Fingerprint Dive into the research topics of 'Unravel: Rapid web application reverse engineering via interaction recording, source tracing, and library detection'. Together they form a unique fingerprint.

  • Cite this

    Hibschman, J., & Zhang, H. (2015). Unravel: Rapid web application reverse engineering via interaction recording, source tracing, and library detection. In UIST 2015 - Proceedings of the 28th Annual ACM Symposium on User Interface Software and Technology (pp. 270-279). Association for Computing Machinery, Inc. https://doi.org/10.1145/2807442.2807468