Interceptar y modificar solicitudes de red en Puppeteer: una guía práctica

Interceptar y modificar solicitudes de red en Titiritero Es una forma eficaz de gestionar tareas de automatización web. Permite supervisar, bloquear o ajustar solicitudes y respuestas HTTP en tiempo real. Esto es lo que puede hacer:

• Monitorear la actividad de la red:Registra detalles como URL, métodos, encabezados y cargas útiles.
• Modificar solicitudes:Cambie los encabezados, redirija las URL o ajuste las cargas útiles para probar y depurar la API.
• Recursos del bloque:Evita la carga de imágenes, fuentes o scripts para mejorar el rendimiento.
• Simular respuestas:Simula respuestas del servidor para probar o modifica el contenido dinámicamente.
• Escenarios de error de prueba: Simule códigos de estado HTTP como 404 o 500 para probar el manejo de errores.

Ejemplo rápido

await page.setRequestInterception(true);
page.on('request', async (request) => {
    if (request.url().includes('/api/test')) {
        await request.respond({
            status: 200,
            contentType: 'application/json',
            body: JSON.stringify({ success: true })
        });
    } else {
        await request.continue();
    }
});

Esta guía explica cómo utilizar la API de Puppeteer para la intercepción de solicitudes, incluidos ejemplos prácticos para monitorear, modificar y probar interacciones de red.

Titiritero Tutorial n.° 12 | Interceptores HTTP | Interceptar solicitudes

Monitoreo de solicitudes de red

Puppeteer permite monitorizar las solicitudes de red, lo que proporciona una visión clara del tráfico web durante las tareas de automatización. Así es como puedes monitorizar y analizar eficazmente la actividad de la red.

Configuración de oyentes de solicitudes

Comience por habilitar la interceptación de solicitudes y adjuntar un receptor. A continuación, un ejemplo:

await page.setRequestInterception(true);
page.on('request', async (request) => {
    if (request.isInterceptResolutionHandled()) return;
    console.log(`Intercepted: ${request.url()}`);
    await request.continue();
});

Dentro del 'request' Escucha de eventos, puedes acceder e incluso modificar las solicitudes interceptadas. Solo asegúrate de llamar request.continue() para que la solicitud original no quede bloqueada.

Filtrar solicitudes por tipo

Puppeteer te permite filtrar las solicitudes de red según su tipo, lo que facilita enfocarte en tráfico específico. Así es como puedes gestionar las solicitudes de forma selectiva:

page.on('request', interceptedRequest => {
    if (interceptedRequest.isInterceptResolutionHandled()) return;
    const resourceType = interceptedRequest.resourceType();
    switch(resourceType) {
        case 'image':
            // Handle image requests
            break;
        case 'xhr':
            // Handle API calls
            break;
        default:
            interceptedRequest.continue();
    }
});

Al categorizar y priorizar los tipos de recursos, puede optimizar sus esfuerzos de monitoreo de red y enfocarse en lo que más importa.

Solicitud de registro de datos

Una vez filtradas las solicitudes, registrar sus detalles clave puede ayudarle a descubrir patrones útiles. A continuación, se presenta un breve resumen de algunas propiedades importantes de las solicitudes:

Por ejemplo, si desea supervisar las solicitudes de API para obtener datos de precios:

page.on('request', async (request) => {
    if (request.url().includes('/api/prices')) {
        const requestData = {
            url: request.url(),
            method: request.method(),
            postData: request.postData()
        };
        console.log('Price Request:', requestData);
    }
    await request.continue();
});

Este método le permite analizar el tráfico en detalle. Siempre verifique request.isInterceptResolutionHandled() para evitar conflictos con otros controladores.

Cambiar las solicitudes salientes

Con Puppeteer, puedes ajustar las solicitudes salientes para que se adapten mejor a tus necesidades al interactuar con servidores web.

Modificaciones del encabezado

Puede ajustar los encabezados HTTP para incluir tokens, cambiar agentes de usuario o agregar valores personalizados.

await page.setExtraHTTPHeaders({
    'Authorization': 'Bearer YOUR_TOKEN',
    'Custom-Header': 'CustomValue'
});

Para un control más granular sobre solicitudes individuales:

page.on('request', async (request) => {
    if (request.isInterceptResolutionHandled()) return;
    const headers = request.headers();
    headers['Authorization'] = 'Bearer YOUR_TOKEN';
    await request.continue({ headers });
});

