CHARLES PROXY
Analyse HTTP et modification des requêtes

Arnaud Guéras (@arnaudgueras)
Front End Developer Senior chez Axa
CHARLES C’EST QUI ? C’EST QUOI ?
PROXY DE DEBUG HTTP
Navigateurs

Charles Proxy

Serveur
PROXY DE DEBUG HTTP
Serveur

Navigateurs
Charles Proxy

Proxy
Entreprise
CHARLES FAIT QUOI ?
•

Enregistrement de requêtes

•

Local Mapping

•

Analyse de requêtes

•

Remote Mapping

•

Limitat...
L’ANALYSE DE REQUETE
AFFICHE DES TABLEAUX SUR LES RESOURCES
CHARGÉES
AFFICHE DES GRAPHIQUES EN TIMELINE
EN FONCTION DU POIDS DES RESSOURCES
EN FONCTION DU TEMPS DE CHARGEMENT
EN FONCTION DES TYPES DES RESSOURCES
ON PEUT AUSSI ANALYSER UNE RESOURCE
SPECIFIQUE
ON PEUT AUSSI ANALYSER UNE RESOURCE
SPECIFIQUE
THROTTLING
LE THROTTLING PERMET…
• Limiter la bande passante afin de simuler une ligne ADSL, 56K
ou une connexion depuis un téléphone...
CHARLES PROXY THROTTLING
CHARGEMENT DE CANIUSE.COM
Simulation d’une ligne 64kb/s

Sans Throttling (4,95s)*

Avec Throttling (35,24s)

*Ma ligne ADS...
NO CACHING
NO CACHING
NO CACHING
NO CACHING
BLOCK COOKIES

*La recette est ici : http://goo.gl/lufbRv
BLOCK COOKIES
BLOCK COOKIES
Sans blocage

Avec blocage

BLOCK COOKIES
LOCAL MAPPING
• Fait un lien des ressources du serveur directement sur des fichiers locaux
REDIRECTION D’UN FICHIER
Redirection du fichier base.js du site viedemerde.fr
REDIRECTION D’UN FICHIER
Redirection du fichier base.js du site viedemerde.fr
REDIRECTION D’UN FICHIER
Le mapping est bien fait
REDIRECTION D’UN FICHIER
Avant (sans mapping du fichier base.js)

Après (avec mapping)
ON PEUT REDIRIGER DES DOSSIERS COMPLETS
ON PEUT REDIRIGER DES DOSSIERS COMPLETS
ON PEUT REDIRIGER DES DOSSIERS COMPLETS
REMOTE MAPPING
• Fait un lien des ressources du serveur vers un autre serveur

http://
REDIRECTION D’UN DOSSIER COMPLET
On peut rediriger vers un serveur distant ou un serveur local
REWRITE
AVEC REWRITE ON PEUT TOUT MODIFIER DANS
UNE REQUETE HTTP
•

Ajouter un header

•

Supprimer un header

•

Modifier un head...
REWRITE
REWRITE
REWRITE
REWRITE
REWRITE
REWRITE
RÉPÉTER ET MODIFIER UNE REQUETE
RÉPÉTER ET MODIFIER UNE REQUETE
• Repeat :
Répéter une requête une seule fois
• Repeat Advanced :
Répéter une requête N fo...
REPEAT ADVANCED
• Iteration :10 et Concurrency : 1
Répète la requête 10x mais attends que la requête
précédente soit finie...
REPEAT ADVANCED
• Iteration :10 et Concurrency : 2
Répète la requête 10x mais envoie 2 requêtes à
chaque fois, donc 5 paqu...
Charles proxy est payant
License
1-4 User Licenses
5+ User Licenses
10+ User Licenses
Site License
Multi-Site License

Pri...
Charles proxy
Charles proxy
Charles proxy
Charles proxy
Prochain SlideShare
Chargement dans…5
×

Charles proxy

2 205 vues

Publié le

Presentation of Charles Proxy @Webperf 07/11/2013

