Requestly: Intercepción y Modificación de Solicitudes HTTP

Introducción a Requestly

Requestly es una potente extensión de navegador y aplicación de escritorio que permite a desarrolladores e ingenieros de QA interceptar, modificar y redirigir solicitudes y respuestas HTTP en tiempo real. A diferencia de las herramientas tradicionales de prueba de API, Requestly opera a nivel del navegador, haciéndolo ideal para debugging de aplicaciones web, probar casos extremos y simular varias condiciones de red sin cambiar el código de la aplicación.

Originalmente lanzado como extensión de Chrome, Requestly ha evolucionado a una plataforma integral que soporta múltiples navegadores, aplicaciones de escritorio y características de colaboración en equipo.

Por Qué Usar Requestly

Casos de Uso Clave

Mocking y Simulación de API

• Reemplazar respuestas de API de producción con datos de prueba
• Simular condiciones de error (500, 404, timeout)
• Probar casos extremos sin cambios en backend
• Desarrollar frontend independientemente

Modificación de Headers

• Agregar/modificar/eliminar headers de solicitud
• Probar escenarios de autenticación
• Eludir restricciones CORS
• Simular diferentes user agents

Redirección de URL

• Redirigir URLs de producción a staging/local
• Probar escenarios de failover CDN
• A/B testing de diferentes endpoints
• Cargar diferentes versiones de scripts

Manipulación de Respuestas

• Modificar respuestas JSON/XML
• Inyectar CSS/JavaScript personalizado
• Retrasar respuestas para probar estados de carga
• Transformar estructura de respuesta API

Comenzando con Requestly

Instalación

Extensión de Navegador

Chrome/Edge: https://chrome.google.com/webstore (Buscar "Requestly")
Firefox: https://addons.mozilla.org (Buscar "Requestly")
Safari: Instalar vía App Store

Aplicación de Escritorio

# macOS
brew install --cask requestly

# Windows
Descargar desde: https://requestly.io/downloads

# Linux
Descargar AppImage desde sitio oficial

Debugging Móvil Requestly soporta debugging de aplicaciones móviles a través de configuración de proxy o integración SDK.

Creando Tu Primera Regla

1. Abrir Extensión Requestly: Click en icono en toolbar del navegador
2. Crear Nueva Regla: Elegir tipo de regla (Redirect, Modify Headers, etc.)
3. Definir Condiciones: Especificar qué solicitudes coincidir
4. Establecer Acciones: Definir qué modificaciones aplicar
5. Habilitar Regla: Toggle para activar

Tipos de Reglas Core

1. Redirect URL

Redirigir solicitudes de una URL a otra:

Caso de Uso: Redirigir API de Producción a Local

URL Origen: https://api.production.com/users
URL Destino: http://localhost:3000/users

Pattern Matching Avanzado

Patrón Origen: https://cdn.example.com/v1/*
Destino: https://cdn.example.com/v2/$1

Soporte Regex:
Origen: https://api\.example\.com/v(\d+)/(.*)
Destino: https://api-staging.example.com/v$1/$2

2. Modify Headers

Agregar, modificar o eliminar headers de solicitud/respuesta:

Agregar Autorización Personalizada

Request URL: Contiene "api.example.com"
Acción: Add Header
Header: Authorization
Valor: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

Sobrescribir Headers CORS

Response URL: Contiene "api.thirdparty.com"
Acción: Add Header
Header: Access-Control-Allow-Origin
Valor: *

3. Mock Server Response

Reemplazar respuestas de servidor reales con datos personalizados:

Mock de Respuesta Exitosa

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

Mock de Respuesta de Error

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

4. Insert Script

Inyectar JavaScript personalizado en páginas web:

Agregar Override de Analytics

// Bloquear Google Analytics
if (window.ga) {
  window.ga = function() {
    console.log('GA bloqueado por Requestly');
  };
}

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

5. Modify Request/Response Body

Transformar payloads de solicitud o respuesta:

Modificación de Request Body

// Request body original
{
  "email": "user@example.com",
  "password": "********"
}

// Modificado para agregar campo extra
{
  "email": "user@example.com",
  "password": "********",
  "remember_me": true,
  "device_id": "test-device-123"
}

Características Avanzadas

Session Recording

Grabar y reproducir sesiones HTTP:

1. Iniciar Session Recording
2. Realizar acciones en navegador
3. Detener Recording
4. Guardar sesión para replay
5. Compartir con miembros del equipo

Shared Lists

Crear listas de condiciones reutilizables:

