Rétro ingénierie d'applications web javascript pour aider à la compréhension et à la documentation

Cloutier, Jonathan (2016). Rétro ingénierie d'applications web javascript pour aider à la compréhension et à la documentation. Mémoire de maîtrise électronique, Montréal, École de technologie supérieure.

Prévisualisation	PDF Télécharger (9MB) | Prévisualisation
Prévisualisation	PDF Télécharger (3MB) | Prévisualisation

Résumé

Ce mémoire s’intéresse à la rétro-ingénierie comme solution pour aider les développeurs à comprendre, modifier et documenter la structure de leurs applications web. Pour retrouver la structure d’une application, il faut souvent recourir à de l’analyse statique du code source pour retrouver les différents éléments et les différentes relations qui composent l’application. Le développement web présente ici des défis particuliers puisqu’il fait intervenir plusieurs langages. Certains de ces langages, comme HTML et CSS sont relativement simples; d’autres le sont moins. En particulier, JavaScript, un langage clé de la technologie Web, présente des aspects dynamiques importants (p. ex.: typage dynamique, évaluation dynamique de chaines de caractères) qui pourraient rendre très inefficace une analyse statique du code source. En effet, la récupération des éléments constituant l’application et de leurs liens pourrait devoir nécessiter une analyse dite dynamique qui se ferait sur des scénarios d’exécution. Cependant, de telles analyses dynamiques ne garantissent pas une couverture complète de l’application et ne peuvent se faire que si le code est exécutable. Nous avons donc conduit une étude empirique sur la viabilité de l’analyse statique pour la rétro-ingénierie de JavaScript. Forts de ces résultats ainsi que des constats sur les techniques et outils existants, nous proposons nos propres pistes de solutions sous forme d’une nouvelle approche de rétro-ingénierie (Web application Viewer). Cet outil est subséquemment utilisé pour performer des expérimentations de visualisation de structure à l’aide de diagrammes de force dirigée et diagrammes de classes. L’outil de rétro-ingénierie créé permet d’extraire les principaux éléments de la structure d’une application web pour les langages JavaScript, Node.js, HTML et CSS. Les résultats sont satisfaisants et permettent au développeur de documenter leurs applications rapidement à l’aide de diagrammes.

Titre traduit

Reverse engineering of web application for comprehension and documentation

Résumé traduit

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, which is 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. Indeed, its dynamic nature (ex.: dynamically typed, real-time evaluation) seems to complicate things. While the task of analyzing the code seems to be tailor-made for the dynamic analysis, some situations prevent us from using it (eg .: faulty orincomplete code). Moreover, there is no certainty that developers use enough of these dynamic features to render the results of static analysis useless. One of the mandates of this thesis is to empirically assess the use of static analysis for JavaScript as a viable approach for reverse engineering for documentation purpose. Then, using the results of the empirical study and the findings on existing tools and techniques, we offer our own potential solutions. A new reverse engineering approach is presented that takes the form of a tool called WAVI. This tool is subsequently used to perform structural visualization experiments using force directed diagrams and classes. The established reverse engineering tool is used to extract the key elements of the structure of a web application for JavaScript, Node.js, HTML and CSS. The effectiveness of WAVI is evaluated with experiments that demonstrate that it can resolve JavaScript calls better than a recent technique, and its visualisation modules are intuitive and scalable. The results are satisfactory and allow the developer to document their applications quickly using diagrams.

Type de document:	Mémoire ou thèse (Mémoire de maîtrise électronique)
Renseignements supplémentaires:	"Mémoire présenté à l'École de technologie supérieure comme exigence partielle à l'obtention de la maîtrise en génie logiciel". Bibliographie : pages 143-147.
Mots-clés libres:	Applications Web Développement. Rétro-ingénierie. JavaScript (Langage de programmation) Programme source (Informatique) Visualisation logicielle. analyse classe diagramme dirige force statique diagramme de structure, HTML
Directeur de mémoire/thèse:	Directeur de mémoire/thèse Kpodjedo, Sègla
Programme:	Maîtrise en ingénierie > Génie
Date de dépôt:	30 mai 2016 18:41
Dernière modification:	30 mai 2016 18:41
URI:	https://espace.etsmtl.ca/id/eprint/1669

Gestion Actions (Identification requise)

Dernière vérification avant le dépôt