Detect IFRAME blocking? - javascript

I'm working on a site that will display HTML content from other links within an IFRAME. I know that a lot of sites have JavaScript code that will detect the content is being displayed in an IFRAME and prevent it from rendering. I'd like to be able to detect the presence of this IFRAME blocking code, and redirect the user to the original page (without the IFRAME) if it would normally be block.
Try as I might, though, I haven't found anything reasonable that works. Have any of you implemented something like this? Any pointers?
UPDATE: For those of you who want to see what I'm talking about, here is a link that shows the behavior. If you look at it in Firebug, you'll see that the HTML content from the IFRAME is empty.

Related

How to update a page with an external weblink, keeping the navbar fixed

We are trying to show some popular websites in custom page of ours. We added some buttons with relevant links, and when clicked on them it should redirect to that website, while being shown on the same page of ours.
Is there any work around about it?
Our approach was, to put a click event for each button, then append a iframe with it. However most of the websites can't be shown on a frame.
<button id = "google"></button>
<div id ="googledisplay"></div>
var google = document.getElementbyId("google");
$("#google").one("click", function(e) {
$("#googledisplay").append('<iframe src="http://www.google.com"></iframe>');
});
Seems like google can't be displayed in an iFrame. Any suggestion, guidance are welcomed.
Most websites will deny a request to have their site on an iframe as part of another site. When you try creating an <iframe> of the google site the browser will deny it because of their X-Frame-Options header. The error in the Chrome console will read:
Refused to display 'https://www.google.com/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.
TLDR: Very few websites allow this behavior and it is simply not the right way to do something like this.
Edit: To answer the second part of your question, their is no practical workaround to this. If something like this is found in a browser, it will be treated as a bug and patched immediatly. It is simply a matter of security.

Refused to display google in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'

I was wondering to make something for fun like website with look of desktop and files, folders...
When I try to make a "web browser" I need iframe for displaying the page inside iframe.
But pages like google.com, facebook.com, twitter.com, youtube.com dooesn't allow this.
Is there way to manage trough it or it is disabled in any way?
I know it is made for security reasons but why would this what I need damage the site up?
I tried with javascript: load() and php print file_get_contents()
Load doesnt work and php just copy paste the page content...
There is not workaround as it's for security reason, this is done to prevent clickjacking (also called a "UI redress" attack). In a clickjacking attack, the page displays a click-activated component of another site inside an <iframe> and tricks the user into clicking it (usually by layering the the target component on top of an apparently-clickable feature of the framing site).
Reference link 1
Reference link 2

Invoking javascript from ifram to the whole website

does anybody know how can I expand javascript so that it targets whole website not only the page in iframe it is on. Im currently using a javascript for gallery on my website, so when you click on a picture it pops up enlarged, however since the page with javascript is in an iframe it shows only in the iframe, how can I accomplish the pop up to expand to the whole page?
Thanks in advance.
Iframes can call out to the window which embeds them using simple javascript (see window.frames on http://www.w3schools.com/jsref/prop_win_frames.asp). However, if src of the iframe is on a different domain, then the script can only affect the iframe, due to security policy within the browser.
If you'd like to apply a work-around, there are some solutions like this: Yet Another cross-domain iframe resize Q&A
These solutions tend to break on different browsers and with updates to browsers.
Your best bet is keeping the entire iframe contents within the browser by writing the iframe code yourself (and hosting on your own domain).

How can I detect when an iframe page begins loading?

I'd like for the opener of an iframe to be able to detect each time the user changes pages within that iframe. Using jQuery, I can detect each time a page finishes loading within an iframe via the following:
$('#myIframe').on('load', function() {/*do stuff*/});
However, I'd also like to detect (in the iframe opener) each time a page starts loading within that iframe.
Note: The content that is displayed in the iframe is from a third-party site, so I don't have the ability to insert code there so that the iframe can explicitly alert the opener.
Does anyone know of an event that is fired when a page begins loading? I'm not having much luck finding anything via Internet searches, as most people seem to only be interested in detecting when the iframe has finished loading.
It seems unfortunately that the only way to be sure it will work in most browsers is to use the <iframe onload="myonloadscript();"
The window.onload event of the main page will tell you when the iframe has loaded and you can be sure it has begun it's request for it's src page
Edit:
Just copying it from an article (Their are hacks for this)
doing this cross-domain? Not so easy. You’ll get something along the line of: Child document does not have the right to access parent document. In fact there is a lot of documentation on the web about how to achieve it, but the problem is that it is often outdated, with solutions that often only works in a couples of browsers.

Make links inside an iframe open in a new window

I'm trying to display an map inside an iframe that has a needle which on mouseover shows some information about a certain company, the thing is once you click the link the page opens up inside the iframe which ruins the experience, so i was wondering is it possible to make the links inside an iframe open up in a new window instead perhaps using jquery or something similiar?
the code i have atm is
http://www.jsfiddle.net/rkd59/1/
Edit: the very least capture a click within the iframe so i might resize the iframe
You will need some kind of open API to do this properly, and Eniro doesn't provide one according to this page (in Swedish).
I would recommend you to use the Google Maps API v3 instead. I've made an example on jsFiddle that looks similar to that of Eniro.
I'll gladly give you more help with this, so just ask away!
You can't (or it is extremely hard to ) make events inside the iframe affect the parent page. This is to prevent attacks from XSS, or cross site scripting. Having said that, if the site within the iframe is on your own domain and you want to set up some extremely tricky ajaxing and php session IDs, maybe you could make something work, but even then I'm not sure. And I don't know if this would be a security hole, maybe someone else can speak to that. It would perhaps look like:
main page sets up session ID and passes that to the iframe url via a get variable
the iframe takes click information and sends it to a Session variable via an ajaxing call to a script on the server.
The main page then reads (how?) the session cookie and makes changes based on it's value.
All in all, you may find that it may be much simpler and more secure to acheive what you want using a different method.
Due this map is loaded inside an iFrame, it's not possible to run any javascript event listeners on the links, neither is it possible to change the html.
Please try the following:
<script>
x=document.querySelectorAll("a");
for(i=0;i<x.length;i++)
{
x[i].setAttribute("target","_blank");
}
</script>
Thus all links open in new frame.
To make a link popup in a new window you would usually use target="_blank" as such:
Go to Yahoo
However this will only work if you can modify the code you're showing within the iFrame
There is a partial solution.
You can add an absolutely positioned DIV tag over the top of the IFRAME and capture clicks on this instead. See example here shaded in 20% alpha red.
http://www.jsfiddle.net/rkd59/6/
However, this means that the map works in "read-only mode" and while you can capture the click event you wont know what link the user has clicked on.

Categories

Resources