How to modify HTTP(s) Request & Response Headers in Chrome, Firefox & Safari using Requestly
HTTP(s) Headers are key-value pairs that can be used by the client or the 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 traffic that passes through your browser is a great tool to have.
You can delete certain headers to minimize online tracking, remove CSP while testing, test sites in production and so on.
Using Requestly, Headers can be added/modified by a simple series of clicks. All you need is to install Requestly extension in your browser.
Here’s a quick demo:
Step-by-Step Guide to creating Modify Headers Rule
1. Select Modify Headers option
From the Select Rule options, click on Modify Headers and click on Create Rule button.
2. Request URL
Define the Request URL (exact URL or URL pattern) on which you want to modify the request or response headers. You can also leave this empty in which case modification will apply to all URLs in your browser.
3. Select Request Headers or Response Headers
All Request Headers modifications go under the left tab and all Response Header modifications go under the right tab.
4. Different Modification Options
- Add Header
- Remove Header
- Override Header
Add Header adds a new <header, value> to existing headers. Remove header removes the <header> from existing headers. Override header option only modifies the existing header. If the header doesn’t exist, It won’t add a new header.
5. Define Multiple modifications
You can combine multiple header modifications for the same URL pattern defined in the rule.
Modify Headers in Safari
Download the Requestly desktop app to modify headers in safari and other apps.
When modifying headers is helpful?
Open websites in iframe for testing
Sometimes you need to open pages in iframe, but response headers like X-Frame-Options and Content-Security-Policy does not allow it to prevent clickjacking. Using Requestly, you can modify this header to allow the website to be opened in iframe.
Remove Content-Security-Policy
Content-Security-Policy response header is added to the website to prevent injection of external scripts but sometimes while testing it is required to inject scripts. Requestly can be used to remove CSP response header.
Access Kubernetes dashboard by modifying Authorization header
You can access dashboard, you simply need to pass Authorization: Bearer <token> in every request to Dashboard. Requestly enables you to quickly modify the header.
Find more information here.
Add custom request headers
Custom request headers can be added to manage features. Generally x-custom-header convention is followed.
Change Content-Type of the requested resource.
Test sites in production
To test sites in production, one can use 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 happens to be a powerful tool in the hands of the developer. There’s a lot that can be done than covered in this article.
Requestly offers more than just modifying http headers, you can mock API responses, redirect URLs, delay/throttle requests, insert custom scripts and much more!
More Examples
If you haven’t installed Requestly yet, please install it to modify request and response headers. Reach out to contact@requestly.io for any questions.
Happy Debugging 🚀
