niutech / x-frame-bypass Goto Github PK

View Code? Open in Web Editor NEW

648.0 22.0 262.0 16 KB

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

Home Page: https://niutech.github.io/x-frame-bypass/

License: Apache License 2.0

HTML 27.79% JavaScript 72.21%

x-frame-options iframe web-component custom-element

x-frame-bypass's Introduction

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.

Usage

(Optional) Include the Custom Elements with Built-in Extends polyfill for Safari:
```
 <script src="https://unpkg.com/@ungap/custom-elements-builtin"></script>
```

Include the X-Frame-Bypass JS module:

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

Insert the X-Frame-Bypass Custom Element:

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

Demo

See the Hacker News using X-Frame-Bypass. Supported are current versions of Chrome and Firefox browsers. Edge and Safari do not support Customized Built-in Elements yet.

License

x-frame-bypass's People

Contributors

Stargazers

Watchers

Forkers

jpluimers programmedboi gradedwarrior robyfirnandoyusuf edwardjrp tommy815ruler terzoc mahboubii se4u actionanalytics tuangeek kidgodzilla matheustp nmazuz phi-line n-0mad cc18dd kmakoto22 cynthiawilliamsa cyberscorpion vrajur gransfall shotskydiver yehgdotnet lokesh75way halosalman dollabi11z asing012 ntgitdude23 woow20 pineapplebox raymelon orangefixdev somenathdas1991 skeeran gretchenweeners maechabin berenmillidge abdelhak-bahri qls0ulp vapormusic socioprophet jolzee christru suneels94 dorcasctk jcrashkit caksup churongcon anubrata issachareli michaelpidd letterstothesaints ultrageek lidlaunch gothack06 danielsnider wingysam oldalt ultracdn supercoder-m-d amitavarc datanotion godwin-l mrisfahuddin vovch far11ven dreamdeveloper nguyenanhtu1703 seagalputra maxired simopisa criptalis prynix heliogiroto advuianime joeyfenny himansh-nagar shuang854 jsmithonline82 ivanlondono parasharrajat yanpengwuiot totalbug92 mindsgaming allenb2 emwillwei flashfoxter fotidim gabjauf majordomo-systems sdasdasdasdd raybox94 ptesny tamersp25 jackbotein rmarnold ankamma-chowdary bitcoinben1 canvasbycourt

x-frame-bypass's Issues

Login page can be shown in iFrame, but can't login