La interceptación de solicitudes facilita la modificación de las propiedades de las solicitudes salientes, como la configuración de encabezados personalizados, la modificación de los métodos de solicitud o el ajuste de la carga útil de la solicitud. - Saairaamprasad

A continuación, veamos cómo redirigir solicitudes redirigiendo URL.

Redirecciones de URL

Redirigir solicitudes específicas utilizando el siguiente enfoque:

await page.setRequestInterception(true);
page.on('request', async (request) => {
    if (request.url().includes('/api/original')) {
        await request.continue({
            url: request.url().replace('/api/original', '/api/new')
        });
    } else {
        await request.continue();
    }
});

Este método le ayuda a cambiar los puntos finales de la API o redirigir solicitudes de forma dinámica.

Solicitar cambios de datos

También puedes modificar las cargas útiles de las solicitudes POST y PUT. Aquí te explicamos cómo:

page.on('request', async (request) => {
    if (request.isInterceptResolutionHandled()) return;

    if (request.url().includes('/api/prices') && request.method() === 'POST') {
        let postData = request.postData();
        if (postData) {
            postData = postData.replace(/11001/g, '90210');
            await request.continue({ postData });
            return;
        }
    }
    await request.continue();
});

A continuación se muestra una referencia rápida para modificar diferentes propiedades de solicitud:

Nota: Los cambios en las solicitudes pueden afectar el rendimiento, por lo que es mejor interceptarlas solo cuando sea necesario. Estos métodos le brindan un control preciso sobre las solicitudes salientes en sus flujos de trabajo de automatización.

Administrar las respuestas del servidor

Puppeteer permite gestionar y modificar las respuestas del servidor, lo que lo convierte en una potente herramienta para la automatización web. Esta sección se basa en técnicas anteriores de modificación de solicitudes y se centra en el control de las respuestas del servidor para brindarle control total sobre las interacciones de red.

Monitoreo de respuesta

Puede realizar un seguimiento de las respuestas entrantes del servidor configurando un detector de eventos de respuesta:

page.on('response', async (response) => {
    const url = response.url();
    const status = response.status();
    console.log(`Response from ${url}: ${status}`);

    if (response.url().includes('/api/prices')) {
        const data = await response.json();
        // Process response data
    }
});

Este fragmento registra detalles como la URL, los códigos de estado y los encabezados, lo que le ayuda a analizar el comportamiento del servidor. Además de la monitorización, puede modificar dinámicamente el contenido de la respuesta para adaptarlo a sus necesidades.

Modificar el contenido de la respuesta

Para personalizar la gestión de las respuestas, utilice la intercepción. A continuación, un ejemplo:

page.on('request', async (request) => {
    if (request.url().includes('/api/prices')) {
        await request.respond({
            status: 200,
            contentType: 'application/json',
            body: JSON.stringify({
                price: 99.99,
                currency: 'USD',
                zipCode: '90210'
            })
        });
        return;
    }
    await request.continue();
});

Esta técnica es particularmente útil para probar API simulando respuestas o modificando datos en escenarios específicos.

Prueba de códigos de estado HTTP

Una vez que domines la modificación de contenido, puedes simular varios códigos de estado HTTP para probar la gestión de errores. Aquí te explicamos cómo:

Por ejemplo:

page.on('request', async (request) => {
    if (request.url().includes('/api/test-endpoint')) {
        await request.respond({
            status: 404,
            contentType: 'text/plain',
            body: 'Not Found!'
        });
        return;
    }
    await request.continue();
});

La intercepción de solicitudes en Puppeteer permite observar, modificar o bloquear las solicitudes HTTP salientes y las respuestas entrantes. Esta función es útil para optimizar la carga de páginas, simular diversas condiciones de red o gestionar la carga dinámica de contenido. – Saairaamprasad

Pro TipAunque interceptar respuestas puede ser eficaz, úselo con moderación. Usarlo en exceso podría ralentizar sus scripts de automatización o añadir complejidad innecesaria.

sbb-itb-23997f1

Directrices para la interceptación de solicitudes

La interceptación de solicitudes es una herramienta potente, pero requiere un uso cuidadoso para garantizar un rendimiento fluido y mantener la fiabilidad. A continuación, se presentan pasos prácticos para gestionar sesiones, mejorar la velocidad y resolver problemas comunes.

