Interceptando e modificando solicitações de rede no Puppeteer: um guia prático

Índice

Interceptando e modificando solicitações de rede no Puppeteer: um guia prático

Interceptando e modificando solicitações de rede em Marionetista é uma maneira poderosa de gerenciar tarefas de automação da web. Ele permite que você monitore, bloqueie ou ajuste solicitações e respostas HTTP em tempo real. Aqui está o que você pode fazer:

Monitore a atividade da rede: Detalhes do log como URLs, métodos, cabeçalhos e cargas úteis.
Modificar solicitações: Altere cabeçalhos, redirecione URLs ou ajuste cargas úteis para testes e depuração de API.
Recursos de bloco: Impedir o carregamento de imagens, fontes ou scripts para melhorar o desempenho.
Simular Respostas: Simule respostas do servidor para testar ou alterar conteúdo dinamicamente.
Cenários de erro de teste: Simule códigos de status HTTP como 404 ou 500 para testar o tratamento de erros.

Exemplo 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();
    }
});

Este guia explica como usar a API do Puppeteer para interceptação de solicitações, incluindo exemplos práticos para monitorar, modificar e testar interações de rede.

Marionetista Tutorial #12 | Interceptadores HTTP | Solicitações de interceptação

Marionetista

Monitoramento de solicitações de rede

O Puppeteer torna possível monitorar solicitações de rede, dando a você uma visão clara do tráfego da web durante tarefas de automação. Veja como você pode rastrear e analisar a atividade de rede de forma eficaz.

Configurando ouvintes de solicitação

Comece habilitando a interceptação de requisição e anexando um listener. Aqui está um exemplo:

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

No interior do 'request' ouvinte de eventos, você pode acessar e até mesmo modificar solicitações interceptadas. Apenas certifique-se de chamar request.continue() para que a solicitação original não seja bloqueada.

Filtrando solicitações por tipo

O Puppeteer permite que você filtre solicitações de rede com base no tipo delas, facilitando o foco em tráfego específico. Veja como você pode lidar com solicitações seletivamente:

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();
    }
});

Ao categorizar e priorizar os tipos de recursos, você pode otimizar seus esforços de monitoramento de rede e se concentrar no que é mais importante.

Registrando dados de solicitação

Depois de filtrar as solicitações, registrar seus detalhes principais pode ajudar a descobrir padrões úteis. Aqui está uma rápida visão geral de algumas propriedades importantes da solicitação:

Solicitar Propriedade	Descrição	Método de Acesso
URL	URL de solicitação completa	`request.url()`
Forma	Método HTTP (por exemplo, GET, POST)	`request.method()`
Cabeçalhos	Solicitar cabeçalhos	`request.headers()`
Dados de postagem	Carga útil enviada com a solicitação	`request.postData()`

Por exemplo, se você quiser monitorar solicitações de API para dados de preços:

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 permite que você analise o tráfego em detalhes. Sempre verifique request.isInterceptResolutionHandled() para evitar conflitos com outros manipuladores.

Alterando solicitações de saída

Com o Puppeteer, você pode ajustar as solicitações de saída para melhor atender às suas necessidades ao interagir com servidores web.

Modificações de cabeçalho

Você pode ajustar cabeçalhos HTTP para incluir tokens, alterar agentes de usuário ou adicionar valores personalizados.

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

Para um controle mais granular sobre solicitações individuais:

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

"A interceptação de solicitações facilita a modificação das propriedades das solicitações de saída, como definir cabeçalhos personalizados, alterar métodos de solicitação ou ajustar a carga útil da solicitação." - Saairaamprasad

Em seguida, vamos analisar o redirecionamento de solicitações por meio do redirecionamento de URLs.

Redirecionamentos de URL

Redirecione solicitações específicas usando a seguinte abordagem:

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 ajuda você a alterar endpoints de API ou redirecionar solicitações dinamicamente.

Solicitar alterações de dados

Você também pode modificar payloads para requisições POST e PUT. Veja como:

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();
});

Aqui está uma referência rápida para modificar diferentes propriedades de solicitação:

Solicitar Propriedade	Como Modificar	Casos de uso comuns
Cabeçalhos	`continue({ headers })`	Adicionar tokens de autenticação, identificadores personalizados
URL	`continue({ url })`	Redirecionando endpoints, redirecionando solicitações
Dados de postagem	`continue({ postData })`	Atualizando dados de formulário, alterando payloads de API

Nota: Alterar solicitações pode afetar o desempenho, então é melhor interceptar somente quando necessário. Esses métodos fornecem a você controle preciso sobre solicitações de saída em seus fluxos de trabalho de automação.

Gerenciando respostas do servidor

O Puppeteer permite que você manipule e modifique respostas do servidor, tornando-o uma ferramenta poderosa para automação da web. Esta seção se baseia em técnicas anteriores para modificação de requisição e foca no controle de respostas do servidor para dar a você controle total sobre interações de rede.

Monitoramento de Resposta

