Cómo espiar las solicitudes y respuestas HTTP de su navegador

En este artículo,

• Aprenda a espiar las solicitudes y respuestas HTTP de su navegador web
• Comience a comprender por qué su navegador envía encabezados de solicitud HTTP y por qué los servidores web envían encabezados de respuesta HTTP

Lo que necesitarás

• Google Chrome por sus herramientas para desarrolladores
• Alternativamente, puede usar otros navegadores si puede descubrir cómo usar sus propias herramientas de desarrollo.

HTTP no es ningún secreto y es muy fácil espiar tu navegador

¿Alguna vez parece magia críptica lo que su navegador y servidores remotos hacen juntos? Para que no piense que las solicitudes y respuestas HTTP son como un apretón de manos secreto que solo los fabricantes de navegadores y los operadores de sitios web conocen y pueden ver: Ellos no están. Suponiendo que está utilizando Google Chrome, haga esto:

1. Abrir una nueva ventana o pestaña
2. Golpea la F12 para abrir las herramientas de desarrollo de Google Chrome y haga clic en el Network de la pestaña.
3. Carga Google en la nueva ventana. Puede estudiar las agallas de la solicitud HTTP utilizada para OBTENER la página de inicio de Google.com.

Note la método de solicitud y solicitar encabezados .

Como se puede ver, el método de solicitud is  , y debajo hay una gran bolsa de Solicitar encabezados. Resaltemos solo los encabezados principales por ahora. Los encabezados de solicitud HTTP entrarán en juego cuando comencemos a estudiar cómo enviar datos al Digital.ai Agility, anteriormente VersionOne, REST API porque necesitaremos especificar algunos "encabezados personalizados".

Los encabezados HTTP brindan más información para ayudar al servidor a responder correctamente

Su navegador envía encabezados HTTP como parte de la solicitud HTTP para brindarle al servidor información adicional que necesita saber para procesar la solicitud. Los más relevantes, en términos prácticos, son los aceptar encabezado y el galleta uno. El encabezado de aceptación le dice al servidor en qué tipo de formatos el navegador quiere obtener la respuesta, y la cookie es en realidad un valor único que me identifica que mi navegador obtuvo previamente de Google. Mi navegador envía la cookie a Google en solicitudes posteriores para que Google pueda correlacionar solicitudes separadas conmigo.

Ahora, desplace el panel hacia abajo para ver el encabezados de respuesta .

Similar, la respuesta tiene encabezados. El tipo de contenido El encabezado es el más relevante aquí, y notará que text / html corresponde a uno de los valores que contenía la solicitud HTTP de inicio aceptar encabezamiento. Esto será importante más adelante cuando usemos JavaScript para crear solicitudes para el Digital.ai Agility API REST.

Haga clic en el respuesta de la pestaña.

¿Recuerdas en el último artículo la declaración del inventor de la web Tim Berners/Lee sobre el método HTTP GET cuando lo diseñó por primera vez? Él dijo:

La respuesta del servidor siempre fue una página HTML.

Aunque la parte superior de la respuesta dice , la mayor parte de la respuesta contiene código JavaScript, y un código JavaScript realmente extraño. Se llama miniaturizada JavaScript. Los desarrolladores minifican el script para reducir el tamaño de una respuesta. ¡Pero ciertamente hace que sea más difícil de entender!

Ahora, examinemos una solicitud HTTP POST

Suponiendo que todavía tiene otro navegador o pestaña abierta y las herramientas de desarrollo a mano:

1. Vaya a http://www.pastebin.com
2. Introduce algo en el pasta nueva formulario, desplácese hacia abajo y pulse enviar

Aspectos destacados de la solicitud POST y la respuesta

Estos son algunos aspectos destacados de la solicitud y la respuesta que puede ver en la ventana de herramientas para desarrolladores:

Solicitar encabezados

URL de solicitud: http://pastebin.com/post.php Método de solicitud: POST

Solicitar carga útil

Los valores contenidos en la carga útil corresponden a los valores de campo de formulario HTML. El código fuente para el elemento de formulario HTML se ve así:

Si, como yo, escribiste Digital.ai Agility es mi herramienta de gestión ágil favorita. en el pasta nueva campo (llamado pegar_código en el HTML), entonces su carga útil debería verse similar a esto:

//////WebKitFormBoundaryM0FtBA3eFtIeoTma Contenido/Disposición: formulario/datos; name="post_key" KgvURkjA //////WebKitFormBoundaryM0FtBA3eFtIeoTma Contenido/Disposición: formulario/datos; name="submit_hidden" submit_hidden //////WebKitFormBoundaryM0FtBA3eFtIeoTma Contenido/Disposición: formulario/datos; nombre="paste_code"

Digital.ai Agility es mi herramienta de gestión ágil favorita.

Encabezados de respuesta

Nuevamente, como vimos para la respuesta GET de Google.com, el tipo de contenido encabezado es texto/xml, pero el nuevo Ubicación El encabezado especifica a dónde debe navegar automáticamente el navegador para OBTENER el documento de respuesta, ya que si observa la pestaña de respuesta, verá que está vacía. Este es un buen patrón de diseño llamado Publicar / Redirigir / Obtener patrón, y aprenderemos más sobre él en artículos posteriores.