Requestly: HTTP Interception and Request Modification

Introduction to Requestly

Requestly is a powerful browser extension and desktop application that allows developers and QA engineers to intercept, modify, and redirect HTTP requests and responses in real-time. Unlike traditional API testing tools, Requestly operates at the browser level, making it ideal for debugging web applications, testing edge cases, and simulating various network conditions without changing application code.

Originally launched as a Chrome extension, Requestly has evolved into a comprehensive platform supporting multiple browsers, desktop apps, and team collaboration features. It’s particularly valuable for frontend developers, QA engineers, and anyone needing to manipulate HTTP traffic during development and testing.

Why Use Requestly

Key Use Cases

API Mocking and Simulation

• Replace production API responses with test data
• Simulate error conditions (500, 404, timeout)
• Test edge cases without backend changes
• Develop frontend independently

Header Modification

• Add/modify/remove request headers
• Test authentication scenarios
• Bypass CORS restrictions
• Simulate different user agents

URL Redirection

• Redirect production URLs to staging/local
• Test CDN failover scenarios
• A/B testing different endpoints
• Load different script versions

Response Manipulation

• Modify JSON/XML responses
• Inject custom CSS/JavaScript
• Delay responses to test loading states
• Transform API response structure

Getting Started with Requestly

Installation

Browser Extension

Chrome/Edge: https://chrome.google.com/webstore (Search "Requestly")
Firefox: https://addons.mozilla.org (Search "Requestly")
Safari: Install via App Store

Desktop Application

# macOS
brew install --cask requestly

# Windows
Download from: https://requestly.io/downloads

# Linux
Download AppImage from official website

Mobile Debugging Requestly supports mobile app debugging via proxy configuration or SDK integration.

Creating Your First Rule

1. Open Requestly Extension: Click icon in browser toolbar
2. Create New Rule: Choose rule type (Redirect, Modify Headers, etc.)
3. Define Conditions: Specify which requests to match
4. Set Actions: Define what modifications to apply
5. Enable Rule: Toggle to activate

Core Rule Types

1. Redirect URL

Redirect requests from one URL to another:

Use Case: Redirect Production API to Local

Source URL: https://api.production.com/users
Destination URL: http://localhost:3000/users

Advanced Pattern Matching

Source Pattern: https://cdn.example.com/v1/*
Destination: https://cdn.example.com/v2/$1

Regex Support:
Source: https://api\.example\.com/v(\d+)/(.*)
Destination: https://api-staging.example.com/v$1/$2

2. Modify Headers

Add, modify, or remove request/response headers:

Add Custom Authorization

Request URL: Contains "api.example.com"
Action: Add Header
Header: Authorization
Value: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

Override CORS Headers

Response URL: Contains "api.thirdparty.com"
Action: Add Header
Header: Access-Control-Allow-Origin
Value: *

Remove Security Headers

Response URL: Contains "localhost:3000"
Action: Remove Header
Header: Content-Security-Policy

3. Mock Server Response

Replace actual server responses with custom data:

Success Response Mock

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

Error Response Mock

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

Delay Simulation

{
  "status": 200,
  "delay": 3000,
  "body": {
    "data": "Slow network simulation"
  }
}

4. Insert Script

Inject custom JavaScript into web pages:

Add Analytics Override

// Block Google Analytics
if (window.ga) {
  window.ga = function() {
    console.log('GA blocked by Requestly');
  };
}

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

Debug Helper Injection

// Add debug toolbar
const debugDiv = document.createElement('div');
debugDiv.id = 'requestly-debug';
debugDiv.innerHTML = `
  <h3>Debug Info</h3>
  <p>User Agent: ${navigator.userAgent}</p>
  <p>Viewport: ${window.innerWidth}x${window.innerHeight}</p>
`;
document.body.appendChild(debugDiv);

5. Modify Request/Response Body

Transform request or response payloads:

Request Body Modification

// Original request body
{
  "email": "user@example.com",
  "password": "********"
}

// Modified to add extra field
{
  "email": "user@example.com",
  "password": "********",
  "remember_me": true,
  "device_id": "test-device-123"
}

Response Transformation

// Modify API response structure
function modifyResponse(responseBody) {
  const data = JSON.parse(responseBody);

  // Add extra fields
  data.modified = true;
  data.timestamp = Date.now();

  // Transform nested structure
  if (data.items) {
    data.items = data.items.map(item => ({
      ...item,
      featured: true
    }));
  }

  return JSON.stringify(data);
}

6. Block Request

Prevent specific requests from being sent:

Block Analytics

URL Pattern: Contains "google-analytics.com"
Action: Block Request
Response: Return 200 OK (silent fail)

Block Tracking Pixels

URL Pattern: Matches /\.(gif|png)\?track=/
Action: Block Request

Advanced Features

Session Recording

Record and replay HTTP sessions:

1. Start Session Recording
2. Perform actions in browser
3. Stop Recording
4. Save session for replay
5. Share with team members

Use Cases:

• Bug reproduction
• Performance analysis
• Training and documentation
• API behavior analysis

Shared Lists

Create reusable condition lists:

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

Development Environments List:
- localhost:*
- 127.0.0.1:*
- *.local

Rule Chaining

Combine multiple rules for complex scenarios:

Rule 1: Redirect production API → staging
Rule 2: Add auth header to staging requests
Rule 3: Mock specific staging endpoints
Rule 4: Delay responses by 500ms

Environment-Specific Rules

Activate rules based on environment:

Local Development:
✓ Redirect APIs to localhost
✓ Remove CSP headers
✓ Mock payment gateway

