Перехват и изменение сетевых запросов в Puppeteer: Практическое руководство

Puppeteer предоставляет мощный инструмент для управления сетевыми запросами в процессе автоматизации веб-страниц. Эта функция позволяет отслеживать, блокировать или изменять HTTP-запросы и ответы в реальном времени. Вот что вы можете делать:

• Мониторинг сетевой активности: Логирование URL, методов, заголовков и данных запросов.
• Изменение запросов: Корректировка заголовков, перенаправление URL или изменение данных для тестирования API.
• Блокировка ресурсов: Отключение загрузки изображений, шрифтов или скриптов для повышения производительности.
• Имитация ответов: Создание моковых ответов сервера для тестирования.
• Тестирование ошибок: Симуляция HTTP-статусов (404, 500 и др.) для проверки обработки ошибок.

Быстрый пример

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

‍

В этом руководстве объясняется, как использовать API Puppeteer для перехвата запросов, включая практические примеры мониторинга, модификации и тестирования сетевых взаимодействий.

Мониторинг сетевых запросов

Puppeteer позволяет отслеживать сетевые запросы, предоставляя полную картину веб-трафика во время автоматизации.

Настройка слушателей запросов

Включите перехват запросов и добавьте обработчик:

await page.setRequestInterception(true);

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

‍

Всегда вызывайте request.continue(), чтобы запрос не был заблокирован.

Фильтрация запросов по типу

Вы можете фильтровать запросы по типу ресурса:

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

  const resourceType = interceptedRequest.resourceType();

  switch(resourceType) {
    case 'image':
      // Обработка изображений
      break;
    case 'xhr':
      // Обработка API-вызовов
      break;
    default:
      interceptedRequest.continue();
  }
});

‍

Логирование данных запроса

Важные свойства запроса:

‍

Пример мониторинга API:

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

‍

Изменение исходящих запросов

Puppeteer позволяет модифицировать запросы перед их отправкой.

Изменение заголовков

Добавление или изменение HTTP-заголовков:

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

‍

Или для отдельных запросов:

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

‍

Перенаправление URL

Изменение URL запросов:

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

‍

Изменение данных запроса

Модификация данных POST-запросов:

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

‍

Управление ответами сервера

Puppeteer позволяет обрабатывать и модифицировать ответы сервера.

Мониторинг ответов

Отслеживание входящих ответов:

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();
    // Обработка данных
  }
});

‍

Модификация ответов

Имитация ответов сервера:

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

‍

Тестирование HTTP-статусов

Симуляция различных статусов:

‍

Пример:

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

‍

Рекомендации по перехвату запросов

Управление сессиями

Пример обработки авторизации:

await page.setRequestInterception(true);

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

‍

Оптимизация скорости

Блокировка ненужных ресурсов:

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

‍

Решение проблем

1. Всегда проверяйте isInterceptResolutionHandled()
2. Используйте приоритеты для множественных обработчиков
3. Обрабатывайте ошибки:

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

‍

Ключевые моменты

Puppeteer предоставляет мощные инструменты для:

• Модификации запросов (заголовки, методы, данные)
• Управления ответами сервера
• Оптимизации загрузки ресурсов

Практическое применение

Примеры использования:

• Тестирование API с моковыми ответами
• Улучшение парсинга данных
• Ускорение загрузки страниц
• Усиление безопасности

Использование Puppeteer с Нодулем

Нодуль упрощает реализацию этих стратегий. Пример рабочего процесса:

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