Lista de API Endpoints:
- api.example.com/v1/*
- api.example.com/v2/*
- staging-api.example.com/*

Lista de Entornos de Desarrollo:
- localhost:*
- 127.0.0.1:*
- *.local

Rule Chaining

Combinar múltiples reglas para escenarios complejos:

Regla 1: Redirigir API producción → staging
Regla 2: Agregar auth header a requests staging
Regla 3: Mock endpoints staging específicos
Regla 4: Retrasar respuestas por 500ms

Colaboración en Equipo

Reglas Compartidas

Exportar y compartir reglas con equipo:

{
  "name": "Authentication Bypass",
  "description": "Agregar test auth token para desarrollo local",
  "rules": [
    {
      "type": "Modify Headers",
      "source": {
        "key": "Url",
        "operator": "Contains",
        "value": "api.example.com"
      },
      "pairs": [{
        "header": "Authorization",
        "value": "Bearer test-token-123"
      }]
    }
  ]
}

Escenarios de Prueba del Mundo Real

Escenario 1: Probar Manejo de Errores

Objetivo: Verificar que frontend maneja errores de API elegantemente

Regla 1: Mock 500 Error
- URL: api.example.com/users
- Respuesta: {"status": 500, "body": {"error": "Internal Server Error"}}

Regla 2: Mock Network Timeout
- URL: api.example.com/posts
- Respuesta: {"status": 408, "delay": 60000}

Escenario 2: Prueba de Feature Flags

Objetivo: Probar nuevas características sin deployment de backend

// Regla Insert Script
window.FEATURES = {
  NEW_DASHBOARD: true,
  BETA_CHECKOUT: true,
  EXPERIMENTAL_UI: false
};

Escenario 3: Prueba Cross-Origin

Objetivo: Probar escenarios CORS localmente

Regla 1: Agregar CORS Headers
Response URL: Contiene "api.external.com"
Headers:
- Access-Control-Allow-Origin: http://localhost:3000
- Access-Control-Allow-Methods: GET, POST, PUT, DELETE
- Access-Control-Allow-Credentials: true

Escenario 4: Prueba de Rendimiento

Objetivo: Probar aplicación bajo condiciones de red lentas

Simular respuestas lentas de API, cargas grandes de payload y carga progresiva de imágenes es esencial para validar el comportamiento de la aplicación en escenarios del mundo real.

Integración con Flujo de Desarrollo

Integración con Browser DevTools

Requestly se integra con Chrome DevTools:

1. Abrir DevTools → Network tab
2. Ver requests modificados por Requestly resaltados
3. Ver headers/body original vs modificado
4. Inspeccionar cadenas de redirect
5. Analizar impacto en rendimiento

Integración CI/CD

Usar Requestly en pruebas automatizadas:

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

Seguridad y Privacidad

Procesamiento Local

Todas las reglas se ejecutan localmente:

• No se envían datos a servidores externos
• Reglas almacenadas en storage del navegador
• Control total sobre modificaciones

Manejo de Datos Sensibles

Mejores prácticas para seguridad:

✓ Usar variables de entorno para secretos
✓ No commitear reglas con tokens a VCS
✓ Deshabilitar reglas cuando no se necesiten
✗ Nunca usar en producción sin auditoría
✗ No loguear datos sensibles en mocks

Al probar aplicaciones con certificate pinning, las capacidades de proxy de Requestly permiten interceptar tráfico HTTPS manteniendo las mejores prácticas de seguridad.

Comparación con Alternativas

Mejores Prácticas

Organización de Reglas

Proyecto/
├── API Mocking/
│   ├── User Endpoints
│   ├── Payment Gateway
│   └── Error Scenarios
├── Development/
│   ├── Local Redirects
│   └── CORS Fixes
└── Testing/
    ├── Performance Delays
    └── Feature Flags

Convenciones de Nomenclatura

✓ "Redirigir API prod a local"
✓ "Mock 500 error para endpoint /users"
✓ "Agregar auth header para staging"

✗ "Regla 1"
✗ "Test"
✗ "Fix temporal"

Conclusión

Requestly es una herramienta invaluable para desarrollo web moderno y pruebas de API, ofreciendo control sin precedentes sobre tráfico HTTP sin requerir cambios de código. Su enfoque nativo del navegador lo hace accesible y potente, mientras que las características de colaboración en equipo aseguran que equipos enteros puedan beneficiarse de estrategias de debugging compartidas.

Ya sea que estés probando integraciones de API, debuggeando problemas CORS, simulando condiciones de red o desarrollando características de frontend independientemente, Requestly proporciona la flexibilidad y poder para manipular tráfico HTTP exactamente como se necesita.