I want to show a webpage (https://my.sonnen-batterie.com/login) in an iframe. The website is set 'X-Frame_options = sameorigin', so I try to use x-frame-bypass to achieve it.

You can login to this webpage with 'demo' as user name and password.

The source code I used in Html:

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

<body>
     ........
     <iframe id="sonnen" is="x-frame-bypass" src="https://my.sonnen-batterie.com/login" width="1000" height="600" frameborder="0" style="border:0" allowfullscreen="true"></iframe>
     ........
</body>

Result:
The login page can be shown, but when I input username=demo, password-demo, then click the login button, nothing happens and the page is not changed. The login failed with the correct username/password.

Error message:

I'm a beginner at front-end development, I use Labview NXG to develop this page. Could you help me or tell me how to solve this? Thank you very much.

Set user agent?

When trying to access Twitter, I get this error:

This is the legacy version of twitter.com. We will be shutting it down on 1st June, 2020. Please switch to a supported browser, or disable the extension which masks your browser. You can see a list of supported browsers in our Help Center.

Is there any way to set a UA string?

Doesn't keep the session active

The bypass works perfectly but i just notice that i have have an active account in the browser and open this in another tab, it pops the log in screen, meaning it doesn't have the already active session. This makes the bypass totally harmless in most of the websites.

run action on src change, get src

Is there a way to obtain the "internal" source? Sorry if this doesn't belong here, I'm relatively new to Github.

Half-working on Google Maps

Repro:

Replaced new.ycombinator.com with maps.google.com. It loads well, I can drag the map, but it constantly shows the Loading indicator below, and I cannot search (loading forever).

Any ideas how to fix this?

Twitter doesn't work

When I try to use this on a Twitter page, Twitter gives me the error "Sorry, that page doesn’t exist!"

<iframe is="x-frame-bypass"
	src="https://twitter.com/search?q=from%3Aedent%20(until%3A2020-01-09%20since%3A2020-01-08)&src=typed_query&f=live"
	width="256" height="3072"></iframe>

cant play video html5 and live stream

i have iframe website live tvs working but cant play video

Doesn't work in Chrome extensions

I tried to load https://news.ycombinator.com/ into a simple extensions popup, but got this error:

steam doesnt work

steam doesnt work sadly

New proxy didn't show in unpkg url

I saw there is a change on proxy but I cannot see in the unpkg url (https://unpkg.com/x-frame-bypass)
Would you please check? Thanks.

Loading Spacedesk breaks CSS

I was testing this script when loading http://viewer.spacedesk.net in an iframe. But when I use it, the CSS seems to have been removed. Any way to fix this?

[Request] Make proxy usage optional through an attribute

It looks like you could call .load directly and do this but it would be nice to have this possible with the src= value as well. In fact the proxies could also be configurable in this manner as well.

For example adding a proxies attribute with a space-separated list of proxies (if you make it blank, no proxies are used).

This would be useful for using your own proxy, or in environments where a proxy is not required for CORS bypass (eg Chrome extension pages with the proper host_permissions).

Should warn users about privacy implication

I recommend the README file have a section warning users about possible privacy implications.

All the traffic is routed through a proxy server in order to bypass CORS restrictions. I recommend listing these proxy servers clearly in the README and making it clear all traffic will pass through them even for HTTPS (I think? I don't need the proxy feature so I disabled it for my own use). Also this may weaken CORS security, not sure. If so the user should be notified about the implications so they can make an informed decision about whether x-frame-bypass is a good fit for their project or not.

it does not work for microsoft online word

thank you very much for your great module, but it's not working for microsoft office word online for example:

https://onedrive.live.com/edit.aspx?resid=5D099B6B963F20FB!118&ithint=file%2cdocx&wdOrigin=OFFICECOM-WEB.START.MRU

I cloned the repo to local and update index file to

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="X-Frame-Bypass: Web Component extending IFrame to bypass X-Frame-Options: deny/sameorigin">
	<title>X-Frame-Bypass Web Component Demo</title>
	<style>
		html, body {
			margin: 0;
			padding: 0;
			height: 100%;
			overflow: hidden;
		}
		iframe {
			display: block;
			width: calc(100% - 40px);
			height: calc(100% - 40px);
			margin: 20px;
		}
		img {
			position: absolute;
			top: 0;
			right: 0;
		}
	</style>
	<script src="https://unpkg.com/@ungap/custom-elements-builtin"></script>
	<script src="x-frame-bypass.js" type="module"></script>
</head>
<body>
	<iframe is="x-frame-bypass" src="https://onedrive.live.com/edit.aspx?resid=5D099B6B963F20FB!118&ithint=file%2cdocx&wdOrigin=OFFICECOM-WEB.START.MRU"></iframe>
	<a href="https://github.com/niutech/x-frame-bypass"><img src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>
</body>
</html>

Cannot navigate inside iframe

I have encountered a new issue after successfully loading https://www.hackernews.com/ inside an iframe:

This prevents navigation inside this iframe, which makes the site unusable. How do you guys work around this?

Undocumented proxies need to be configurable

This sends requests by one of 3 external proxies:

x-frame-bypass/x-frame-bypass.js

Lines 68 to 70 in 855835e

 'https://cors.io/?', 

 'https://jsonp.afeld.me/?url=', 

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

This means it won't work on a VPN, isn't suitable for any situation where the other origin is returning sensitive or protected data, and allows hacks from any of those proxy sites should any of them choose to inject JS into the content.

The control needs to allow the proxies to be specified and overwritten.

In addition the documentation needs to make clear that these external proxies are being used and the consequences: only GET works, cookies are not included, unknown 3rd party gets chance to copy the content and add whatever they want before your users run it.

Firefox: Links are blue rather than styled by page

Even on the HN demo, link colors are not styled. It works correctly in Chrome. Any idea why?

Not working...

Please update.

CORS Issue with Angular

Access from origin has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
How do I can resolve it?
I'm implementing it in angular 9.

The Iframe take 30s to show him

Hi, i want to use x-frame-bypass with the website e-plans, but when i want to change a page or accept cookie, i have a lot of error, and the iframe reload, i don't know how to patch that, but i gave you a screenshot

Detection only & open in new tab

Hi,

I've just found your code and must say this is a very clever solution.
However there are some caveats which you should mention like: images, fonts & other external requests won't load.

So I think the best solution would be to simply DETECT if the URL which is restricted from being shown inside iframes, then in the iframe window simply generate a simple button which reads "CLICK HERE TO OPEN IN A NEW TAB" instead of proxying the request.

That would be great as an additional functionality to your class.

Loading iFrame in iFrame doesn't work

Attempting to load an iFrame in an iFrame makes this patch completely nonfunctional. https://4194304.github.io/desktop (Open the menu and click Settings, then game over)

PayPal does not work.

This will be amazing if it could work with PayPal. Thank you!

what is fix to this?

Great bypass. but it can bypass almost any site even those who have DENY and SameOrigin.

what should be fix to it?

it fails for this noaa.gov

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

  </head>
  <body>
  
 <iframe id="SkewT" is="x-frame-bypass" width="100%" height="100%"
            src="https://rucsoundings.noaa.gov/gwt/?data_source=Op40&latest=latest&layout=off&n_hrs=20.0&airport=KJFK"></iframe>
			</body>
			</html>

Try accessing this url directly https://rucsoundings.noaa.gov/gwt/?data_source=Op40&latest=latest&layout=off&n_hrs=20.0&airport=KJFK

"Email Protected" Link Not Working and Google Photos Not Working

My shared photo album below is not working when I put the link in.
https://photos.google.com/share/AF1QipMmlDPgRHV08u0tOWVBPug989bPb_aoe4fw5Mg-FqfS6VHLD2ZvDLmVnaoCEVYpfA?key=XzQ3TWZNanBNNkdicFFHal9pU3JZcWxEVGNxblVB

Additionally, when I use it on my website, for emails, it's saying "Email Protected" and the link to open the email is not working. However, on the original website, the email link is working perfectly fine.

Doesn't work with Quora

Am I using it correctly? This works for many sites, but unfortunately, it doesn't with Quora.

Try copying and pasting the following into an HTML file:

<html>
<script type="module" src="https://unpkg.com/x-frame-bypass"></script>
<iframe name="Framename" sandbox="allow-forms allow-scripts" is="x-frame-bypass" src="https://www.quora.com/Why-don-t-people-take-INTJ-advice" frameborder="0" style="width: 100%; height: 500px;"> </iframe>
</html>

Login page doesn't load in iFrame

Oh no!

Not working with Vue component

Apologies if this is not a bug:

The code works fine in Chrome for me, on a localhost server, unless I try to integrate it into a Vue application. I use Vue with a CDN, with HTML and JS separated. I get "Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option."

I tried adding 'x-frame-bypass' : xframe to my Vue's components list, which throws an error about "xframe'. I then replaced xframe with iframe, but the same type of error shows up. I also embedded x-frame-bypass.js into my own Vue app's JS file, etc. But either my Vue code works and X-Frame-Bypass doesn't, or vice versa.

Now here's the weird thing. At the moment, I have the following situation:

Chrome browser (fairly recent): Vue code works, xframe works but won't display due to the aforementioned complaint.
Firefox browser: Vue code doesn't work, xframe displays fine
Stack (Chromium) browser: same as with Firefox

Unfortunately, I don't know enough about extending elements to know if this is actually a bug or just appears to be. So apologies in advance

Not Working in React App.

I've added the script tag in the head of index.html:
<script type="module" src="https://unpkg.com/x-frame-bypass"></script>
The iframe tag:
<iframe is="x-frame-bypass" title="activeArticle" src={activeArticle.website_url} width="700px" height="400px" ></iframe>
It's showing loading but i've waited long enough. Any solution to this?

about:srcdocs Error

whenever i try to login through iframe it works for a split second then responds with "about:srcdocs"

X Frame Bypass not working at all.

This is not working at all. I was using this to make a web browser for AaronOS. Failed to access any websites that restricts iFrames

Unable to login to a websites inside x-frame-bypass

Is it possible to login to a page inside an iframe? I tried the x-frame-bypass component with sites like twitter.com and linkedin.com but the component broke.

How can this be used in iframe elements injected by JS

I am trying to use document.createElement('iframe') and setAttribute('is','x-frame-bypass') to create a dynamic iframe. But not sure how to make it work on the dynamic injected iframes.

Scam Alert: False Vulnerability Reports from "Security Researchers" Using X-Frame-Bypass Library

Hello everyone,

I recently received an email from a "security researcher" who used the X-Frame-Bypass library to report an "X-Frame-Options bypass bug". They were expecting a bug bounty payment.

I want to draw attention to this: the library DOES NOT actually bypass X-Frame-Options; it only creates the illusion of a bypass. Because traffic is proxied through a different domain name, session data and cookies are lost. This "bypass" is entirely harmless.

Be cautious of bug bounty scams and fraudulent security researchers.

cors.io no longer working

All requests to https://cors.io/ fail.

https://github.com/niutech/x-frame-bypass/blob/master/x-frame-bypass.js#L68

CORS problem

I have already set to enable from all origins, but still having this problem. Any tips how handle this eror ?

Tried your default code plus my URL not working at all

CHeck screenshot : https://www.dropbox.com/s/84f0i2d9azjyvyg/Screenshot%202019-03-07%2012.29.38.png?dl=0

keeps loading foreever

I tried using the Xframe Bypass but it keeps loading and doesn't show up the site.

scripts loaded by the client after page load

When the page tries to load scripts, it can fail due to other cross-origin errors. An example would be youtube. Is there a way to bypass that as well?

Doesn't work on some sites like quora.com and medium.com

A few sites like those mentioned end up sending me to a blank page with about:srcdoc or something.

Fonts don't load

Generally, this script works well. But it doesn't load the fonts from one website.

I get reports like this:
Access to font at 'https://www.example.com/css/fonts/font.otf' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

font.otf:1 Failed to load resource: net::ERR_FAILED

x-frame-bypass.js:68 Cannot load X-Frame-Bypass: Error: 400

Cannot load X-Frame-Bypass: Error: 400 at x-frame-bypass.js:78:31

x-frame-bypass.js:76 GET https://api.codetabs.com/v1/proxy/?quest=http://127.0.0.1:5534/matrix-js-sdk/element-web/testing2.html

https://yacdn.org/proxy/http://127.0.0.1:5534/matrix-js-sdk/element-web/testing2.html net::ERR_CONNECTION_TIMED_OUT

it's work not with Facebook

Access to fetch at from origin 'https://xy' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Instagram problem

I cant use it on instagram. Can you help me ?

Web WhatsApp does not load completely

https://web.whatsapp.com/

It's not working with Angular component ?

Hello, it's working in angular inex.html file, but when trying to implement inside the component it's throwing this error - "Refused to display 'https://in.linkedin.com/' in a frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self' ".
so, how to achieve inside the component.

	'https://cors.io/?',
	'https://jsonp.afeld.me/?url=',
	'https://cors-anywhere.herokuapp.com/'