Você pode rastrear as respostas recebidas do servidor configurando um ouvinte de eventos de resposta:

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 snippet registra detalhes como URL, códigos de status e cabeçalhos, ajudando você a analisar como o servidor se comporta. Além do monitoramento, você pode modificar o conteúdo da resposta dinamicamente para atender às suas necessidades.

Modificando o conteúdo da resposta

Para personalizar como as respostas são manipuladas, use interceptação. Aqui está um exemplo:

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();
});

Essa técnica é particularmente útil para testar APIs simulando respostas ou ajustando dados em cenários específicos.

Testando códigos de status HTTP

Depois de dominar a modificação de conteúdo, você pode simular vários códigos de status HTTP para testar o tratamento de erros. Veja como:

Código de status	Caso de uso	Exemplo de Implementação
200	Resposta de sucesso	`status: 200, body: JSON.stringify(successData)`
404	Recurso ausente	`status: 404, body: 'Not Found'`
500	Erro de servidor	`status: 500, body: 'Internal Server Error'`

Por exemplo:

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();
});

"A interceptação de requisições no Puppeteer permite que você observe, modifique ou bloqueie requisições HTTP de saída e respostas de entrada. Esse recurso é útil ao otimizar o carregamento de páginas, simular várias condições de rede ou lidar com o carregamento de conteúdo dinâmico." – Saairaamprasad

Pro Dica: Embora interceptar respostas possa ser poderoso, use-o com moderação. O uso excessivo de interceptação pode tornar seus scripts de automação mais lentos ou introduzir complexidade desnecessária.

sbb-itb-23997f1

Diretrizes de solicitação de interceptação

A interceptação de requisição é uma ferramenta poderosa, mas requer uso cuidadoso para garantir um desempenho suave e manter a confiabilidade. Abaixo estão as etapas práticas para gerenciar sessões, melhorar a velocidade e resolver problemas comuns.

Gerenciando sessões de usuário

Veja como você pode lidar com sessões de usuários 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 });
    }
});

Sempre verifique o status da interceptação antes de modificar os cabeçalhos para evitar conflitos com outros interceptadores.

Otimização de velocidade

O bloqueio de recursos desnecessários pode reduzir significativamente o tempo de carregamento da página - às vezes em até 500 milissegundos . Aqui está um exemplo:

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

Tipo de recurso	Ação	Impacto
Imagens	Bloquear	Acelera o carregamento da página
Folhas de estilo	Carregamento seletivo	Economiza largura de banda
Dados	Bloquear	Reduz a sobrecarga da rede
Chamadas API	Permitir	Mantém a funcionalidade essencial

Quando ocorrem problemas de desempenho, essas estratégias de gerenciamento de recursos podem ajudar.

Dicas de solução de problemas

O manuseio impróprio é uma fonte comum de problemas. Aqui estão algumas correções práticas:

"Quando a interceptação de solicitações é habilitada, todas as solicitações serão interrompidas, a menos que sejam continuadas, respondidas ou abortadas."

Antoine Vastel, Chefe de Pesquisa da Castelo

Tratamento de resolução: Usar isInterceptResolutionHandled verificações para evitar condições de corrida.
Vários manipuladores: Atribuir prioridades ao usar vários manipuladores de interceptação:

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

Solicitações paralisadas: Garantir que todas as solicitações sejam resolvidas adequadamente:

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

Mantenha sua lógica de interceptação direta. Regras muito complicadas podem deixar as coisas mais lentas e tornar seu código mais difícil de manter.

Principais lições

A interceptação de requisição do Puppeteer fornece aos desenvolvedores ferramentas poderosas para refinar tarefas de automação da web. Essas ferramentas permitem:

Solicitar modificação: Ajuste cabeçalhos, métodos e cargas úteis para controlar o fluxo de dados de forma eficaz.
Tratamento de respostas: Personalize as respostas do servidor para diversas necessidades de teste.
Gestão de Recursos: Melhore o desempenho ao lidar com solicitações seletivamente.

Aplicações Práticas

A interceptação de solicitações tem se mostrado útil em diversos cenários. Por exemplo, em um caso recente de comércio eletrônico, a modificação de solicitações de preços de produtos com base em CEPs demonstrou sua utilidade. .

Alguns usos comuns incluem:

Respostas de API simuladas para teste
Melhorando a coleta de dados modificando cabeçalhos
Aumentando a velocidade de carregamento bloqueando recursos desnecessários
Fortalecendo a segurança com tokens de autenticação personalizados

Esses exemplos destacam como a interceptação de solicitações pode abordar desafios de desenvolvimento e operacionais, abrindo caminho para técnicas avançadas de automação.

Usando o Puppeteer com Nó latente

Nó latente

O Latenode simplifica a implementação dessas estratégias. Aqui está um exemplo de fluxo de trabalho para mostrar como o Puppeteer se integra ao 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 exemplo demonstra como você pode modificar cabeçalhos de solicitação dinamicamente para atender às suas necessidades específicas.