Interceptación y modificación de solicitudes de red en Puppeteer: guía práctica

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

• Supervisar la actividad de red: Registrar detalles como URL, métodos, encabezados y cargas útiles.
• Modificar solicitudes: Cambiar encabezados, redirigir URL o ajustar cargas útiles para pruebas y depuración de API.
• Bloquear recursos: Evitar la carga de imágenes, fuentes o scripts para mejorar el rendimiento.
• Simular respuestas: Crear respuestas simuladas del servidor para pruebas o modificar contenido dinámicamente.
• Probar escenarios de error: Simular 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 usar la API de Puppeteer para la interceptación de solicitudes, incluidos ejemplos prácticos para supervisar, modificar y probar interacciones de red.

Tutorial de Puppeteer n.º 12 | Interceptores HTTP | Interceptar solicitudes

Supervisión de solicitudes de red

Puppeteer permite supervisar solicitudes de red, lo que le ofrece una visión clara del tráfico web durante las tareas de automatización. A continuación, verá cómo realizar el seguimiento y analizar la actividad de red de forma eficaz.

Configuración de oyentes de solicitudes

Comience habilitando la interceptación de solicitudes y añadiendo un oyente. Este es 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 oyente de eventos 'request', puede acceder e incluso modificar las solicitudes interceptadas. Asegúrese de llamar a request.continue() para que la solicitud original no se bloquee.

Filtrado de solicitudes por tipo

Puppeteer le permite filtrar solicitudes de red según su tipo, lo que facilita centrarse en tráfico específico. A continuación, se muestra cómo gestionar 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 tareas de supervisión de red y centrarse en lo que más importa.

Registro de datos de solicitudes

Una vez que haya filtrado las solicitudes, registrar sus detalles clave puede ayudarle a identificar patrones útiles. A continuación, se muestra un resumen rápido de algunas propiedades importantes de las solicitudes:

Por ejemplo, si desea supervisar solicitudes de API para 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. Compruebe siempre request.isInterceptResolutionHandled() para evitar conflictos con otros controladores.

Modificación de solicitudes salientes

Con Puppeteer, puede ajustar las solicitudes salientes para adaptarlas mejor a sus necesidades al interactuar con servidores web.

Modificaciones de encabezados

Puede ajustar los encabezados HTTP para incluir tokens, cambiar agentes de usuario o añadir 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 establecer encabezados personalizados, alterar métodos de solicitud o ajustar la carga útil de la solicitud." - Saairaamprasad [1]

A continuación, veamos cómo redirigir solicitudes mediante la redirección de URL.

Redirecciones de URL

Redirija solicitudes específicas con 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 endpoints de API o redirigir solicitudes dinámicamente.

Cambios en los datos de solicitudes

También puede modificar cargas útiles para solicitudes POST y PUT. A continuación, se muestra 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, encontrará una referencia rápida para modificar distintas propiedades de las solicitudes:

Nota: Modificar solicitudes puede afectar al rendimiento, por lo que es mejor interceptarlas solo cuando sea necesario. Estos métodos le ofrecen un control preciso sobre las solicitudes salientes en sus flujos de automatización.

Gestión de respuestas del servidor

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

Supervisión de respuestas

Puede realizar un seguimiento de las respuestas entrantes del servidor configurando un oyente 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 supervisar, puede modificar dinámicamente el contenido de las respuestas según sus necesidades.

Modificación del contenido de las respuestas

Para personalizar cómo se gestionan las respuestas, utilice la interceptación. Este es 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 resulta especialmente útil para probar API simulando respuestas o ajustando datos en escenarios específicos.

Prueba de códigos de estado HTTP

Una vez que domine la modificación de contenido, podrá simular distintos códigos de estado HTTP para probar el manejo de errores. A continuación, se muestra 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 interceptación de solicitudes en Puppeteer le permite observar, modificar o bloquear solicitudes HTTP salientes y respuestas entrantes. Esta función resulta útil al optimizar la carga de páginas, simular varias condiciones de red o gestionar la carga de contenido dinámico." – Saairaamprasad [1]

Consejo profesional: Aunque interceptar respuestas puede ser muy útil, úselo con moderación. El uso excesivo de la interceptación puede ralentizar sus scripts de automatización o introducir complejidad innecesaria.

sbb-itb-23997f1

Directrices para la interceptación de solicitudes

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

Gestión de sesiones de usuario

A continuación, se muestra cómo puede gestionar sesiones de usuario de forma eficaz:

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

Compruebe siempre el estado de interceptació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, en ocasiones hasta 500 milisegundos [3]. Este es 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

La gestión incorrecta es una fuente habitual de problemas. Estas son algunas soluciones prácticas:

"Una vez habilitada la interceptación de solicitudes, cada solicitud se bloqueará a menos que se continúe, responda o cancele."

• Antoine Vastel, director de investigación de Castle [4]

1. Gestión de resolución: Utilice comprobaciones de isInterceptResolutionHandled para evitar condiciones de carrera.
2. Múltiples controladores: Asigne prioridades cuando utilice varios controladores de interceptación:

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

3. Solicitudes bloqueadas: 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 una lógica de interceptación sencilla. Las reglas excesivamente complejas pueden ralentizar los procesos y dificultar el mantenimiento de su código.

Conclusiones clave

La interceptación de solicitudes de Puppeteer proporciona a los desarrolladores herramientas eficaces para perfeccionar las tareas de automatización web. Estas herramientas permiten:

• Modificación de solicitudes: Ajustar encabezados, métodos y cargas útiles para controlar eficazmente el flujo de datos.
• Gestión de respuestas: Personalizar respuestas del servidor para distintas necesidades de prueba.
• Gestión de recursos: Mejorar el rendimiento mediante la gestión selectiva de solicitudes.

Aplicaciones prácticas

La interceptación de solicitudes ha demostrado ser útil en muchos escenarios. Por ejemplo, en un caso reciente de comercio electrónico, la modificación de solicitudes de precios de productos según códigos postales demostró su utilidad [2].

Algunos usos habituales incluyen:

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

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

Uso de Puppeteer con Latenode

Latenode simplifica la implementación de estas estrategias. A continuación, se muestra un flujo de ejemplo para ilustrar 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 las solicitudes para adaptarlos a sus necesidades específicas.