.png)
.svg){kind=icon}
23 de março de 2025
.
7
min ler
Interceptando e modificando solicitações de rede no Puppeteer: um guia prático
Jorge Miloradovitch
Pesquisador, redator e entrevistador de casos de uso
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:
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.
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.
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.
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.
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.
Com o Puppeteer, você pode ajustar as solicitações de saída para melhor atender às suas necessidades ao interagir com servidores web.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Bloquear recursos desnecessários pode reduzir significativamente os tempos de carregamento de páginas - à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.
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
isInterceptResolutionHandled verificações para evitar condições de corrida.await request.continue({
priority: 1,
headers: modifiedHeaders
});
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.
A interceptação de requisição do Puppeteer fornece aos desenvolvedores ferramentas poderosas para refinar tarefas de automação da web. Essas ferramentas permitem:
A interceptação de requisições provou ser útil em muitos cenários. Por exemplo, em um caso recente de e-commerce, modificar requisições de preços de produtos com base em códigos postais demonstrou sua utilidade.
Alguns usos comuns incluem:
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.
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.
