With X-Frame-Bypass javascript you can show iFrames that uses same-origin policy and blocks iframes on other websites (X-Frame-Options)

X-Frame-Bypass: https://github.com/niutech/x-frame-bypass

X-Frame-Bypass is a Web Component, specifically a Customized Built-in Element, which extends an IFrame to bypass the X-Frame-Options: deny/sameorigin response header. Normally such headers prevent embedding a web page in an <iframe> element, but X-Frame-Bypass is using a CORS proxy to allow this.

Web Component extending IFrame to bypass X-Frame-Options: deny/sameorigin

Example: YCombinator blocks iFrame (refused to connect)

Example Solution, iFrame bypassed

Usage

1. (Optional) Include the Custom Elements with Built-in Extends polyfill for Safari:

    <script src="https://unpkg.com/@ungap/custom-elements-builtin"></script>
   

2. Include the X-Frame-Bypass JS module:

    <script type="module" src="https://unpkg.com/x-frame-bypass"></script>
   

3. Insert the X-Frame-Bypass Custom Element:

    <iframe is="x-frame-bypass" src="https://example.org/"></iframe>

Codepen Example by me: https://codepen.io/tosunkaya/pen/GRdwKaY

<script src="https://unpkg.com/@ungap/custom-elements-builtin"></script>
<script type="module" src="https://unpkg.com/x-frame-bypass"></script>
<iframe is="x-frame-bypass" src="https://google.com"></iframe>

Alternative CORS Proxies

Using Cors Proxies like:

https://codetabs.com/cors-proxy/cors-proxy.html
https://api.codetabs.com/v1/proxy/?quest=https://google.com

https://thingproxy.freeboard.io/fetch/https://google.com

https://cors.sh/

https://cors-anywhere.herokuapp.com/

‘https://yacdn.org/proxy/’,
https://jsonp.afeld.me/?url=

cors.io: https://cors.io/?https://google.com

https://corsproxy.github.io/ https://crossorigin.me/https://google.com

Alternative: Requestly

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

https://requestly.io/blog/bypass-iframe-busting-header/

Blockers in iframe embedding

Today’s internet makes it quite difficult to add some content inside an iframe on an existing website. This is done to prevent security risks like clickjacking

There are two main methods through which mordern websites achieve this are as follows

X-Frame-Options

Some websites specify X-Frame-Options in the response header when they want to have control over wher there content can be embedded inside iframe.

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

1. DENY: Browser will not render page inside frame irrespective of the domain of parent page.
2. SAMEORIGIN: Browser will render page inside iframe only if page domain is same as domain of parent page.

frame-ancestors directive in CSP Header

Similar results can be achieved by setting the Content-Security-Policy to use frame-ancestors directive

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

Here, the source can be one of the following

1. URL : Specify parent’s source
2. ‘self’ : Refers to the source from where the content is generated
3. ‘none’ : Indicates an empty set. This has the same effect as specifying X-Frame-Options as DENY

---

But what if we need to open sites in iframes for internal tooling, experimentation purposes or development & testing scenarios?

Remove Response Headers using Requestly

Requestly is a simple and 1-click solution using which you can bypass response headers and enable embedding sites in Iframe

Using the modify headers rule https://requestly.io/feature/modify-request-response-headers/, we can easily add, modify and remove any Response Headers before it reaches the browser.

You only need to install the Requestly browser extension https://chrome.google.com/webstore/detail/requestly-modify-headers/mdnleldcmiljblolnjhpnblkcekpdkpa and set this rule

No further setup is required