So spionieren Sie die HTTP-Anfragen und -Antworten Ihres Browsers aus

In diesem Artikel wirst du

• Erfahren Sie, wie Sie die HTTP-Anfragen und -Antworten Ihres Webbrowsers ausspionieren können
• Beginnen Sie zu verstehen, warum Ihr Browser HTTP-Anfrageheader sendet und warum Webserver HTTP-Antwortheader senden

Was du brauchen wirst

• Google Chrome für seine Entwicklertools
• Alternativ können Sie auch andere Browser verwenden, wenn Sie wissen, wie Sie deren eigene Entwicklungstools verwenden

HTTP ist überhaupt kein Geheimnis und es ist super einfach, Ihren Browser auszuspionieren

Kommt es Ihnen jemals wie kryptische Magie vor, was Ihr Browser und die Remote-Server gemeinsam tun? Damit Sie nicht denken, dass HTTP-Anfragen und -Antworten wie ein geheimer Handschlag sind, den nur Browser-Hersteller und Website-Betreiber kennen und sehen können: Sie sind nicht. Angenommen, Sie verwenden Google Chrome, gehen Sie wie folgt vor:

1. Öffnen Sie ein neues Fenster oder eine neue Registerkarte
2. Hit the F12 Taste, um die Google Chrome-Entwicklertools aufzurufen, und klicken Sie auf Network Tab
3. Laden Sie Google im neuen Fenster. Sie können den Kern der HTTP-Anfrage studieren, die zum Abrufen der Google.com-Startseite verwendet wird.

Beachten Sie die Anfragemethode und Header anfordern Abschnitt

Wie Sie sehen können, die Anfragemethode is BESTELLE, und darunter ist eine große Tüte davon Kopfzeilen anfordern. Lassen Sie uns zunächst nur die wichtigsten Überschriften hervorheben. HTTP-Anforderungsheader werden ins Spiel kommen, wenn wir beginnen zu untersuchen, wie Daten an gesendet werden Digital.ai Agility, früher VersionOne, REST API, da wir einige „benutzerdefinierte Header“ angeben müssen.

HTTP-Header stellen weitere Informationen bereit, die dem Server helfen, richtig zu reagieren

Ihr Browser sendet HTTP-Header als Teil der HTTP-Anfrage, um dem Server zusätzliche Informationen zu geben, die er zur Verarbeitung der Anfrage benötigt. Die praktischsten sind die nehmen sie es an. Header und die Plätzchen eins. Der Accept-Header teilt dem Server mit, in welchen Formaten der Browser die Antwort erhalten möchte, und das Cookie ist tatsächlich ein eindeutiger Wert, der mich identifiziert, den mein Browser zuvor von Google erhalten hat. Mein Browser sendet das Cookie bei späteren Anfragen an Google zurück, damit Google einzelne Anfragen mir zuordnen kann.

Scrollen Sie nun im Bereich nach unten, um das anzuzeigen Antwortheader Abschnitt

Ebenso hat die Antwort Header. Der Inhaltstyp Der Header ist hier am relevantesten, und das werden Sie bemerken text / html entspricht einem der Werte, die in der initiierenden HTTP-Anfrage enthalten waren nehmen sie es an. Header. Dies wird später wichtig sein, wenn wir JavaScript verwenden, um Anfragen für zu erstellen Digital.ai Agility REST-API

Klicken Sie auf die Antwort Tab

Erinnern Sie sich an die Aussage des Web-Erfinders Tim Berners/Lee im letzten Artikel über die HTTP-GET-Methode, als er sie zum ersten Mal entwarf? Er sagte:

Die Antwort vom Server war immer eine HTML-Seite.

Auch wenn oben in der Antwort steht , der größte Teil der Antwort enthält JavaScript-Code, und zwar wirklich bizarr aussehenden JavaScript-Code. Das nennt man minified JavaScript. Entwickler verkleinern das Skript, um die Größe einer Antwort zu verkleinern. Aber es macht es sicherlich schwieriger zu verstehen!

Sehen wir uns nun eine HTTP-POST-Anfrage an

Vorausgesetzt, Sie haben noch einen anderen Browser oder Tab geöffnet und die Entwicklertools zur Hand:

1. Navigieren Sie zu http://www.pastebin.com
2. Geben Sie etwas in das ein neue Paste Formular ausfüllen, nach unten scrollen und drücken abschicken

Höhepunkte der POST-Anfrage und -Antwort

Hier sind einige Highlights der Anfrage und Antwort, die Sie in Ihrem Entwicklertools-Fenster sehen können:

Header anfordern

Anforderungs-URL: http://pastebin.com/post.php Anforderungsmethode: POST

Nutzlast anfordern

Die in der Nutzlast enthaltenen Werte entsprechen HTML-Formularfeldwerten. Der Quellcode für das HTML-Formularelement sieht folgendermaßen aus:

Wenn Sie wie ich getippt haben Digital.ai Agility ist mein Lieblingstool für agiles Management! in die neue Paste Feld (benannt paste_code im HTML), dann sollte Ihre Nutzlast etwa so aussehen:

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

Digital.ai Agility ist mein Lieblingstool für agiles Management!

Antwortheader

Auch hier gilt, wie wir bei der GET-Antwort von Google.com gesehen haben, die Inhaltstyp Header ist text/xml, aber der neue Standorte Der Header gibt an, wohin der Browser automatisch navigieren soll, um das Antwortdokument abzurufen, denn wenn Sie sich die Registerkarte „Antwort“ ansehen, werden Sie feststellen, dass sie leer ist. Dies ist ein gutes Designmuster namens Post / Redirect / Get Muster, und wir werden in späteren Artikeln mehr darüber erfahren.