Tutoriel sur les outils disponibles pour analyser un protocole basé sur HTTP

Auteur

Gauthier Perrineau

Le but de ce tutoriel est de présenter l'ensemble des outils qui vont permettre d'analyser ou même d'altérer le traffic http entre un navigateur client et un serveur web à des fins de débogage.

- Titre : Tutoriel sur les outils disponibles pour analyser un protocole basé sur HTTP

- Auteur : Gauthier Perrineau

- Parution : 7 septembre 2013

- Mise à jour : 22 septembre 2013

- Licence : Copyright ® 2013 Gauthier Perrineau. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- Introduction

- I. Les outils basés sur Mozilla Firefox et ses extensions.

- I.1. Présentation de Firefox version ESR

- I.2. Les outils intégrés aux Navigateurs

- I.2.a. Outils de développement de Chrome

- I.2.b. Outils de développement de Firefox

- I.3. Firebug

- I.4. HttpFox

- I.5. Tamper Data

- I.6. User Agent Switcher

- I.7. Foxy Proxy

- II. Logiciels complémentaires

- II.1. Wireshark

- II.2. TcpView

- III. Outils en ligne

- III.1. Proxys en ligne

- III.2. Encodage et désencodage d'urls

- Conclusion

- Remerciements

Introduction

La nature même de la navigation sur internet implique des échanges entre un client et un serveur, voire comme c'est de plus en plus le cas, entre deux serveurs. Ouvrir une nouvelle page, valider un formulaire, télécharger un fichier, enregistrer des préférence, charger la page au fur et à mesure qu'on la fait défiler par le biais de requêtes Ajax sont autant d'exemples tout simples qui nécessitent des échanges, et dans la perspectives des développeurs de sites internet, il va falloir être capable d'examiner tous ces échanges afin de détecter les éventuels problèmes. Nous allons donc présenter ici un ensemble d'outils permettant d'y parvenir.

Notre but premier est donc d'observer tous les échanges effectués entre votre navigateur et un serveur internet, qu'ils soient à votre initiative (clic sur un lien, téléchargement d'un fichier, utilisation d'un favori...) ou automatiques (tels les rechargements automatiques en ajax, ou les requêtes dérivées du chargement d'une page: chargement de l'ensemble de ses fichiers images, javascript, css, etc). Nous voulons notamment connaitre les headers envoyés pour chaque requête et en particulier les cookies.

Nous présenterons dans un premier temps l'ensemble des plugins Firefox qui permettent d'analyser les échanges HTTP, puis nous aborderons quelques logiciels qui permettent d'obtenir des informations complémentaires.

I - Les outils basés sur Mozilla Firefox et ses extensions.

I.1 - Présentation de Firefox version ESR

Mozilla Firefox ESR