Publié dans : Technologie
0 commentaire
2 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
2 205
Sur SlideShare
0
Issues des intégrations
0
Intégrations
8
Actions
Partages
0
Téléchargements
35
Commentaires
0
J’aime
2
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Charles proxy

  1. 1. CHARLES PROXY Analyse HTTP et modification des requêtes Arnaud Guéras (@arnaudgueras) Front End Developer Senior chez Axa
  2. 2. CHARLES C’EST QUI ? C’EST QUOI ?
  3. 3. PROXY DE DEBUG HTTP Navigateurs Charles Proxy Serveur
  4. 4. PROXY DE DEBUG HTTP Serveur Navigateurs Charles Proxy Proxy Entreprise
  5. 5. CHARLES FAIT QUOI ? • Enregistrement de requêtes • Local Mapping • Analyse de requêtes • Remote Mapping • Limitation de bande passante (Throttling) • Réécriture automatique (rewrite) • Blacklist • DNS Spoofing • Mirroring • Répéter et modifier des requêtes • Validation de markup • … • Breakpoint • SSL Proxying • Reverse Proxy • Port Forwarding • Suppression de cache (No cache) • Bloquer les cookies
  6. 6. L’ANALYSE DE REQUETE
  7. 7. AFFICHE DES TABLEAUX SUR LES RESOURCES CHARGÉES
  8. 8. AFFICHE DES GRAPHIQUES EN TIMELINE
  9. 9. EN FONCTION DU POIDS DES RESSOURCES
  10. 10. EN FONCTION DU TEMPS DE CHARGEMENT
  11. 11. EN FONCTION DES TYPES DES RESSOURCES
  12. 12. ON PEUT AUSSI ANALYSER UNE RESOURCE SPECIFIQUE
  13. 13. ON PEUT AUSSI ANALYSER UNE RESOURCE SPECIFIQUE
  14. 14. THROTTLING
  15. 15. LE THROTTLING PERMET… • Limiter la bande passante afin de simuler une ligne ADSL, 56K ou une connexion depuis un téléphone mobile • De comprendre pourquoi en prod on a parfois des problèmes d’ordre de chargement dans la page alors qu’on ne l’a pas en local • De vérifier comportement du chargement de son site dans les mêmes conditions que sur une ligne Adsl standard ou autre type de connexion
  16. 16. CHARLES PROXY THROTTLING
  17. 17. CHARGEMENT DE CANIUSE.COM Simulation d’une ligne 64kb/s Sans Throttling (4,95s)* Avec Throttling (35,24s) *Ma ligne ADSL est pourrie THROTTLING
  18. 18. NO CACHING
  19. 19. NO CACHING
  20. 20. NO CACHING
  21. 21. NO CACHING
  22. 22. BLOCK COOKIES *La recette est ici : http://goo.gl/lufbRv
  23. 23. BLOCK COOKIES
  24. 24. BLOCK COOKIES
  25. 25. Sans blocage Avec blocage BLOCK COOKIES
  26. 26. LOCAL MAPPING • Fait un lien des ressources du serveur directement sur des fichiers locaux
  27. 27. REDIRECTION D’UN FICHIER Redirection du fichier base.js du site viedemerde.fr
  28. 28. REDIRECTION D’UN FICHIER Redirection du fichier base.js du site viedemerde.fr
  29. 29. REDIRECTION D’UN FICHIER Le mapping est bien fait
  30. 30. REDIRECTION D’UN FICHIER Avant (sans mapping du fichier base.js) Après (avec mapping)
  31. 31. ON PEUT REDIRIGER DES DOSSIERS COMPLETS
  32. 32. ON PEUT REDIRIGER DES DOSSIERS COMPLETS
  33. 33. ON PEUT REDIRIGER DES DOSSIERS COMPLETS
  34. 34. REMOTE MAPPING • Fait un lien des ressources du serveur vers un autre serveur http://
  35. 35. REDIRECTION D’UN DOSSIER COMPLET On peut rediriger vers un serveur distant ou un serveur local
  36. 36. REWRITE
  37. 37. AVEC REWRITE ON PEUT TOUT MODIFIER DANS UNE REQUETE HTTP • Ajouter un header • Supprimer un header • Modifier un header • Changer le host • Changer le path • Changer l’url de la requête (un peu comme le mapping) • Ajouter un query param • Supprimer un query param • Modifier un query param • Modifier le corps (body) de la requête • Modifier le corps de la réponse
  38. 38. REWRITE
  39. 39. REWRITE
  40. 40. REWRITE
  41. 41. REWRITE
  42. 42. REWRITE
  43. 43. REWRITE
  44. 44. RÉPÉTER ET MODIFIER UNE REQUETE
  45. 45. RÉPÉTER ET MODIFIER UNE REQUETE • Repeat : Répéter une requête une seule fois • Repeat Advanced : Répéter une requête N fois par paquet de X requêtes • Edit : Editer une requête avant de l’envoyer
  46. 46. REPEAT ADVANCED • Iteration :10 et Concurrency : 1 Répète la requête 10x mais attends que la requête précédente soit finie avant d’en envoyer une nouvelle
  47. 47. REPEAT ADVANCED • Iteration :10 et Concurrency : 2 Répète la requête 10x mais envoie 2 requêtes à chaque fois, donc 5 paquets de requêtes sont envoyés.
  48. 48. Charles proxy est payant License 1-4 User Licenses 5+ User Licenses 10+ User Licenses Site License Multi-Site License Pricing US$50 / license US$40 / license (20% discount) US$30 / license (40% discount) US$400 US$700 http://www.charlesproxy.com Arnaud Guéras (@arnaudgueras) arnaudgs@gmail.com

×