Hacker vos tests avec Charles Proxy

Hacker vos tests avec Charles Proxy

Aujourd’hui, parlons de la méthode Man in the Middle qui permet à quiconque de suivre le trafic envoyé et reçu par un smartphone ou un navigateur sur votre ordinateur. Parfois, vous ne pouvez pas mettre les données souhaitées dans votre application, mais si vous pouvez modifier le contenu reçu par un navigateur ou une application juste avant de l’envoyer au smartphone, vous disposez d’un moyen très pratique de tester des données à la demande.

C’est ce que je vais expliquer dans cet article avec un exemple pratique.

Je vais me concentrer sur les tests dans un navigateur de bureau, mais aussi avec les applications Android et iOS. Pour cela, je vais utiliser Charles Proxy. Plus tard, dans un autre article de blog, je parlerai peut-être de mitmproxy, qui est gratuit open source, mais un peu moins facile à utiliser. Je détaillerai donc comment utiliser Charles Proxy avec un MacBook, un navigateur de bureau et un iPhone dans cet article.


Proxy Man In The Middle

Qu’est-ce que Charles Proxy ?

Charles Proxy est un proxy interactif intermédiaire pour HTTP et HTTPS. Il permet à quiconque de visualiser l’ensemble du trafic HTTP et SSL/HTTPS entre l’un de ses ordinateurs et Internet. Cela inclut les demandes, les réponses et les en-têtes HTTP (qui contiennent les cookies et les informations de mise en cache). Il est également possible de modifier les demandes avant qu’elles ne soient envoyées au serveur, ou, et c’est ce que je décrirai ici, la réponse reçue, ce qui ouvre beaucoup d’opportunités.

Comment installer Charles?

Charles est disponible pour Windows, MacOS et Linux. Il suffit de télécharger celui dont vous avez besoin sur la page de téléchargement et de suivre les instructions.

Vous obtiendrez une version d’essai, car Charles n’est pas gratuit (contrairement à mitmproxy), mais le prix en vaut la peine. Je dois admettre que j’ai d’abord utilisé mitmproxy, mais Charles est beaucoup plus simple à utiliser et si vous avez vraiment besoin d’un proxy, vous ne regretterez pas cette dépense.

Comment capturer des flux…

…qui seront affichés dans un navigateur sur Desktop ?

Si nous voulons capturer des paquets depuis un navigateur, nous devons le configurer pour utiliser Charles. Il est configuré par défaut pour utiliser le port 8888, mais vous pouvez le modifier à votre guise en ouvrant les Paramètres du proxy.

Vous pouvez ouvrir Aide puis Adresse IP locale pour savoir quelle adresse IP doit être utilisée pour accéder au navigateur, mais la plupart du temps, vous le ferez probablement localement à l’aide de localhost (127.0.0.1).

Configurons notre navigateur. Accédez aux paramètres du proxy, puis ajoutez 127.0.0.1 comme adresse du proxy et 8888 comme port.

Vous allez maintenant capturer tous les paquets que vous demandez et les réponses, mais uniquement pour les serveurs http. Par exemple, si Charles capture la page https://www.lyontesting.fr, vous verrez cette réponse qui n’est pas lisible.

Faites un clic droit sur la demande et sélectionnez «Activer le proxy SSL».

Ensuite, actualisez la page dans le navigateur et vous verrez que le résultat n’est pas meilleur. C’est parce que la page www.lyontesting.fr est redirigée vers lyontesting.fr. Accédez à Paramètres de proxy/SSL et adaptez l’hôte d’emplacement afin de correspondre à tous les cas que vous souhaitez intercepter.

La chose amusante est que vous pouvez modifier la réponse qui sera envoyée au navigateur. Pour cela, ajoutez simplement des points d’arrêt.

Dans les paramètres Proxy/Breakpoint…, sélectionnez «Activer les points d’arrêt», ajoutez un point d’arrêt qui détecte la demande POST avec host=lyontesting.fr et sélectionnez Réponse.

Maintenant actualisez à nouveau la page, la réponse ne sera pas envoyée au navigateur et attend votre approbation.

Dans l’onglet «Modifier la réponse», vous pouvez modifier le code HTML. Ici, je remplace «Lyon Testing» par «World Testing». Et le résultat est affiché dans le navigateur.

