How can a user retrieve the current iFrame URL (cross-domain) - javascript

TL;DR : How can a user copy the current URL of an iFrame (cross-domain) ?
I want to insert in a webpage of my domain an iFrame to be able to browse other partner websites (different domains). When the user finds the page he is interested in, he needs to transfer the information (URL of the page) to my website somehow. It is fine to ask the user to do it manually, I'm just looking for the more convenient way to do that.
I am aware that cross-reference scripting restrictions to prevent XSS attacks limit what you can do with an iFrame & javascript.
I have looked at questions like this one, but the answers seem old, and from what I understand they are all trying to automatize this process with javascript, but in my case I don't need that
EDIT :
I accept a manual solution for the user. ie, a browser-specific procedure (a solution that works on Firefox/Chrome would be fine). For example, it's possible to have a look at the browser history... but I'm looking for better solutions.

Some stuff I found
Firefox
Browser history
All URLs browsed inside iFrames will still be added to the browser history
Element info
When right-clicking the iFrame, there is an additional submenu that opens in firefox (in French called "ce cadre", must be something like "this frame" in english). Then you can click on "information for this frame", and it will show many info including the URL.
I'm still looking for more convenient ways to retrieve the URL. Ideally, a shortcut would be nice !

You should be able to do something like this
jQuery("iframe").get(0).contentWindow.location.origin
Use jQuery to find the desirable iframe then use .contentWindow.location.origin to get the URL.

Related

Google Chrome blocked redirect with window.top.location in iframe

I want to redirect my website from iframe to main url, here is my code:
window.setTimeout(function() {
window.top.location = jQuery("link[rel=canonical]").attr("href") + "#ref=shahrekhabar";
return false;
}, 100);
It works on Firefox but Google Chrome blocked this type of redirecttion.
I try with window.top.location.href and window.top.location.replace and window.top.location.assign but no luck.
The reason:
Some spam sites shows my site in iframe and I want to escape from them and I think redirection is good solution.
Edit to answer the TRUE question:
A common issue with stack overflow is that users will often ask how to do something they think solves the problem they are encountering, rather than just asking us how to solve the problem. We always appreciate hearing how you've gone about trying to solve your problem, but it's always best if we know that and what the root problem is. So in your case, given your comment on my answer, the question should have been:
Currently my website is being shown in iframes on sites that I have no control over? I'd like to prevent them from doing this, how can I do so? I'm currently trying to redirect my website from iframe to main url, but it won't work on Chrome. ... Rest of question ...
Given this question, my original answer is useless as:
You still can't and shouldn't be able to alter the URL of the parent window.
You don't own the sites showing your page in the iframe, which means you can't register a listener to handle the postMessage or CustomEvent.
Funny enough, what you're trying to do is the exact reason why chrome doesn't let you do it hahaha. But don't worry there is still a solution.
Introducing CORS!
CORS or Cross Origin Resource Sharing is the name for when a site on one domain accesses resources that aren't on the same domain. Doesn't matter who owns either site, if the two domains are different it's CORS. Now this is good for you because there are such things as CORS policies where you can prevent anyone from even accessing a resource on your domain if they make a CORS request. Keep in mind this will mean you can't display your site within an iframe on another one of your sites unless they're on the same domain, but it sounds like it may be worth it for you.
In case you're curious, unlike what you're trying to do, using CORS policy is very much standard procedure for developers that don't wish for their sites to appear in iframes and is in fact used by famous sites such as facebook, google, and even good ole stackoverflow (I would know, I tried to make a way to view multiple questions at the same time via iframes a while back). I've included an example below that shows this all to be true, alongside an example of a site that doesn't care (editpad.org). In order to implement this on your site check out this link.
<iframe src="https://www.editpad.org/"> </iframe>
<iframe src="https://www.google.com/"> </iframe>
<iframe src="https://www.facebook.com/"> </iframe>
<iframe src="https://stackoverflow.com/posts/53917955"> </iframe>
The old answer:
So you're trying to change the location of the parent window from an iframe? This sounds extremely dangerous and the fact that Firefox doesn't block it worries me. Good job Chrome!
Why wouldn't you want this?
I can think of a few reasons you wouldn't want this, but the biggest is that it's just poor programming. A page should work completely independent of whether or not it is inside an iframe, and even if the page should only be viewed in an iframe it still shouldn't be interacting with the parent window in such a direct way.
Possible issues that could arise if this were allowed on all platforms:
Include an iframe in your ads and as soon as your ad is displayed, redirect the user to your site or worse, redirect them to a mirror of the current site that you're hosting to collect passwords / personal information.
If you can mess with the windows location (arguably the most important and static thing about a web page being viewed) why can't you mess with anything? Can you go into the parent window and adjust the DOM or do a query selection for inputs of type password in order to copy the values? Or what about attaching event listeners to the parent window silently such that you can log any and all key presses.
How can you work around it?
Don't worry too much about the issues I brought up above, as they can all be avoided by following proper standards. In fact, the JavaScript devs envisioned this exact problem which is why you can post messages across windows. Look into this link and go from there, feel free to comment if you have any questions but it should be as simple as posting a message, detecting it on the parent window, and then changing the location as you wish.
If you need to send data from the iframe to the parent window, or your iframe isn't hosted on the same domain, you can instead use CustomEvents (which I prefer even when my iframe is on the same domain) which allow you to attach a data object.
As for why either of these two solutions is better than directly manipulating the parent window, it's all due to the parent window needing to register a listener for the message / custom event. If your page is not inside an iframe it'll simply post a message to itself which it won't be listening for. If your page is inside an iframe on the page it should be on, your parent page should already have registered the proper listeners. And there is no chance for malicious use of these features because again, I have to register a listener and I choose what is done with the event once it's caught.

