- Méthodologie d'analyse
- Chapitre 1 : Découverte de l'application
- Chapitre 2 : Architecture fonctionnelle
- Chapitre 3.1 : rassemblons nos lego
- Chapitre 3.2 : architecture écran d'accueil
- Chapitre 3.3 : Connexion au(x) serveur(s)
- Chapitre 3.x : ....
- Chapitre 4 : exploiter nos connaissances
Comprendre comment fonctionne une application native n'est pas toujours aisé puisqu'on n'a pas accès au code source en général. Avec une application WEB c'est plus facile puisque non seulement on a accès au code source (html/js/css) mais en plus la majorité des navigateurs incorporent nativement tous les outils nécessaires pour mener l'analyse.
Pour ma première enquête je m'attaque à du lourd ... un ver de terre. Mais pas n'importe lequel, le ver de terre le plus célèbre du WEB : Slither.io, il s'agit d'un jeu en ligne que je vous conseille d'aller tester si vous ne connaissez pas.
Présentation du jeu:
Slither.io est un jeu dans lequel vous contrôlez un lombric (ou peut-être un serpent, l'histoire ne le dit pas) qui doit manger des petites sphères colorées pour grossir. Si la tête de votre ver en touche un autre vous êtes mort et vos restes peuvent servir de nourriture aux adversaires. Si un autre ver vous touche c'est lui qui meurt et vous pouvez alors vous jeter sur ses "restes" pour grossir. Le but du jeu est de grossir le plus possible, pour figurer dans le palmarès des plus gros vers. Le jeu existe en deux versions, une version web sur navigateur et une version sur tablette Android et Ios. Les graphismes sont simples, les règles aussi, mais pourtant je vous garantis qu'une fois que vous aurez commencé le jeu vous serez tellement accros que vous ne verrez pas les heures passer.
Le jeu dans sa version HTML (sur navigateur donc) est intéressant à disséquer car il incorpore une bonne partie des technologies HTML5 qu'il faut maitriser pour faire un jeu en ligne.
Mes outils :
- Sublime text version 3 comme éditeur de texte
- Firefox + extension développeur + websocket monitor
Et c'est tout !! eh oui c'est l'avantage du web, pas besoin d'outils onéreux.
Architecture statique
Pour allons mener une première analyse qui sera une analyse statique pour déterminer les technologies utilisées dans ce jeu et comment on va pouvoir le décortiquer. En quoi consiste une analyse statique ? L'analyse statique signifie que je ne vais pas regarder comment le jeu fonctionne, (comment il s'exécute) mais de quels éléments il est constitué. Alors allons-y. Premièrement on lance le jeu (Slither.io) et on entre un pseudo, peu importe lequel. Le jeu démarre de suite :
Premier problème, le serpent bouge, même si on ne fait rien, on ne peut pas mettre en pause, et s'il en touche un autre ou touche le bord du plateau de jeu il meurt, et on retourne à l'écran de login, on n'est donc pas très serein pour une analyse statique !! La méthode bourrin consiste à démarrer le jeu puis couper le réseau (comment ? et bien le plus simple est de déconnecter le câble réseau), le jeu se bloque en attente de reconnexion, et on peut commencer notre analyse.
Je rappelle que je suis sous Firefox. Je lance la console de développement (via le menu ou par Ctrl + Maj + I).
Il y aurait beaucoup de choses à dire à la lecture de l'onglet inspecteur, mais allons au but, si on promène la souris sur la liste des éléments ils apparaissent en surbrillance dans le navigateur, on voie ainsi quels éléments correspondent au code HTML. Celui qui nous intéresse est l'élément Canvas qui occupe toute la fenêtre. Ouf c'est pas du flash. On peut en conclure que la technologie utilisée est du HTML5/Canvas 2D dont l'affichage est géré par du code Javascript, il faut donc aller voir du coté du JS qui a été téléchargé.
Retour à la console de développement de Firefox, onglet réseau, on sélectionne uniquement le JS, et voici :
Si on enlève les scripts qui viennent de facebook, twitter et les scripts gérant la pub (outstream.js et client.js) il reste notre code JS : game7egig.js.
Ainsi se termine la première partie et la plus facile. En résumé on a une page html comportant des balises Canvas (il y en a plusieurs comme on le verra) et un script JS qui gère l'ensemble du jeu, aucune bibliothèque JS n'a été chargée. On n'aura donc surement pas besoin d'outils particuliers en dehors de l'outil de développement Firefox déjà utilisé ci-dessus.
Les fichiers composant le jeu sont :
- la page html
- game7egig.js
- un mystérieux fichier i33628.txt
- les images
Premier problème, le serpent bouge, même si on ne fait rien, on ne peut pas mettre en pause, et s'il en touche un autre ou touche le bord du plateau de jeu il meurt, et on retourne à l'écran de login, on n'est donc pas très serein pour une analyse statique !! La méthode bourrin consiste à démarrer le jeu puis couper le réseau (comment ? et bien le plus simple est de déconnecter le câble réseau), le jeu se bloque en attente de reconnexion, et on peut commencer notre analyse.
Je rappelle que je suis sous Firefox. Je lance la console de développement (via le menu ou par Ctrl + Maj + I).
Il y aurait beaucoup de choses à dire à la lecture de l'onglet inspecteur, mais allons au but, si on promène la souris sur la liste des éléments ils apparaissent en surbrillance dans le navigateur, on voie ainsi quels éléments correspondent au code HTML. Celui qui nous intéresse est l'élément Canvas qui occupe toute la fenêtre. Ouf c'est pas du flash. On peut en conclure que la technologie utilisée est du HTML5/Canvas 2D dont l'affichage est géré par du code Javascript, il faut donc aller voir du coté du JS qui a été téléchargé.
Retour à la console de développement de Firefox, onglet réseau, on sélectionne uniquement le JS, et voici :
Si on enlève les scripts qui viennent de facebook, twitter et les scripts gérant la pub (outstream.js et client.js) il reste notre code JS : game7egig.js.
Ainsi se termine la première partie et la plus facile. En résumé on a une page html comportant des balises Canvas (il y en a plusieurs comme on le verra) et un script JS qui gère l'ensemble du jeu, aucune bibliothèque JS n'a été chargée. On n'aura donc surement pas besoin d'outils particuliers en dehors de l'outil de développement Firefox déjà utilisé ci-dessus.
Les fichiers composant le jeu sont :
- la page html
- game7egig.js
- un mystérieux fichier i33628.txt
- les images
Aucun commentaire :
Enregistrer un commentaire