

They carry data about the data being transferred. That was when I first got to witness the power of network headers. That was when I stumbled upon Requestly extension which gave me the feature to modify the X-frame-options header by matching the page URL and hence allowing me to override the X-frame-options header when debugging. It was evident that I needed to override the X-frame-options header to allowall or remove it altogether. It was very important to load the page in iframe, I was wandering around the internet to find a way to load it. Also, the content-security-policy header has frame-ancestors directive which prevents this. I observed that most of the websites don’t work in iframe due to x-frame-options and content-security-policy headers.Īlmost all websites have a header X-frame-options set to deny or sameorigin due to which the browser does not allow to load the webpage in an iframe or doesn’t when any cross-origin request tries to load it in an iframe. I tried with loads of websites to see how they behave in iframe. This was being done by loading the page in iframe and giving various options to the user on top of it. I was working on an application that opened the provided webpage and then give the user an option to modify elements, add events, add analytics, and so on. Modifying Headers: How Can This Be Helpful? A header can have multiple values which are separated by commas. Field names are case insensitive but field values are case sensitive. An HTTP(s) header consists of a case-insensitive name followed by a colon ( :), then by its value. They hold additional information about the data being sent. 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. You can modify headers by using browser extensions or proxy apps (such as Charles and Proxyman) that intercept the request and let you modify the response by including the headers.īut first, let’s start at the beginning.

There are various methods to modify headers. In this article, Nafees Nehar explores some methods which allow modification of headers in an automation testing setup. It allows control over your application as one can bypass authentication, set cookies, and so on. To be able to modify headers in a testing environment is a great thing to have.
