Requestly: Перехват и модификация HTTP запросов

Введение в Requestly

Requestly — это мощное расширение для браузера и настольное приложение, которое позволяет разработчикам и QA-инженерам перехватывать, изменять и перенаправлять HTTP-запросы и ответы в реальном времени. В отличие от традиционных инструментов тестирования API, Requestly работает на уровне браузера, что делает его идеальным для отладки веб-приложений, тестирования пограничных случаев и симуляции различных сетевых условий без изменения кода приложения.

Первоначально запущенный как расширение для Chrome, Requestly превратился в комплексную платформу, поддерживающую несколько браузеров, настольные приложения и функции командной работы.

Почему Использовать Requestly

Ключевые Сценарии Использования

Мокирование и Симуляция API

• Замена ответов продакшн API тестовыми данными
• Симуляция условий ошибок (500, 404, timeout)
• Тестирование пограничных случаев без изменений в backend
• Независимая разработка frontend

Модификация Заголовков

• Добавление/модификация/удаление заголовков запроса
• Тестирование сценариев аутентификации
• Обход ограничений CORS
• Симуляция различных user agents

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

• Перенаправление продакшн URLs на staging/local
• Тестирование сценариев failover CDN
• A/B тестирование различных endpoints
• Загрузка разных версий скриптов

Манипуляция Ответами

• Модификация JSON/XML ответов
• Внедрение пользовательского CSS/JavaScript
• Задержка ответов для тестирования состояний загрузки
• Трансформация структуры ответа API

Начало Работы с Requestly

Установка

Расширение Браузера

Chrome/Edge: https://chrome.google.com/webstore (Поиск "Requestly")
Firefox: https://addons.mozilla.org (Поиск "Requestly")
Safari: Установить через App Store

Настольное Приложение

# macOS
brew install --cask requestly

# Windows
Скачать с: https://requestly.io/downloads

# Linux
Скачать AppImage с официального сайта

Отладка Мобильных Приложений Requestly поддерживает отладку мобильных приложений через настройку прокси или интеграцию SDK.

Создание Первого Правила

1. Открыть Расширение Requestly: Клик на иконку в toolbar браузера
2. Создать Новое Правило: Выбрать тип правила (Redirect, Modify Headers и т.д.)
3. Определить Условия: Указать, какие запросы сопоставлять
4. Установить Действия: Определить, какие модификации применять
5. Включить Правило: Toggle для активации

Основные Типы Правил

1. Redirect URL

Перенаправление запросов с одного URL на другой:

Сценарий: Перенаправить Продакшн API на Локальный

URL Источник: https://api.production.com/users
URL Назначение: http://localhost:3000/users

Продвинутое Сопоставление Паттернов

Паттерн Источник: https://cdn.example.com/v1/*
Назначение: https://cdn.example.com/v2/$1

Поддержка Regex:
Источник: https://api\.example\.com/v(\d+)/(.*)
Назначение: https://api-staging.example.com/v$1/$2

2. Modify Headers

Добавление, модификация или удаление заголовков запроса/ответа:

Добавить Кастомную Авторизацию

Request URL: Содержит "api.example.com"
Действие: Add Header
Header: Authorization
Значение: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

Переопределить CORS Заголовки

Response URL: Содержит "api.thirdparty.com"
Действие: Add Header
Header: Access-Control-Allow-Origin
Значение: *

3. Mock Server Response

Замена реальных ответов сервера пользовательскими данными:

Mock Успешного Ответа

{
  "status": 200,
  "statusText": "OK",
  "headers": {
    "Content-Type": "application/json"
  },
  "body": {
    "id": 123,
    "name": "Test User",
    "email": "test@example.com",
    "role": "admin"
  }
}

Mock Ответа с Ошибкой

{
  "status": 500,
  "statusText": "Internal Server Error",
  "body": {
    "error": "Database connection failed",
    "code": "DB_CONN_ERROR"
  }
}

4. Insert Script

Внедрение пользовательского JavaScript на веб-страницы:

Добавить Override Analytics

// Блокировать Google Analytics
if (window.ga) {
  window.ga = function() {
    console.log('GA заблокирован Requestly');
  };
}

// Mock feature flag
window.FEATURE_FLAGS = {
  newDesign: true,
  betaFeatures: true
};

5. Modify Request/Response Body

Трансформация payload запроса или ответа:

Модификация Request Body

// Оригинальный request body
{
  "email": "user@example.com",
  "password": "********"
}

// Модифицированный для добавления дополнительного поля
{
  "email": "user@example.com",
  "password": "********",
  "remember_me": true,
  "device_id": "test-device-123"
}

Продвинутые Функции

Session Recording

Запись и воспроизведение HTTP сессий:

1. Начать Session Recording
2. Выполнить действия в браузере
3. Остановить Recording
4. Сохранить сессию для replay
5. Поделиться с членами команды

Shared Lists

Создание переиспользуемых списков условий:

