niutech / x-frame-bypass Goto Github PK
View Code? Open in Web Editor NEWWeb Component extending IFrame to bypass X-Frame-Options: deny/sameorigin
Home Page: https://niutech.github.io/x-frame-bypass/
License: Apache License 2.0
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
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?
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.
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.
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.
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:
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
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.
I tried using the Xframe Bypass but it keeps loading and doesn't show up the site.
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.
Even on the HN demo, link colors are not styled. It works correctly in Chrome. Any idea why?
This sends requests by one of 3 external proxies:
x-frame-bypass/x-frame-bypass.js
Lines 68 to 70 in 855835e
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.
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>
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?
steam doesnt work sadly
A few sites like those mentioned end up sending me to a blank page with about:srcdoc or something.
whenever i try to login through iframe it works for a split second then responds with "about:srcdocs"
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.
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.
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?
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.
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
Is there a way to obtain the "internal" source? Sorry if this doesn't belong here, I'm relatively new to Github.
This will be amazing if it could work with PayPal. Thank you!
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>
Hi. I'm making an PWA which will change the URLs dynamically and thanks to your amazing work I can load external sites. But after setting that is="x-fr..." attribute, I'm no longer able to change the src attribute.
Is there a way to change the url dynamically and still keep the is="x-frame-bypass" attr set?
.
thank you very much for your great module, but it's not working for microsoft office word online for example:
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>
Hello, forgive me if this is a noob question but how can i use this on react app ?
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.
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).
I am using chrome and put the module in the header above my javascript and jquery file, I've tried various ways of appending the iframe and is: attribute, however, no matter what I seem to do I keep getting the same error.
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.
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)
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.
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.
Great bypass. but it can bypass almost any site even those who have DENY and SameOrigin.
what should be fix to it?
i have iframe website live tvs working but cant play video
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?
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
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
<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
All requests to https://cors.io/ fail.
https://github.com/niutech/x-frame-bypass/blob/master/x-frame-bypass.js#L68
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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.