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

HTTP(s) Headers are key-value pairs that can be used by the client or server 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 pass 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 browser extension that lets you intercept & modify headers and HTTP requests and responses.

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

When do you need to modify headers?

We have so far talked about headers and how to use Requestly to modify headers. However, lets first talk about why and when do you need to modify the network headers.

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 clickjacking. Using Requestly, you can modify this header to allow the website to be opened in the iframe.

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.

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.

Find more information here.

To add custom request headers

Custom request headers can be added to manage features. Generally, the x-custom-header convention is followed.

To change Content-Type of the requested resource.

‍The content-type header describes what is in the body of a message. We can change the Content-Type for a request to determine acceptance of either application/xml or application/json.

To test sites in production

To test sites in production, one can use the local backend with the production site, but here the browser can give CORS errors.

The following response headers can be modified using Requestly to test sites in production.

• Access-Control-Allow-Origin
• Access-Control-Allow-Methods
• Access-Control-Allow-Headers
• Access-Control-Allow-Credentials

Modifying Headers using Requestly

For Chrome

1. Install Requestly Chrome extension.
2. Go to Requestly Rule Selector, and select Modify Headers option‍.
3. Enter the Request URL for which you want to modify the request or responder 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 3 modification options available.
   a. Add Request/Response header adds a new <header, value> to existing headers.
   b. Remove 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.

Use Requestly with Safari, Android or iOS

Download the Requestly desktop app to modify headers on Safari, Android, iOS and a lot more!

For custom Android builds

You can setup the Requestly Android Debugger to modify headers in your android app. Integrating the debugger sdk with your existing codebase is less than 10 lines of code. Once that's done, you can create custom debugging builds of your app.

Requestly offers more than just modifying HTTP headers; you can mock API responses, redirect URLs, delay/throttle requests, insert custom scripts, and much more!

‍

We regularly share insights about developer tools and how readers can improve their web debugging process. Do follow us in Medium & Twitter to stay tuned with the latest updates.

Until then, happy Debugging 🚀

‍