Administrar sesiones de usuario

A continuación te mostramos cómo puedes gestionar sesiones de usuario de manera efectiva:

await page.setRequestInterception(true);
page.on('request', async (request) => {
    if (!request.isInterceptResolutionHandled()) {
        const headers = request.headers();
        headers['Authorization'] = 'Bearer ' + yourAuthToken;
        await request.continue({ headers });
    }
});

Verifique siempre el estado de intercepción antes de modificar los encabezados para evitar conflictos con otros interceptores.

Optimización de velocidad

Bloquear recursos innecesarios puede reducir significativamente los tiempos de carga de las páginas, a veces hasta en 500 milisegundos. Aquí tienes un ejemplo:

await page.route('**/*', (route) => {
    const resourceType = route.request().resourceType();
    if (['image', 'stylesheet', 'font'].includes(resourceType)) {
        route.abort();
        return;
    }
    route.continue();
});

Cuando surgen problemas de rendimiento, estas estrategias de gestión de recursos pueden ayudar.

Consejos para solucionar problemas

El manejo inadecuado es una fuente frecuente de problemas. Aquí tienes algunas soluciones prácticas:

"Una vez habilitada la interceptación de solicitudes, todas ellas se detendrán a menos que se continúen, se respondan o se cancelen".

• Antoine Vastel, Jefe de Investigación en Castillo

1. Manejo de la resolución: Utiliza isInterceptResolutionHandled controles para evitar condiciones de carrera.
2. Múltiples controladores:Asignar prioridades al utilizar múltiples controladores de intercepción:

await request.continue({
    priority: 1,
    headers: modifiedHeaders
});

3. Solicitudes estancadas:Asegúrese de que todas las solicitudes se resuelvan correctamente:

page.on('request', async (request) => {
    try {
        if (!request.isInterceptResolutionHandled()) {
            await request.continue();
        }
    } catch (error) {
        console.error('Request handling error:', error);
        await request.abort();
    }
});

Mantenga la lógica de intercepción simple. Las reglas demasiado complejas pueden ralentizar el proceso y dificultar el mantenimiento del código.

Puntos clave

La intercepción de solicitudes de Puppeteer proporciona a los desarrolladores herramientas potentes para refinar las tareas de automatización web. Estas herramientas permiten:

• Solicitar modificación:Ajuste los encabezados, métodos y cargas útiles para controlar el flujo de datos de manera efectiva.
• Manejo de respuestas:Personalice las respuestas del servidor para diversas necesidades de pruebas.
• Gestión de Recursos:Mejore el rendimiento gestionando las solicitudes de forma selectiva.

Aplicaciones Prácticas

La interceptación de solicitudes ha demostrado ser útil en muchos casos. Por ejemplo, en un caso reciente de comercio electrónico, modificar las solicitudes de precios de productos según los códigos postales demostró su utilidad.

Algunos usos comunes incluyen:

• Simulación de respuestas de API para pruebas
• Mejorar la extracción de datos modificando los encabezados
• Aumentar la velocidad de carga bloqueando recursos innecesarios
• Fortalecimiento de la seguridad con tokens de autenticación personalizados

Estos ejemplos resaltan cómo la interceptación de solicitudes puede abordar desafíos tanto de desarrollo como operativos, allanando el camino para técnicas de automatización avanzadas.

Usando Puppeteer con Nodo tardío

Latenode simplifica la implementación de estas estrategias. A continuación, se muestra un ejemplo de flujo de trabajo que muestra cómo Puppeteer se integra con Latenode:

// Example workflow setup in Latenode
await page.setRequestInterception(true);
page.on('request', async (request) => {
    if (request.resourceType() === 'fetch') {
        const modifiedHeaders = {
            ...request.headers(),
            'Custom-Header': 'Modified-Value'
        };
        await request.continue({ headers: modifiedHeaders });
    }
});

Este ejemplo demuestra cómo puede modificar dinámicamente los encabezados de solicitud para adaptarlos a sus necesidades específicas.

Artículos relacionados con

• Instalación y configuración de Puppeteer: Solución de problemas comunes de dependencias y Chromium
• Análisis y procesamiento de la respuesta de red en Puppeteer: Monitoreo y modificación
• Gestión de agentes de usuario en Puppeteer para la emulación de dispositivos
• Administración de caché en Puppeteer: Desactivación, borrado y optimización del rendimiento