Can I change the 'window.location' property inside a Bookmarklet and then continue doing things on the new document?

I want know if you can guide to users for a series of steps that imply visit different web pages using actions inside a Bookmarklet. What I want is a kind of Wizard or automated actions cross web pages.
Afraid not. What you're describing would actually be very dangerous. If there were any malicious code in the bookmarklet, it would have access to every site you are logged into, email, amazon etc. Some pseudocode for an attack could look like this:
window.location = "www.gmail.com";
ajax.post("www.gmail.com/deleteAllMail");
window.location = "www.amazon.com";
ajax.post("www.amazon.com/buyReallyExpensiveStuff");
You partially can, if you open the new pages inside an iframe. However, you won't be able to modifying the content of the webpages anymore, but just modifying the url of the iframe, and going through different websites (like a kind of slideshow).
Notice that if you're the owner of the pages, you can use postMessage to interact with them, even if they're in different domains.
Or, you could do a "tunneling" on server side, and inject each team you got the page back with the JS you need.
But probably the cleanest approach if you're not the owner of the pages is just create a simple restartless add-on for the browsers you want to support.

How can I get HTML to link to a browser (or system) specified URL?

I'd like to be able to create a "HTML link" that the user can click on and be taken to an URL (location) specified either in the browser (preferences?) or system environment.
Is this possible? Any suggestions on how to do it please?
For example, it may look something like this (or alternatively it could be a clickable image or even a submit button):
"Click here to go to your preferred news site."
When the user clicks on "here" the browser would go to a location specified not in the HTML but somehow in the browser (preferences?) or some system environment variable (OS specific etc.)
Of course, the user would have to set up this preference or environment variable (or have some local application or better Web page that could set it - when approved by the user).
This is sort of like most OS these days allow you to set "preferred app" for image processing or playing media. I would like to set preferred Web sites for certain tasks.
Thanks for any suggestions. Hopefully with Javascript and modern browsers and perhaps HTML 5 something like this is possible.
Update: I would like the user to be able to set this once for themselves (e.g. in the browser or the OS) and then for this to work on any site they go to that includes the same "abstract link".
So Web site A and web site B could both an "abstract link" to go to the user's preferred news site and when clicked on the browser would go to the site specified in the browser or the OS). So it cannot be site-specific (like a cookie?).
Cheers,
Ashley.
The general process would be something like this:
Set a cookie using js. Then create a function that retrieves the cookie and redirects. Then trigger an onclick or an onmousedown even like onmousedown='retriveAndRedirect()'
Check out there resources.
QuircksMode's JavaScript Cookies Reference.
W3School's JavaScript Cookies Reference.
UPDATE:
I see what you're trying to do here. In order for your redirection to work from any site, that site has to host your redirection and preference method somehow using js, html, serverside script, etc...
Your other option would be to build a plugin which the user would have to download, that way you wouln'd need any site host your redirection and preference methods for you.
As far as your link retrieval methods go you can either use cookies, or store the links in a database and then call on trigger.
You can store the preferred web site in a cookie. Simple version using the readCookie function from there:
Click to go to your preferred news site

