Comment espionner les requêtes et réponses HTTP de votre navigateur

Dans cet article, vous allez

• Apprenez à espionner les requêtes et réponses HTTP de votre navigateur Web.
• Commencez à comprendre pourquoi votre navigateur envoie des en-têtes de requête HTTP et pourquoi les serveurs Web envoient des en-têtes de réponse HTTP.

Ce dont vous aurez besoin

• Google Chrome pour ses outils de développement
• Vous pouvez également utiliser d'autres navigateurs si vous parvenez à maîtriser leurs outils de développement.

Le protocole HTTP n'a rien de secret et il est très facile d'espionner votre navigateur.

Avez-vous parfois l'impression que ce que votre navigateur et les serveurs distants font ensemble relève de la magie noire ? Imaginez que les requêtes et réponses HTTP ne soient qu'une sorte de poignée de main secrète connue et visible uniquement des fabricants de navigateurs et des opérateurs de sites web : ils ne sont pas. Si vous utilisez Google Chrome, procédez comme suit :

1. Ouvrir une nouvelle fenêtre ou un nouvel onglet
2. Frappe le F12 touche pour ouvrir les outils de développement Google Chrome, puis cliquez sur Network languette
3. Ouvrez Google dans une nouvelle fenêtre. Vous pourrez ainsi analyser le contenu de la requête HTTP utilisée pour accéder à la page d'accueil de Google.com.

Notez le méthode de requête et demander des en-têtes 

Comme vous pouvez le voir, la méthode de requête is ÉCONOMISEZet en dessous se trouve un grand sac de En-têtes de requête. Pour l'instant, concentrons-nous sur les en-têtes principaux. Les en-têtes de requêtes HTTP entreront en jeu lorsque nous étudierons comment envoyer des données. Digital.ai Agility, anciennement VersionOne, API REST car nous devrons spécifier quelques « en-têtes personnalisés ».

Les en-têtes HTTP fournissent des informations supplémentaires pour aider le serveur à répondre correctement.

Votre navigateur envoie des en-têtes HTTP dans le cadre de la requête HTTP afin de fournir au serveur les informations supplémentaires nécessaires au traitement de cette requête. Les plus pertinents, en pratique, sont les suivants : accepter en-tête et l'en-tête gâteau Premièrement, l'en-tête Accept indique au serveur le format de réponse souhaité par le navigateur. Le cookie, quant à lui, est une valeur unique qui m'identifie et que mon navigateur a préalablement obtenue de Google. Lors des requêtes suivantes, mon navigateur renvoie ce cookie à Google afin que ce dernier puisse associer chaque requête à mon compte.

Maintenant, faites défiler le volet vers le bas pour voir le en-têtes de réponse 

De même, la réponse comporte des en-têtes. contenu/type L'en-tête est l'élément le plus pertinent ici, et vous remarquerez que text / html correspond à l'une des valeurs que contenait la requête HTTP initiale accepter en-tête. Cela sera important plus tard lorsque nous utiliserons JavaScript pour créer des requêtes pour le Digital.ai Agility API REST.

Cliquez sur à un besoin identifié languette

Vous souvenez-vous, dans le dernier article, de la déclaration de Tim Berners-Lee, l'inventeur du Web, concernant la méthode HTTP GET lors de sa conception initiale ? Il a dit :

La réponse du serveur était toujours une page HTML.

Même si le haut de la réponse dit La majeure partie de la réponse contient du code JavaScript, et même un code JavaScript d'apparence vraiment bizarre. C'est ce qu'on appelle minifié JavaScript. Les développeurs minifient les scripts pour réduire la taille des réponses. Mais cela les rend assurément plus difficiles à comprendre !

Examinons maintenant une requête HTTP POST

En supposant que vous ayez encore un autre navigateur ou onglet ouvert et les outils de développement à portée de main :

1. Rendez-vous sur http://www.pastebin.com
2. Saisissez quelque chose dans le nouveau collage formulaire, faites défiler vers le bas et appuyez sur de soumettre

Points saillants des requêtes et réponses POST

Voici quelques points saillants de la requête et de la réponse que vous pouvez voir dans votre fenêtre d'outils de développement :

En-têtes de demande

URL de la requête : http://pastebin.com/post.php Méthode de la requête : POST

Requête de charge utile

Les valeurs contenues dans la charge utile correspondent aux valeurs des champs d'un formulaire HTML. Le code source de l'élément de formulaire HTML ressemble à ceci :

Si, comme moi, vous avez tapé Digital.ai Agility c'est mon outil de gestion agile préféré ! into the nouveau collage champ (nommé coller_code (dans le code HTML), alors votre charge utile devrait ressembler à ceci :

//////WebKitFormBoundaryM0FtBA3eFtIeoTma Content/Disposition: form/data; name="post_key" KgvURkjA //////WebKitFormBoundaryM0FtBA3eFtIeoTma Content/Disposition: form/data; name="submit_hidden" submit_hidden //////WebKitFormBoundaryM0FtBA3eFtIeoTma Content/Disposition: form/data; name="paste_code"

Digital.ai Agility c'est mon outil de gestion agile préféré !

En-têtes de réponse

Là encore, comme nous l'avons vu pour la réponse GET de Google.com, le contenu/type L'en-tête est au format text/xml, mais le nouveau Localisation L'en-tête spécifie l'emplacement où le navigateur doit automatiquement naviguer pour récupérer le document de réponse, car l'onglet de réponse est vide. Il s'agit d'un bon modèle de conception appelé Publier/Rediriger/Obtenir ce modèle, et nous en apprendrons davantage à ce sujet dans des articles ultérieurs.