I am building a PWA with React and I want to open an external website in my app (like e. g. in the Facebook app when you click on a link the external site just slides in from the bottom in an extra window).
As my app is a PWA I could potentially use an iframe for the same effect but of course this approach is limited due to x-frame-options.
Are there any other options to achieve the desired behavior?
I don't think there are other ways, iframe is the exact tool to accomplish what you want. x-frame-options exists for security reasons, if some websites don't allow other websites to load it via an iframe then they have reasons for it. The correct way of enabling such iframe is to get this particular website's permission, i.e. they should include your domain into X-Frame-Options as a trusted party.
Related
I have a blog on tumblr, and I am trying out the website with SSL. Now with Chrome and possibly other browsers, any images and scripts that are not loaded using HTTPS are automatically blocked, and I lose the happy little green lock icon in the address bar. I am able to edit the HTML of the theme, however there are too many external scripts that are used to load images (and other scripts) to be able to weed out and fix every HTTP request. Obviously, I don't have access to the web server settings for tumblr.com or I could have easily configured HTTPS redirects or something.
I was wondering if there would be any way to prevent the HTML and other included scripts from making HTTP requests through the use of javascript. The website appears and functions just fine without the blocked elements, and I just want the lock icon to show my visitors that it's a safe website.
I have no intention of advertising my blog here, as I'm sure it is against the user policy on this forum. That being said, if it is helpful for troubleshooting reasons, I can post the link if requested.
I have a page in my Ionic app that displays a WebView (with an iframe) in it, the problem is that it works well only if is a normal HTTP web page, it doesn't work with almost any HTTPS page like Google, Twitter, etc. The only HTTPS page that seems to be working in the app is https://www.httpsnow.org/ for some reason.
The code line is simply this:
<iframe src="https://www.example.com/" height="400px" width="350px"></iframe>
I need to display HTTPS WebViews in my app, preferably without having to use Cordova's inappbrowser. Is there a way to do it with iframe or otherwise?
Most larger organizations, including Google, Twitter, etc. set an X-Frame-Options header to SAMEORIGIN to prevent framing, as it has been used abusively in the past.
https://developer.mozilla.org/en-US/docs/Web/HTTP/X-Frame-Options
For security reasons, this is not something you can override.
You can't set X-Frame-Options on the iframe. That is a response header set by the domain from which you are requesting the resource .
Try adding Cross-origin-allow in your source domain to accept all domains requests.
OR
Instead of an iframe, redirect the user to use your link on their browsers instead from the app (which is non user friendly).
We had a similar issue with an ionic app for a chatbot, connecting to a Django framework chatbot engine backend. For the view(s) in which it was secure to do so, we worked around this issue by decorating the view with: #xframe_options_exempt This drops the X-Frame-Options from the response headers.
Django docs info here: https://docs.djangoproject.com/en/3.0/ref/clickjacking/#setting-x-frame-options-for-all-responses
There are other ways to resolve this issue more securely.
I am working on adding a new functionality to our web application. For this I have to load a web page from a seperate domain in an iframe in my web page and intercept all the HTTP calls made by the iframe in the javascript of my web page.
Can you please let me know how I can achieve this? I googled for this but couldn't find much information about this.
You cannot spy on a user's activity on other domains using an iframe. Browsers forbid it.
Imagine if I did that to your bank's website!
If you have the cooperation of the other site then you can communicate between domains, through frames, using postMessage.
A browser extension can ignore these restrictions (since it has to be installed by the user)
I've recently stumbled upon a website called Overlay101 which allows you to create tours for other websites.
I was very interested to see the technique they use to load the third party websites for editing.
When you type the address of the website, it is loaded as a sub domain of the overlay101.com website.
For example, if I type https://stackoverflow.com/questions/111102/how-do-javascript-closures-work - it is loaded as http://stackoverflow.com.www.overlay101.com/questions/111102/how-do-javascript-closures-work
I was wondering how is that subdomain creation achieved and I saw in the source code of the page that JavaScript in injected. I was wondering how was that possible too.
What intrigued me most is that Stackoverflow.com does not allow pages to be loaded within frames - I was wondering how they managed to load up the page so that tour popups could be added.
They simply use wildcard DNS entries to make all subdomains work. They then use the Host header to get the original domain name and download the HTML code of the site. Since they do this on the server side they do not need any frames etc.
On my JSF page I am trying to show some other website in an iframe and show its URL. I understand now that for security reasons I can only access the URL of the iframe if it is showing some site of my domain. So, I've found that problem a lot of times in the internet, but I couldn't find any solution. I don't want to read the content of the iframe, but only the URL.
Is there any solution for this requirement? Using an alternative to iframes? Frameset, browser in browser? Popup?
If you want to stick to the iframe option, I would test to see if the innerhtml of the iframe matches that of the website they are meant to reach. The innerhtml in webkit does seem to change as the user browses.
The only alternative I can think of is http proxying the web sites, changing the links to refer to your proxy, then telling them they win when the requested proxy URL matches that of the destination.