Alternatives to iframe for loading cross-site HTML when using iPhone?

I apologize if this has been asked before. I searched but did not find anything. It is a well-known limitation of AJAX requests (such as jQuery $.get) that they have to be within the same domain for security reasons. And it is a well-known workaround for this problem to use iframes to pull down some arbitrary HTML from another website and then you can inspect the contents of this HTML using javascript which communicates between the iframe and the parent page.
However, this doesn't work on the iPhone. In some tests I have found that iframes in the Safari iPhone browser only show content if it is content from the same site. Otherwise, they show a blank content area.
Is there any way around this? Are there other alternatives to using iframes that would allow me to pull the HTML from a different domain's page into javascript on my page?
Edit:
One answer mentioned JSONP. This doesn't help me because from what I understand JSONP requires support on the server I'm requesting data from, which isn't the case.
That same answer mentioned creating a proxy script on my server and loading data through there. Unfortunately this also doesn't work in my case. The site I'm trying to request data from requires user login. And I don't want my server to have to know the user's credentials. I was hoping to use something client-side so that my app wouldn't have to know the user's credentials at the other site.
I'm prepared to accept that there is no way to accomplish what I want to do on the iPhone. I just wanted to confirm it.
You generally can NOT inspect the contents of an iframe from another domain via JavaScript. The most common answers are to use JSONP or have your original server host a proxy script to retrieve the inner contents for you.
Given your revisions, without modification or support from the secondary site, you are definitely not going to be able to do what you want via the iPhone's browser.
"In some tests I have found that iframes in the Safari iPhone browser only show content if it is content from the same site"
I found the same thing. Is this documented somewhere? Is there a workaround? This sounds like broken web standards to me, and I am wondering if there is a solution.

How can I tell if my page is set as the user's homepage?

Is there any way I can detect when my page has been set as the user's homepage in their browser?
I'm most interested in something in javascript, but I'd be happy to hear about other approaches as well.
Edit: I'm not looking for anything sneaky. I'm wondering if there is anything that is explicitly allowed through the browsers to find out this information.
There isn't likely to be a foolproof method, as that's an intrusion into the privacy of the user.
One thing that comes to mind is checking for a referrer. If the user arrived at your page without following a link, they a) typed the url, b) followed a bookmark, or c) have your page set as their homepage. But that's about the best I can do.
Nope. You can tell if they got to your page by following a link or not. Check the referrer. However, the browser going to your page as the home page will not appear any different than the user typing in your page or using a bookmark.
Mozilla/Firefox has a window.home() method which loads the user's home page. This method could be used (in an iframe, maybe) combined with server access logging, to see if the site's home page is instantly requested loaded by the current user.
However, other browsers don't seem to support this javascript method.
Simple solution, you shouldn't be checking if you or anyone else's site is set as the user's homepage. If they want it as their homepage, they'll make it so.
However, if you've got some Javascript that will check their email and see if they've sent links to your site to their friends or colleagues, I'd be very interested in that functionality ;-)

Categories

Resources