Staging Testing:
✓ Add debug headers
✓ Enable verbose logging
✗ Production redirects

Production Debugging:
✓ Session recording only
✗ No modifications

Team Collaboration

Shared Rules

Export and share rules with team:

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

Team Workspaces

Organize rules by project or team:

My Workspace/
├── Production Debugging/
│   ├── API Redirects
│   └── Session Recording
├── Feature Testing/
│   ├── Mock Responses
│   └── Header Modifications
└── Performance Testing/
    ├── Network Delays
    └── Response Compression

Real-World Testing Scenarios

Scenario 1: Testing Error Handling

Objective: Verify frontend handles API errors gracefully

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

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

Rule 3: Mock Validation Error
- URL: api.example.com/create
- Response: {"status": 422, "body": {"errors": ["Invalid email format"]}}

Scenario 2: Feature Flag Testing

Objective: Test new features without backend deployment

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

// Mock API Response
{
  "status": 200,
  "body": {
    "features": {
      "dashboard_v2": true,
      "checkout_flow_v3": true
    }
  }
}

Scenario 3: Cross-Origin Testing

Objective: Test CORS scenarios locally

Rule 1: Add CORS Headers
Response URL: Contains "api.external.com"
Headers:
- Access-Control-Allow-Origin: http://localhost:3000
- Access-Control-Allow-Methods: GET, POST, PUT, DELETE
- Access-Control-Allow-Headers: Content-Type, Authorization
- Access-Control-Allow-Credentials: true

Rule 2: Preflight Response
Request Method: OPTIONS
Response: 200 OK with CORS headers

Scenario 4: Performance Testing

Objective: Test application under slow network conditions

Rule 1: Slow API Responses
URL Pattern: api.example.com/*
Delay: 2000ms

Rule 2: Large Payload Simulation
URL: api.example.com/data
Response: {
  "status": 200,
  "delay": 1000,
  "body": [/* large array of 10000 items */]
}

Rule 3: Progressive Loading
URL: api.example.com/images/*
Delay: Random(500, 3000)

Integration with Development Workflow

Browser DevTools Integration

Requestly integrates with Chrome DevTools:

1. Open DevTools → Network tab
2. See Requestly-modified requests highlighted
3. View original vs modified headers/body
4. Inspect redirect chains
5. Analyze performance impact

CI/CD Integration

Use Requestly in automated testing:

// Puppeteer Example
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();

  // Requestly rules automatically applied
  await page.goto('https://example.com');

  // Perform tests
  await page.click('#submit');

  await browser.close();
}

API Documentation Testing

Test API examples in documentation:

1. Write API documentation with examples
2. Create Requestly rule to mock API
3. Embed live examples in docs
4. Users can test without real API access

Security and Privacy

Local Processing

All rules execute locally:

• No data sent to external servers
• Rules stored in browser storage
• Full control over modifications

Sensitive Data Handling

Best practices for security:

✓ Use environment variables for secrets
✓ Don't commit rules with tokens to VCS
✓ Disable rules when not needed
✗ Never use in production without audit
✗ Don't log sensitive data in mocks

When testing apps with certificate pinning, Requestly’s proxy capabilities allow you to intercept HTTPS traffic while maintaining security best practices.

Rule Validation

Validate rules before activation:

// Good: Specific URL matching
URL: Exactly "https://api.example.com/test"

// Bad: Too broad, might affect other sites
URL: Contains "api"

// Good: Limited scope
URL: Regex ^https://api\.example\.com/v1/.*

// Bad: Overly permissive
URL: Wildcard *

Troubleshooting

Rules Not Applying

Check Rule Conditions

• Verify URL pattern matches
• Check if rule is enabled
• Confirm browser extension is active
• Review rule priority

Clear Browser Cache

1. Open DevTools
2. Right-click reload button
3. Select "Empty Cache and Hard Reload"

Check Console Errors

1. Open DevTools → Console
2. Filter for Requestly messages
3. Look for error indicators
4. Verify script syntax

Performance Issues

Optimize Rule Count

• Disable unused rules
• Combine similar rules
• Use shared lists efficiently

Reduce Script Complexity

• Minimize injected script size
• Avoid heavy computations
• Use efficient selectors

Conflicts with Other Extensions

Resolution Steps

1. Disable other extensions temporarily
2. Test Requestly rules individually
3. Check extension load order
4. Use Requestly in incognito mode

Comparison with Alternatives

Best Practices

Rule Organization

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

Naming Conventions

✓ "Redirect prod API to local"
✓ "Mock 500 error for /users endpoint"
✓ "Add auth header for staging"

✗ "Rule 1"
✗ "Test"
✗ "Temp fix"

Documentation

Document complex rules:

{
  "name": "Complex Multi-Step Auth Flow",
  "description": "Simulates OAuth flow for testing:\n1. Redirects login to mock\n2. Returns fake token\n3. Validates with delay",
  "tags": ["auth", "oauth", "testing"],
  "rules": [...]
}

Conclusion

Requestly is an invaluable tool for modern web development and API testing, offering unprecedented control over HTTP traffic without requiring code changes. Its browser-native approach makes it accessible and powerful, while team collaboration features ensure entire teams can benefit from shared debugging strategies.

Whether you’re testing API integrations, debugging CORS issues, simulating network conditions, or developing frontend features independently, Requestly provides the flexibility and power to manipulate HTTP traffic exactly as needed.

The combination of ease of use, powerful features, and seamless browser integration makes Requestly an essential addition to any developer’s or QA engineer’s toolkit. Start with simple redirects and header modifications, then explore advanced features like script injection and session recording to unlock the full potential of HTTP traffic manipulation.