How to modify the response body of HTTP requests?

Almost every website/app we interact with needs to make a call to the server to fetch its resources. Depending on its requirements, it can make requests such as an API, document, scripts (JS/CSS), etc. To make this request, the client makes a request using HTTP protocol, which then returns the content as the response body to the request. This content is then used to render the webpage.

During development, it becomes hard to modify the server's content repeatedly to check if the webpage is working properly. So in this article, we will explore how to change the response body of HTTP requests without making actual changes in the server content using Requestly Response Rule.

Use Cases

1. Testing APIs when the backend is not ready yet.
2. Test Application behavior when the response body is modified
3. Security Analysis to identify vulnerabilities in web applications

Modifying HTTP response body using the desktop app

Firstly, to change the response body, it’s recommended to download Requestly’s desktop app, which can modify any API/HTML/CSS/JS scripts. You can use the Requestly browser extension if you prefer a lightweight approach. The steps are explained later in the blog.

Let’s say you want to change the API which fetches all the trending articles on Hashnode. To do that:

1. Download and Install the Requestly desktop app.
2. Open the app, and click Connect Apps.
3. Choose the browser you want to launch.
4. Search for hashnode.com and select the request you want to modify. There are two ways to override the response body of a JS file: Static Override and Programmatic Override.
5. Right-click on the file and click Modify Response Body.
6. Select REST API in the pop-up and modify the response body, which was auto-filled. (You can modify GraphQL, HTML, CSS, and JS using the same process also)
7. Now save the rule by clicking Create Rule, and you will see the title of the 1st trending article changed to Modified by Requestly Response Rule after refreshing the page.

Modifying response body using Requestly browser extension:

If you wish to have a more lightweight approach, albeit not a straightforward one, you can install Requestly’s browser extension to modify the HTTP request body of a website.

1. Iinstall the Requestly browser extension.
2. Go to Rules, and create a Response Rule.
3. Select REST API and enter the request URL you want to modify.
4. Fill in the modified response body of the request.
5. Now save the rule by clicking Create Rule, and you will see the trending article changed to Modified by Requestly Response Rule after refreshing the page.

Requestly is an Open-Source frontend development platform with essential tooling & integrations that helps frontend developers write, test & debug their code 10x faster. Using Requestly, you can create mock API endpoints, test, validate & override API responses, modify request & response headers, set up redirects (Map local, Map remote), and use Requestly sessions for faster debugging.