How to modify Headers in HTTP(s) Requests & Responses in Chrome, Firefox & Safari

Introduction

In the ever-evolving digital landscape, web developers and power users are constantly seeking ways to customize their browsing experiences to suit their specific needs. One powerful technique to achieve this is by modifying headers in HTTPS requests and responses. HTTP(s) Headers are key-value pairs that the client or server can use to pass additional information along with an HTTP(s) request or response. An HTTP(s) header consists of its case-insensitive name followed by a colon ":", then by its value.

The ability to modify the headers of the traffic that passes through your browser easily is what every developer would want to have. This is where Requestly comes into the picture. Requestly is an open-source, powerful platform that lets you intercept & modify headers and HTTP requests and responses.

Here's a quick demo video on Requestly's Modify Header rule works:

‍

Understanding HTTP Headers

The HTTP header plays a crucial role in facilitating communication between web servers and clients. These headers contain valuable metadata that enables the browser and server to exchange information effectively. By gaining a comprehensive understanding of HTTP headers, users can leverage their power to customize their web interactions further. This section delves into the nuances of HTTP headers, shedding light on various types and their significance.

When do you need to modify headers?

We have so far talked about headers and how to use Requestly to modify headers rule. However, let's first talk about why and when you need to modify the network headers. While browsers handle most headers automatically, there are instances where users may require customization. By modifying HTTP response headers, users can manipulate the behavior of web servers and clients, enabling advanced functionalities and enhanced browsing experiences. Modifying headers can be crucial for accessing restricted content or services on the web. It can also be used to simulate different environments for testing and development purposes.

Here are a few use cases where you would have to modify headers:

1. To solve CORS issues in local development & testing

As a web developer, you will want to see how code performs in the production site for testing, however you will be stopped by CORS errors here. You can modify certain response headers to test sites in production, overcoming these errors. This is essential for identifying real-world issues and ensuring the site's robust performance in the production environment.

2. To open websites in the iframe for testing

In some cases, you might want to open pages in the iframe. However, response headers like X-Frame-Options and Content-Security-Policy won't allow it to prevent cross-site scripting attacks. Using Requestly, you can modify this header to allow the website to be opened in the iframe. This modification can be essential for developers and testers who need to assess website behavior within an iframe. It ensures seamless navigation and interaction within the iframe for comprehensive evaluation.

3. To remove Content-Security-Policy

The content security policy response header is added to the website to prevent the injection of external scripts into the sites. However, while testing, you may want to inject scripts to test the behavior of the website. In those cases, Requestly can be used to remove the CSP response header. This is crucial for conducting thorough security and functionality testing on websites. It allows developers to identify and address potential vulnerabilities and issues.

4. To access the Kubernetes dashboard by modifying the Authorization header

You can access the Kubernetes dashboard by simply passing Authorization: Bearer <token> in every request to Dashboard. Requestly enables you to modify the header quickly. This ensures secure and authorized access to the Kubernetes dashboard for efficient management and monitoring. It eliminates unauthorized access, enhancing the security of the Kubernetes environment.

You can find more information here.

5. To add custom request headers

Custom headers can be used to implement additional security checks and validations. They can also be used to pass additional information to the server for processing requests. Custom request headers can be added to manage features. Generally, the x-custom-header convention is followed.

6. To change the Content-Type or Accept-Encoding of the requested resource.

‍Altering the Content-Type for a request to determine acceptance of either application/xml or application/json is achievable with Requestly. This modification ensures that the server processes the request as intended, ensuring accurate responses. It aids in ensuring compatibility and proper formatting of the request and response.

Modifying Headers using Requestly

Requestly is available as both browser extension for all major browsers such as Chrome, Firefox, Safari, Brave, etc. and also as a desktop app. In this scenario, we will see how we can modify the header by using the browser extension.

For Chrome and Firefox

Installing the Requestly browser extension allows you to modify HTTP request headers easily by following a few simple steps. You can also define multiple header modifications for the same URL, offering flexibility in testing and development.

1. Install Requestly browser extension.
2. Click New Rule and select Modify Headers rule.
3. Enter the Request URL for which you want to modify the HTTP request headers. You can also leave this empty; it will apply the modification to all the URLs in your browser.
4. Add Request or Response headers you want to modify. There are three modification options available.
   a. Add Request/Response header adds a new <header, value> to existing headers.
   b. Remove the Request/Response header and removes the <header> from existing headers.
   c. Override Request/Response header option only modifies the existing header. If the header doesn't exist, It won't add a new header.
5. You can also define multiple header modifications for the same URL.

For Safari and other platforms

You can use Requestly desktop app since it's browser agnostic and allows you to modify headers in Safari, Android and more. It also lets you create rules to modify headers directly from the traffic table making the header modification seemless.

Conclusion

In conclusion, Requestly stands out as a comprehensive solution for modifying HTTP headers, offering a range of functionalities beyond just header modification such as redirect URLs, delay/throttle requests, insert custom scripts, session replay for faster debugging and mock server and API Client for testing API endpoints. Enjoy seamless and enhanced debugging experience with Requestly!

Happy Debugging 🚀