(cliquez ici pour aggrandir l'image)

On ne présente plus Mozilla Firefox. Aux cotés d'Internet Explorer et de Chrome, il fait partie des trois navigateurs les plus utilisés sur PC. Il est particulièrement apprécié pour les vastes possibilités de customisation offertes par tous ses plugins, sur lesquelles nous allons d'ailleurs nous allons fortement nous appuyer au cours de ce tutoriel. Ce qui est moins connu, c'est que depuis que Mozilla a commencé à sortir une nouvelle version de Firefox environ toutes les six semaines, chaque nouvelle version entrainant l'arrêt du support de la version précédente, ils ont également mis en place à destination des entreprises et des universités une édition à longue durée de support, Mozilla Firefox ESR, qui reçoit des mise à jour de sécurité régulières, mais qui reste maintenue un peu plus d'un an.

Les avantages sont multiples, puisqu'il n'y a plus besoin de passer toutes les six semaines par un processus de mise à jour, qui va impliquer de mettre également à jour tous les plugins, en courant le risque que certains de ceux-ci ne supportent pas encore la dernière version de Firefox, ce qui conduirait à une dégradation de vos possibilités de test. En outre, si vous êtes plusieurs dans votre équipe à mener conjointement des tests similaires il vous sera beaucoup plus aisé d'être certain d'avoir des conditions de test comparables.

Calendrier des sorties (extrait de la FAQ officielle)

(cliquez ici pour aggrandir l'image)

Il y a aussi des inconvénients, le plus évident de ceux-ci est que votre version de Firefox ne sera plus la même que celle utilisée par les clients qui eux pour la plupart utiliseront la toute dernière. Dans le cadre de notre problématique d'examen et de test des échanges http entre le navigateur client et le serveur Web, cet inconvénient a peu d'impact, en effet le support du protocole HTTP n'est pas voué à évoluer avec les différente versions des navigateurs. Par contre si vous effectuez également des tests de rendu, vous apprécierez certainement de pouvoir les faire avec la dernière version, auquel cas je vous conseille tout simplement d'installer pluieurs versions de Firefox en parallèle et d'utiliser le gestionnaire de profils pour choisir la ou les versions que vous souhaitez utiliser.

Dans le cadre de ce tutoriel, c'est la version ESR-17.0.x qui a été utilisée, et qui existe aussi en version portable, ce qui vous permettra de l'installer même si vous n'êtes pas administrateur de votre ordinateur, ce qui est souvent le cas dans les entreprises.

I.2 - Les outils intégrés aux Navigateurs

Chrome et Firefox possèdent nativement un outil de débogage pour développeurs Web qui leur est intégré, et dont les fonctionnalités rappellent celles de l'extension Firebug que nous évoquerons plus loin. Nous ne nous attarderons pas dessus dans le cadre de ce tutoriel, car ils sont davantage destinés aux développeurs qui veulent optimiser le rendu des pages et déboguer le javascript alors que nous nous intéressons surtout aux échanges avec le serveur. Il était néanmoins bon de les mentionner, dans certains cas (vous êtes en déplacement chez le client, vous testez sur son ordinateur), ils peuvent fournir un début de piste.

Dans Firefox comme dans Chrome, vous pouvez accéder facilement aux outils de débogage via le raccourci F12.

I.2.a - Outils de développement de Chrome

Chargement d'une page dans Chrome

(cliquez ici pour aggrandir l'image)

Chrome a été pionnier dans la mise en disposition des développeurs d'un outil de débogage intégré, Firefox ne l'a imité qu'assez récemment. Comme vous pouvez le voir, on peut notamment observer l'ensemble des requêtes exécutées au chargement d'une page et les cookies envoyés. L'outil proposé par Chrome est très sympathique pour déboguer une page web, mais lorsqu'on souhaite l'utiliser exclusivement pour analyser le traffic http, il n'est pas très pratique. Pensez à cliquer sur l'icône en forme de disque plein en bas à gauche pour que l'historique des requêtes soit conservé lorsque vous naviguez d'une page à l'autre.

I.2.b - Outils de développement de Firefox

Visualisation des trames HTTP dans Firefox

(cliquez ici pour aggrandir l'image)

Déjà un peu plus pratique, l'outil intégré à Firefox fait énormément penser à Firebug et HttpFox dont nous reparlerons très prochainement. Il est suffisant pour observer facilement l'ensemble des requêtes envoyées au cours de la navigation. Il n'est à notre connaissance pas très utilisé d'une part à cause de sa relative jeunesse, et d'autre part parce que d'autres extensions Firefox plus spécialisées dans chaque domaine permettent d'avoir davantage d'informations de façon plus ergonomique. Cependant l'essentiel est là.

I.3 - Firebug

Firebug

(cliquez ici pour aggrandir l'image)

Firebug est la Rolls des outils de débogage des pages web, bien connue des développeurs Javascript et CSS. Il existe de nombreux plugins qui permettent de le spécialiser sur un type de débogage donné. Dans notre cas il peut aussi s'avérer utile pour analyser les trames http. Pensez à cliquer le bouton "persisant" pour conserver l'historique des appels en passant d'une page à l'autre.

I.4 - HttpFox

HttpFox

(cliquez ici pour aggrandir l'image)

HttpFox est le plugin que nous vous recommandons pour effectuer vos débogages. Comparativement aux autres plugins, il apporte une interface peu chargée qui se concentre sur l'essentiel, mais qui le fait bien. On appréciera la coloration des requêtes en fonction de leur type, qui permet de trouver rapidement les requêtes qui nous intéressent et en particulier les redirections. Son point faible est qu'il capture absolument tout ce qui passe sur votre navigateur: si vous avez un onglet qui se rafraichit automatiquement à intervalles réguliers, vous verrez passer les trames. Cela dit dans certains cas de figure cette particularité est une grande force, car il est l'un des rares plugins à le permettre.

L'export des trames observées vers un tableur peut se faire assez facilement via un clic droit, ce qui peut constituer une solution de dépannage lorsque l'on veut aider un interlocuteur distant à analyser ce qui se passe dans son navigateur.

I.5 - Tamper Data

Tamper Data

(cliquez ici pour aggrandir l'image)

Tamper Data permet également d'observer l'ensemble des trames http émises par le navigateur, mais ce n'est pas son principal intérêt. Ce qui fait son point fort, c'est qu'il est possible d'intercepter et de modifier les requêtes. Exemple, vous remplissez un formulaire, vous cliquez sur le bouton de validation, et là au lieu que la requête soit directement envoyée, elle va être interceptée via Tamper Data, où vous pourrez l'examiner et la modifier.

C'est particulièrement utile lorsque vous déboguez un protocole basé sur des cookies et que vous souhaitez tester des cas de figures non directement reproductibles de manière classique: au moment d'envoyer une requête vers votre serveur, altérez là, ajoutez ou supprimez les cookies requis par le protocole dans le cas que vous souhaitez reproduire, puis laissez la continuer sa route vers le serveur. Par exemple sur la capture d'écran nous avons ajouté pour l'exemple le cookie Toto.

Dans le même ordre d'idée, vous pouvez également modifier les headers de la requête, c'est particulièrement utile lorsque dans votre environnement de prod il y a des équipement réseau qui enrichissent les headers, et que vous souhaitez reproduire ce comportement dans votre environnement de développement.

L'auteur de Tamper Data ne fournit pas d'icône permettant son intégration facile dans la navigateur, mais vous pouvez y accéder via le menu ou installer l'extension complémentaire Tamper Data Icon Redux qui remplit ce role. Attention l'icone ne sera pas ajoutée automatiquement dans vos barres d'outil, c'est à vous qu'il revient de faire un clic droit sur une barre d'outil, de choisir "¨Personnaliser..." et de glisser-déposer à partir de la fenêtre qui s'affiche les boutons correspondant à vos extensions vers vos barres d'outils (vous pouvez aussi en profiter pour faire le ménage).

I.6 - User Agent Switcher

User Agent Switcher

(cliquez ici pour aggrandir l'image)

Si vous désirez que votre serveur internet adopte un comportement différent en fonction du navigateur qui s'y connecte, vous aurez besoin de User Agent Switcher. Cette extension qui malheureusement ne fonctionne pas sur les versions 17 à 22 de Firefox à cause d'un bogue est très pratique car elle permet de faire passer Firefox pour un autre navigateur, afin d'observer le changement de comportement du serveur. Il n'y a pas beaucoup de types de navigateurs intégrés de base dans l'extension, mais il est possible d'en ajouter facilement par import depuis un fichier XML.

I.7 - Foxy Proxy

Foxy Proxy

(cliquez ici pour aggrandir l'image)

Foxy Proxy n'est pas une extension directement liée au débogage, mais nous avons jugé bon de la mentionner tout de même, car elle s'avère extrêmement pratique lorsque le débogage est effectué sur divers environnements, par exemple en prod, pré-prod et développement. Très facile à configurer, elle vous permettra de basculer de l'un à l'autre en un clic.

II - Logiciels complémentaires

II.1 - Wireshark

Wireshark

(cliquez ici pour aggrandir l'image)

Wireshark est un logiciel multi-plateforme qui permet de visualiser au plus bas niveau l'ensemble des requêtes qui transitent sur le réseau. Très complet, il est également très complexe, en particulier pour un novice en protocoles réseau. Pourtant, dans le cadre de protocoles ne s'appuyant pas que sur le http, ou lorsque vous avez besoin de savoir quelles sont les données qui transitent vraiment sur le réseau, il fait partie des outils incontournables. Ceux qui effectuent leur débogage client-serveur sur le même ordinateur apprécieront aussi de savoir comment Capturer le localhost dans WireShark.

II.2 - TcpView

TcpView

TcpView est un logiciel Windows qui permet de visualiser aisément l'ensemble des connexions TCP actives sur votre ordinateur.

Si vous travaillez sous Linux, il existe de nombreuses alternatives en ligne de commande comme par exemple nmap.

III - Outils en ligne

III.1 - Proxys en ligne

Affichage de developpez.com via un proxy

(cliquez ici pour aggrandir l'image)

Dans de rares cas, lorsque ce que vous voyez depuis votre réseau d'entreprise est différent des captures d'écran de l'un de vos interlocuteurs, il peut être utile de passer par un proxy gratuit pour visualiser la page internet dans les mêmes conditions que lui. Vous trouverez aisément des proxies en cherchant sur le net. La plupart sont assez limités en fonctionnalités, mais le résultat peut suffir pour vous permettre de controler par exemple que tous les fichiers javascript se sont chargés correctement.

III.2 - Encodage et désencodage d'urls

(cliquez ici pour aggrandir l'image)

Dans la catégorie lien utile à avoir sous la main, celui-ci vous permettra d'encoder et de désencoder rapidement des urls, ce qui est particulièrement utile dans le cas de protocoles qui passent une url de redirection en paramètre GET.

Conclusion

Ce rapide tour d'horizon a montré qu'il y a pléthore d'outils permettant d'analyser et de déboguer un protocole basé sur HTTP. Dans le cas idéal, l'extension HttpFox de Firefox constitue l'outil le plus agréable, mais il existe de nombreuses alternatives, y compris au niveau des outils intégrés de base dans les navigateurs.

Remerciements

Au moment de publier enfin cet article, je voudrais remercier XXX et keulkeul pour leur relecture technique et leurs conseils, xxxxx pour sa relecture orthographique, et djibril pour son aide dans l'utilisation des outils de rédaction.

Retour à l'article

Retour à l'article

Retour à l'article

Retour à l'article

Retour à l'article

Retour à l'article

Retour à l'article

Retour à l'article

Retour à l'article

Retour à l'article

Retour à l'article

Retour à l'article