Et maintenant, vous pensez probablement que cela aurait pu être fait simplement avec les outils de développement de votre navigateur, et vous avez raison. Mais ces étapes faciles étaient là pour vous montrer les bases de Charles proxy. Cette technique peut également être utilisée pour les applications mobiles et c’est ce que nous verrons maintenant.

…qui sera utilisé dans une application mobile ?

Charles Proxy est aujourd’hui aussi disponible comme application iOS. Avec celui-ci, vous pouvez spécifier les noms d’hôte à inclure ou à exclure dans l’enregistrement (par exemple, uniquement les demandes adressées au serveur de votre application). Pour installer des certificats, suivez les instructions.

L’application proxy Charles est une application relativement récente et il n’est pas possible de modifier les réponses reçues, un jour peut-être. Par conséquent, si vous souhaitez modifier les réponses, vous devez utiliser la version de bureau du proxy Charles. Heureusement, vous l’avez déjà installé auparavant. Sinon, mieux vaut tard que jamais.

Votre smartphone doit être sur le même réseau local (si vous utilisez le même réseau Wi-Fi, alors c’est déjà le cas) pour pouvoir capturer le trafic depuis le smartphone. Dans Charles, allez à Aide puis Adresses IP locales.

Vous trouverez l’adresse IP à utiliser comme proxy manuel dans les paramètres d’accès WiFi du smartphone. Ici, avec un iPhone, en utilisant le port par défaut 8888 utilisé par Charles.

C’est tout, les flux doivent être affichés dans votre proxy Charles. Vous devez également installer le certificat Charles sur le smartphone. La procédure est expliquée dans le menu Aide/Proxy SSL. Laissez-moi le copier/coller pour vous: « Configurez votre appareil pour utiliser Charles comme proxy HTTP sur 192.168.2.1:8888, puis recherchez chls.pro/ssl pour télécharger et installer le certificat. Notez que sous iOS 10 et versions ultérieures, vous devez ensuite accéder à Paramètres > Général > À propos de,> Paramètres de confiance du certificat et activer le certificat de confiance pour Charles. »

Tout comme au début de cet article, cliquez avec le bouton droit de la souris sur un flux, puis «Activer le proxy SSL» lorsque nécessaire.

Voilà! Vous savez maintenant comment afficher le trafic http/s. Que pourrions-nous faire avec ça ?

/ouFiltrer et modifier les requêtes et réponses

Lorsque vous testez, il n’est pas toujours facile d’afficher ce que vous voulez. En fonction de la testabilité de votre produit, il peut être difficile de vérifier tous les cas critiques si le back-end de production doit être utilisé sans pouvoir changer quoi que ce soit.

Avec un proxy, vous pouvez changer ce qui va être affiché.

Voyons quel type de données une application météo envoie; par exemple, celui que je peux utiliser presque tous les jours avant de sortir avec mon vélo: rainToday, en espérant que celui-ci n’utilise pas le certificate Spinning, sinon notre objectif sera plus difficile à atteindre.

Sélectionnez une ville où il pleut…

… Et voir ce qui est capturé par Charles. Les demandes à weatherpro.consumer.meteogroup.com devraient apparaître dans l’application, et je vous suggère d’ajouter un filtre afin de ne pas afficher les autres demandes.

Et lorsque vous sélectionnez une ville, vous verrez que 2 demandes ont été envoyées:

  • un GET /weatherpro/RainService.php?method=getRainChart&areaID=UWZFR4562
  • un GET /weatherpro/WeatherServiceFeed.php?format=xml&lid=1837351&mode=observation

Affichez la réponse du premier et vous verrez un json similaire à celui-ci:

{
"precAngle": 18,
"domainMax": 100,
"domainMin": 0,
"avg": [36, 36, 35, 35, 35, 35, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 35, 35, 35, 35, 35, 35, 35, 35, 35, 35, 35, 35, 35, 35, 35, 35, 35, 35, 35, 35, 35, 35, 35, 35, 35, 35, 35, 35, 35, 34, 34, 34, 34, 33, 33, 33, 33, 32, 32, 32, 31, 31, 31],
"min": [32, 32, 32, 32, 32, 32, 33, 34, 34, 35, 35, 35, 35, 35, 35, 35, 35, 35, 34, 34, 34, 34, 34, 34, 34, 34, 34, 35, 35, 35, 35, 35, 35, 34, 34, 34, 33, 32, 32, 31, 30, 29, 28, 27, 26, 25, 24, 23, 22, 22, 21, 20, 20, 20, 19, 19, 19, 19, 18, 18, 17],
"max": [37, 37, 37, 37, 37, 37, 37, 36, 36, 37, 37, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36],
"startMin": 0,
"endMin": -1,
"intensity": 0.3477275,
"uwzid": "UWZFR4364",
"winddir": "18",
"startdtg": "2019-02-03 21:00:00",
"creationdtg": "2019-02-03 21:05:59",
"interval": "60000"
}

