Testing an API Replacement with mitmproxy and Chrome

mitmproxy.md

Redirect API calls from a live URL to localhost when path signatures are different

Introduction

When developing a new version of an API that's meant to replace an existing one, you may need to test the new API using the live URL to ensure proper functionality. However, if the path signatures of the new API are different from the existing one, using /etc/hosts to redirect the calls won't be sufficient. In this article, we will demonstrate how to use mitmproxy to redirect API calls from the live URL to your localhost, allowing you to test the new API with different path signatures.

Prerequisites

Before we begin, make sure you have the following software installed:

• mitmproxy: Download and install mitmproxy from their official website.
• Google Chrome: Download and install Google Chrome if you haven't already.

Setting up mitmproxy

mitmproxy is an interactive HTTPS proxy that can be used to intercept, inspect, and modify HTTP(S) traffic. In this scenario, we will use it to redirect API calls from the live URL to our localhost.

First, we need to create a Python script that will handle the redirection. Create a file named proxy.py and paste the following code:

from mitmproxy import http

def request(flow: http.HTTPFlow) -> None:
    target_url = "https://example.com/.netlify/functions"
    local_url = "http://localhost:3000/api/.netlify/functions"

    if flow.request.url.startswith(target_url):
        flow.request.url = flow.request.url.replace(target_url, local_url)

def response(flow: http.HTTPFlow) -> None:
    if flow.request.method == "OPTIONS":
        flow.response.headers["Access-Control-Allow-Origin"] = "*"
        flow.response.headers["Access-Control-Allow-Methods"] = "GET, POST, PUT, DELETE, OPTIONS"
        flow.response.headers["Access-Control-Allow-Headers"] = "Content-Type, Accept, Authorization, X-Requested-With"

This script checks if the request URL starts with the target URL. If true, it replaces the target URL with the local URL, effectively redirecting the API call.

Next, run mitmweb with the proxy.py script and specify the listening port (e.g., 8081):

mitmweb -s proxy.py --listen-port 8081

Configuring Chrome to use mitmproxy

To make Chrome use mitmproxy as a proxy server, follow these steps:

1. Open Chrome and go to chrome://settings.
2. Scroll down and click on "Advanced" to reveal more settings.
3. Scroll down to the "System" section and click on "Open your computer's proxy settings."
4. In the "Network" settings, click on "Advanced."
5. Scroll down to the "Proxies" section and check the "Web Proxy (HTTP)" and "Secure Web Proxy (HTTPS)" boxes.
6. Set both fields to localhost and the port number to 8081 (or the port number you chose when starting mitmweb).
7. Click "OK" and then "Apply" to save the changes.

Importing the mitmproxy certificate into Chrome

To avoid SSL errors, we need to import the mitmproxy certificate into Chrome. Here's how:

1. In Chrome, navigate to http://mitm.it/ and click on the "Other" link to download the mitmproxy-ca-cert.pem file.
2. Double-click the downloaded mitmproxy-ca-cert.pem file to open the "Keychain Access" app.
3. In the "Keychain Access" app, click on the certificate to select it.
4. Press ⌘I (Cmd + I) or right-click on the certificate and choose "Get Info" to open the certificate information window.
5. Expand the "Trust" section by clicking on the triangle next to it.
6. Set "When using this certificate" to "Always Trust" and close the certificate information window.
7. You will be prompted to enter your macOS password to confirm the change. Enter your password and click "Update Settings."

Now, Chrome should trust the certificate generated by mitmproxy, and you should be able to access https://example.com/.netlify/functions. The request should be redirected to http://localhost:3000/api/.netlify/functions as intended.

Testing the redirection

With everything set up, you can now test the redirection by making API calls to the live URL in Chrome. The requests should be intercepted by mitmproxy and redirected to your localhost, allowing you to test the new API with different path signatures.

Reverting changes and security considerations

When you're done testing, it's essential to remove the mitmproxy certificate from Chrome's trusted certificate authorities and revert the proxy settings. This helps maintain the security of your browser and system. Follow these steps to do so:

1. Go back to the "Keychain Access" app, find the mitmproxy certificate in the "login" keychain, right-click it, and choose "Delete."
2. Open Chrome's proxy settings as described in the "Configuring Chrome to use mitmproxy" section.
3. Uncheck the "Web Proxy (HTTP)" and "Secure Web Proxy (HTTPS)" boxes, click "OK," and then "Apply" to save the changes.

Conclusion

Using mitmproxy with Chrome provides a powerful and flexible solution for testing an API replacement when the path signatures are different. This approach allows you to intercept and redirect API calls from the live URL to your localhost, making the testing process more efficient and reliable. Explore other potential use cases for mitmproxy to make your development and testing processes even more streamlined.