Список API Endpoints:
- api.example.com/v1/*
- api.example.com/v2/*
- staging-api.example.com/*

Список Окружений Разработки:
- localhost:*
- 127.0.0.1:*
- *.local

Rule Chaining

Объединение нескольких правил для сложных сценариев:

Правило 1: Перенаправить продакшн API → staging
Правило 2: Добавить auth header к staging запросам
Правило 3: Mock конкретных staging endpoints
Правило 4: Задержать ответы на 500ms

Командная Работа

Общие Правила

Экспорт и обмен правилами с командой:

{
  "name": "Authentication Bypass",
  "description": "Добавить тестовый auth token для локальной разработки",
  "rules": [
    {
      "type": "Modify Headers",
      "source": {
        "key": "Url",
        "operator": "Contains",
        "value": "api.example.com"
      },
      "pairs": [{
        "header": "Authorization",
        "value": "Bearer test-token-123"
      }]
    }
  ]
}

Реальные Сценарии Тестирования

Сценарий 1: Тестирование Обработки Ошибок

Цель: Проверить, что frontend корректно обрабатывает ошибки API

Правило 1: Mock 500 Error
- URL: api.example.com/users
- Ответ: {"status": 500, "body": {"error": "Internal Server Error"}}

Правило 2: Mock Network Timeout
- URL: api.example.com/posts
- Ответ: {"status": 408, "delay": 60000}

Сценарий 2: Тестирование Feature Flags

Цель: Тестировать новые функции без развертывания backend

// Правило Insert Script
window.FEATURES = {
  NEW_DASHBOARD: true,
  BETA_CHECKOUT: true,
  EXPERIMENTAL_UI: false
};

Сценарий 3: Тестирование Cross-Origin

Цель: Тестировать CORS сценарии локально

Правило 1: Добавить CORS Headers
Response URL: Содержит "api.external.com"
Headers:
- Access-Control-Allow-Origin: http://localhost:3000
- Access-Control-Allow-Methods: GET, POST, PUT, DELETE
- Access-Control-Allow-Credentials: true

Сценарий 4: Тестирование Производительности

Цель: Тестировать приложение при медленных сетевых условиях

Симуляция медленных API ответов, больших payloads и прогрессивной загрузки изображений необходима для проверки поведения приложения в реальных сценариях.

Интеграция с Рабочим Процессом Разработки

Интеграция с Browser DevTools

Requestly интегрируется с Chrome DevTools:

1. Открыть DevTools → Network tab
2. Увидеть запросы, измененные Requestly, выделенными
3. Просмотреть оригинальные vs модифицированные headers/body
4. Инспектировать цепочки redirect
5. Анализировать влияние на производительность

Интеграция CI/CD

Использовать Requestly в автоматизированном тестировании:

// Пример Puppeteer
const puppeteer = require('puppeteer');

async function testWithRequestly() {
  const browser = await puppeteer.launch({
    headless: false,
    args: [
      '--load-extension=/path/to/requestly',
      '--disable-extensions-except=/path/to/requestly'
    ]
  });

  const page = await browser.newPage();
  await page.goto('https://example.com');
  await browser.close();
}

Безопасность и Конфиденциальность

Локальная Обработка

Все правила выполняются локально:

• Данные не отправляются на внешние серверы
• Правила хранятся в хранилище браузера
• Полный контроль над модификациями

Обработка Чувствительных Данных

Лучшие практики для безопасности:

✓ Использовать переменные окружения для секретов
✓ Не коммитить правила с токенами в VCS
✓ Отключать правила, когда они не нужны
✗ Никогда не использовать в продакшне без аудита
✗ Не логировать чувствительные данные в mocks

При тестировании приложений с certificate pinning, прокси-возможности Requestly позволяют перехватывать HTTPS трафик, соблюдая лучшие практики безопасности.

Сравнение с Альтернативами

Лучшие Практики

Организация Правил

Проект/
├── API Mocking/
│   ├── User Endpoints
│   ├── Payment Gateway
│   └── Error Scenarios
├── Development/
│   ├── Local Redirects
│   └── CORS Fixes
└── Testing/
    ├── Performance Delays
    └── Feature Flags

Соглашения об Именовании

✓ "Перенаправить prod API на local"
✓ "Mock 500 ошибка для /users endpoint"
✓ "Добавить auth header для staging"

✗ "Правило 1"
✗ "Тест"
✗ "Временный фикс"

Заключение

Requestly — это бесценный инструмент для современной веб-разработки и тестирования API, предлагающий беспрецедентный контроль над HTTP трафиком без необходимости изменения кода. Его нативный подход к браузеру делает его доступным и мощным, в то время как функции командной работы обеспечивают, что целые команды могут извлечь выгоду из общих стратегий отладки.

Независимо от того, тестируете ли вы интеграции API, отлаживаете проблемы CORS, симулируете сетевые условия или разрабатываете функции frontend независимо, Requestly предоставляет гибкость и мощность для манипулирования HTTP трафиком именно так, как нужно.