Extracting Data from Rendered HTML Templates

Abstract:

Extracting information from HTML and binding event handlers to the Document Object Model (DOM) in web applications using CSS selectors is a tedious exercise. There have been many attempts to both rectify the root cause and alleviate the symptoms with jQuery being the most prominent among them. We present a tool which solves precisely this problem and leverages the fact that web applications use HTML templates, which can be analyzed to automate the otherwise manual navigation through the DOM. We also show how a clear-cut, minimal scope can increase the applicability of a tool and allow it to thrive in an ecosystem of other software.

Our tool is based on the mustache template engine which is implemented in numerous programming languages. On the client it recreates the original dataset that was used to render a template. This reconstructed dataset allows the developer to read values from -- and interact with -- the DOM using the already familiar identifiers that were used as placeholders in the templates. Because these identifiers do not change when templates are restructured, this method is also more robust than using CSS selectors, which we demonstrate with two web applications.