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.
Related
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.
I'm trying to develop an extension similar to that of Pinterest's PinIt extension for google chrome. In general, i know that loading any URL in an iframe which is not from the same origin would result in giving an error "Refused to display 'https://www.someWebsite.com/' in a frame because it set 'X-Frame-Options' to 'DENY'."
However, i do see that Pinterest is loading a URL on any website when using their extension. For Example, i was using the extension on instagram.com (i've used it on other sites as well) and then i took a screenshot of what i could not understand. (Please refer to selected area in DOM)
Can anyone tell me how this can be achieved or probably how pinterest is doing this?
X-Frame-Options dictate which frames can embed the page, not which pages can be embedded in it.
So if, say, https://www.someWebsite.com/ disallows to be embedded, X-Frame-Options doesn't prevent embedding https://www.someOtherWebsite.com/ inside it (if the other website allows it).
However, child-src or frame-src Content Security Policy directive can prevent embedding another page.
In theory, both mechanisms can be be overridden by webRequest API. However:
PinIt doesn't use it, so logically it should fail on some sites.
http://content-security-policy.com/ is an example where it simply fails.
There may be additional countermeasures if you decide to circumvent response headers.
It's a cat and mouse game if some resource is unwilling to be embedded or allow embeds.
By changing CSP headers, you are weakening security considerably for your users.
I finally figured out how to deal with this. I still do not know how exactly pinterest is doing it but i'm sure i'm close to it.
I simply load an iframe in the body of the parent by injecting my own JS to the page.
Then i iterate through all the images available on the page like
$('img).each(function(){
// do my stuff to see if i need this image
// push them in an array (say, var imgArray)
})
var imgToString = imgArray.toString();
var myIframe = document.getElementById('iframe_id').contentWindow;
myIframe..postMessage(imgToString , '*');
And then in the iFrame that i load, i recieve the message and use the images...
So the gist of the whole issue is that postMessage() is my saviour.
I'm designing some "add-on" to certain websites, which should be embedded in them as an iframe. Inside this iframe there is a clickable button aimed at changing the iframe's position within the parent website.
Since things are done in coordination with the parent website, I am able to add some code there as well. However it seems I am not able to do neither of the following (one of them should suffice):
From the iframe, access data within the parent.document, in order to move the iframe to the desired position.
From the parent website, access data within the iframe, in order to check when the button is clicked.
Both typically produce an error: "Blocked a frame with origin XXX from accessing a frame with origin YYY. Protocols, domains, and ports must match".
Any advice (preferably with code sample) is appreciated.
After doing lots of searching around, I came across this:
http://www.codeproject.com/Tips/585663/Communication-with-Cross-Domain-IFrame-A-Cross-Bro
I actually tested the method (using my own short piece of code) and it seemed to work on Chrome, Firefox and IE. Now I'm gonna try the "real" implementation...
From what I understand based on the information you've provided in your question, cross domain scripting is not possible. What you would need to do is provide a script that the parent-level website can paste into their template/html and run from their domain, similar to how Google does with their analytics system.
As an alternative, try turning your iframe content instead, into a div loaded with the response from a service call made from the parent domain to the iframe domain. You would most likely need to create an API that a requesting site can use. Simply call that URI with whatever parameters you would use when referencing the page you wanted to load in the iframe, and have the script that you run on the parent website handle all the DOM alterations you want to achieve.
I need to display another website in an iframe. I don't need to access anything on this website I'll be displaying. Is this in violation of the cross domain policy? If so, would a proxy bypass this?
I tried a simply iframe with its src set to http://google.com as a test, and it looks like this does violate this policy. How can I bypass this if I don't need to access anything on the displayed webpage.
No, you can access any site through an iFrame.
What is against the policy is trying to manipulate the site in any way and modern browsers won't let you manipulate it anyways.
Google does allow you to get their site through an iFrame, however, they're using code to "break out of frames", so instead of viewing their site through an iFrame, you'll just be redirected to google.com
Ah, I see now that its only the test page I used, google, that forbids this. Other sites are OK.
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.