Je suppose que la pluie a une valeur comprise entre 0 et 100, mais parce que l’avenir ne peut pas être sûr à 100%, rainRadar donne des valeurs approximatives pour chaque minute (intervalle: 60000, 60 valeurs pour avg, min et max).

Et si nous voulons tester des valeurs extrêmes telles que:

  • Avg: 50
  • Min: 0
  • Max: 100

Ou mieux, des valeurs invalides et voir comment l’application se comporte:

  • Avg: 0
  • Min: 100
  • Max: 0

Il me suffit de copier-coller les 3 lignes, avg, min, max dans un éditeur de texte, puis de remplacer les premières valeurs par 50, 0, 100 et les deuxièmes valeurs par 0, 100, 0 (répétées 3 fois pour être plus visibles dans l’application. Le résultat est:

"avg": [50, 50, 50, 0, 0, 0, 50, 50, 50, 36, 36, 36, 36, 36, 36, 36, 36, 36, 35, 35, 35, 35, 35, 35, 35, 35, 35, 35, 35, 35, 35, 35, 35, 35, 35, 35, 35, 35, 35, 35, 35, 35, 35, 35, 35, 35, 35, 34, 34, 34, 34, 33, 33, 33, 33, 32, 32, 32, 31, 31, 31],

"min": [0, 0, 0, 100, 100, 100, 0, 0, 0, 35, 35, 35, 35, 35, 35, 35, 35, 35, 34, 34, 34, 34, 34, 34, 34, 34, 34, 35, 35, 35, 35, 35, 35, 34, 34, 34, 33, 32, 32, 31, 30, 29, 28, 27, 26, 25, 24, 23, 22, 22, 21, 20, 20, 20, 19, 19, 19, 19, 18, 18, 17],

"max": [100, 100, 100, 0, 0, 0, 100, 100, 100, 37, 37, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36],

Mais nous devons intercepter le flux, ajouter un point d’arrêt détectant une demande GET avec le chemin suivant: /weatherpro/RainService.php* puis capturer la réponse.

Sélectionnez à nouveau la ville ou une autre et le point d’arrêt s’arrêtera sur le flux adéquat.

Pour modifier le flux, sélectionnez Modifier la réponse et Json Text.

Ensuite, remplacez les 3 lignes par les lignes susmentionnées, puis cliquez sur «Exécuter». Bon, vous n’êtes probablement pas assez rapide si vous lisez ceci en même temps. Entraînez-vous et vous serez assez rapide pour simuler l’application.

Les nouvelles valeurs seront interprétées par l’application, qui ne plante pas et n’affiche pas les valeurs en dehors de l’affichage, ce qui est un bon point.

Et vous, que pouvez-vous simuler sur l’application que vous testez ? Pouvez-vous la faire planter lors de l’affichage de données indésirables ?

Attention

Sous certaines conditions, vous pouvez avoir des difficultés à utiliser Charles Proxy (ou tout autre outil Man In The Middle) si l’application interdit les proxys réseau ou utilise le SSL pinning. Lisez par exemple cet article bien expliqué: How to make your iOS apps more secure with SSL pinning

Pour Android, à partir de Android 7 (SDK v24), le réseau SSL n’est visible que si vous ajoutez un morceau de code, mais c’est probablement une mauvaise idée d’activer le truc suivant dans toute version de production. Voir cet article très clair sur ce sujet: Enable Android Nougat ‘Charles’ing SSL network

Conclusion

Charles proxy est un outil très puissant. Vous pouvez modifier ce que vous voulez et tester une application ou un site Web, même lorsque certaines fonctionnalités ne sont pas encore disponibles, modifier les données reçues, modifier les demandes envoyées, etc.

J’espère que cet article vous a été utile. Merci de commenter ce que vous avez pu faire grâce à Charles Proxy, vos histoires m’intéressent beaucoup.

Bons tests

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.