Requestly is now Open Source ūüöÄ
May 28, 2023
Use Cases
min read

How to embed iframes by bypassing X-Frame-Options and frame-ancestors directive

Sachin Jain
Founder & CEO - Requestly

Nowadays, adding content inside an iframe on an existing website is difficult, so it can prevent security risks like clickjacking. Hence, you can follow the below two methods to embed iframes on a website:

Remove X-Frame-Options

Some websites specify X-Frame-Options in the response header to control where the content can embed inside an iframe.

There are two possible values for X-Frame-Options:

  • DENY: The browser will not render a page inside the iframe, irrespective of the domain of the parent page.
  • SAMEORIGIN: The browser will render a page inside the iframe only if the page domain is the same as the domain of the parent page.

You can load the iframe on a website by removing the X-frame options from the response header.

Add the 'frame-ancestors' directive in CSP Header

You can achieve similar results by setting the Content-Security-Policy to use the frame-ancestors directive.

Using the directive Content-Security-Policy: frame-ancestors <source1> <source2> in the CSP headers, you can set multiple sites as parents for the iframe. 

Here, the source can be one of the following:

  • URL: Specify parent's source
  • 'self': Refers to the source from where the content is generated
  • 'none': Indicates an empty set. It is similar to specifying X-Frame-Options as DENY.

However, if you need to open sites in iframes for internal tooling, experimentation purposes, or development & testing scenarios, you will need a tool like Requestly to do the job.

Remove response headers using Requestly

Requestly is a browser extension that lets you Modify Headers, Redirect URLs, Switch hosts, Mock API responses, Delay network requests, Insert custom scripts, and do much more. Using the modify headers rule, we can easily add, modify and remove any response Headers before it reaches the browser.

Install the Requestly browser extension and set this rule like it is shown in the below screenshot to bypass the content security policy.

You can also share this rule with your colleagues by creating a shared list like this one.

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, setup redirects (Map local, Map remote) and use Requestly sessions for faster debugging.

On this page


Ready to get started?

Empowering frontend developers to achieve more in development, testing & debugging workflows.