| 1 | # X-Frame-Bypass
|
| 2 |
|
| 3 | [](https://www.webcomponents.org/element/x-frame-bypass)
|
| 4 |
|
| 5 | X-Frame-Bypass is a [Web Component](https://www.webcomponents.org/introduction), specifically a [Customized Built-in Element](https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-customized-builtin-example), which extends an IFrame to bypass the [`X-Frame-Options: deny/sameorigin`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options) 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.
|
| 6 |
|
| 7 | ## Usage
|
| 8 |
|
| 9 | 1. (Optional) Include the [Custom Elements with Built-in Extends polyfill](https://github.com/ungap/custom-elements-builtin) for Safari:
|
| 10 |
|
| 11 | <script src="https://unpkg.com/@ungap/custom-elements-builtin"></script>
|
| 12 |
|
| 13 | 2. Include the X-Frame-Bypass JS module:
|
| 14 |
|
| 15 | <script type="module" src="https://unpkg.com/x-frame-bypass"></script>
|
| 16 |
|
| 17 | 3. Insert the X-Frame-Bypass Custom Element:
|
| 18 |
|
| 19 | <iframe is="x-frame-bypass" src="https://example.org/"></iframe>
|
| 20 |
|
| 21 | ## Demo
|
| 22 |
|
| 23 | See the [Hacker News using X-Frame-Bypass](https://niutech.github.io/x-frame-bypass/). Supported are current versions of Chrome and Firefox browsers. Edge and Safari do not support Customized Built-in Elements yet.
|
| 24 |
|
| 25 | ## License
|
| 26 |
|
| 27 | © 2019 Jerzy Głowacki under Apache License 2.0.
|