I'm creating a web-based game. As a part of it, the player must go to the home page of a website, and follow a series of link until he reaches to the "destination page" in the minor time possible. Think of it as a sort of link treasure hunt.
In order to control the game, I created a page with a javascript timer on the top, and an iFrame showing the website to surf (which is not mine and I have no control over it).
However this has a huge fault: it is not possible to detect the current cross-domain URL of the iFrame, so my page cannot know when the user has arrived to the destination page and stop the game.
Is there any alternative way I could achieve this?
Is there any alternative way I could achieve this?
No, there is not.
The Same Origin Policy completely prevents you from accessing properties of any window object that displays content from another domain.
(If one was a subdomain of the other, then document.domain would help. But from your problem description it doesn’t sound like that was the case.)
And besides the technical issue: Generating traffic and clicks (that will skew their statistics/analytics) on a site that you don’t own, just for the purpose of being able to present your own game, would be rather unfair (aka a “dick move”.)
You can wait upto the contentWindow of the iFrame is resolved and you have a reference to the iFrame's window, after you changed the source pragmatically.
once you have that, you can add a onload handler on iFrame's <body> and inject some postMessage call inside that handler, so once the body is loaded of the iFrame's window it wil call postMessage from the onload handler of body and it will notify your outer window, of-course you have to add message listener in outer window using window.addEventListener("message", callback)
Related
Can anybody help me on this, when I embed a google drive video using an iframe it has two play button, how to remove one of this? This happens only in Chrome and Safari so please test it on those browsers.
<iframe src="https://drive.google.com/file/d/1mNaIx2U3m7zL9FW-wksaI1m_rL5Oh47v/preview" width="400" height="300" allowfullscreen="true"></iframe>
As you can see on the iframe that you have to click the play button twice.
Also I cannot use html5 player since most of the videos are large.
here is my fiddle https://jsfiddle.net/1tav74q8/
TL;DR; it's impossible to directly modify the content inside the iframe that comes from different origin that you don't own.
If your iframe and the host have the same origin (domain), interaction between them is easy, simply access the document object to get the element. Example using jQuery:
To hide a button on host element from iframe, use: window.parent.jQuery('button').hide().
To hide a button on iframe element from host, use: jQuery('iframe')[0].contentWindow.jQuery('button').hide()
HOWEVER, if the host and the iframe doesn't have same origin, interaction between each of them are strictly limited. you cannot instruct certain operation directly from the host to the iframe's javascript window or document, and vice versa. And from that, it's safe to say that accessing directly the iframe's DOM element from the host is definitely impossible.
Explanation about Cross-origin script API accessSection from MDN.
JavaScript APIs such as iframe.contentWindow, window.parent, window.open and window.opener allow documents to directly reference each other. When the two documents do not have the same origin, these references provide very limited access to Window and Location objects, as described in the next two sections.
To communicate further between documents from different origins, use window.postMessage.
You can use the window.postMessage function and "message" event listener, to send and receive a message between host and iframe (and vice versa). In your case you would need to sent a message from host to instruct the iframe to hide a button. Then on the receiver end (iframe), get the desired button then hide it. But this technique only works if you own those two origin, you need to declare the "message" event on the iframe end, and since your iframe source is drive.google.com which I assume you are not the owner, then it's definitely impossible.
More explanation: https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
As far as i am aware of you can not edit iframe content which does not originate on your own server. But i am not sure..
Check this post for a sample
Courseweb
Stackoverflow
Also interesting from this link:
stackoverflow
Get the unique video identifier (0B6VvIWR7judDX25yUGxVNERWUj)
Put into this html:
My website offers rich content to users. I often subscribe to third party vendors whose content I embed in my pages. How can I safely embed external domain's content on my webpage in an iframe without worrying that they won't be able to bust out of frame. They won't do it purposely (without risking their clientage/reputation). However, since they almost always are small shops, they become a juicy targets for an attacker who wants to deface/redirect my website.
I am not asking how can I prevent an iframe to access parent frame's DOM, which I know it can't. I am asking how can we prevent an iframe to stop doing something like the following (which doesn't require access to parent's DOM):
top.location=url
Is there a header (something similar/opposite to X-Frame-Options) which I can use on my parent page to ensure that the iframes I embed can't bust out? Remember, I can't ask vendors to add headers/scripts to their pages. They never purposely want to do nefarious things to my page. The scenario I am trying to cover is the one when they get hacked.
As noted in the comments, sandbox attribute can prevent the script inside the iframe to access the windows top.href, location.href and similar methods. This will do what I want to achieve.
From w3schools:
When the sandbox attribute is present, and it will:
prevent the content to navigate its top-level browsing context
For example:
I have a main page with an iframe in it and my iframe contains a button. When I press the button inside the iframe some scripts are executed, and the design of iframe is changed. Texts appears and other stuff.
How do I detect when iframe scripts are run? (Or the button was pressed?)
The iframe is from a different domain.
If the contents of the iframe come from a different domain than the outside page, then you can't - the browser deliberately stops you from being able to tell much about what is going on inside the iframe. What you can do though is grab the URL the frame is pointing to if it changes.
If it's running in the same domain, you can just access the elements inside the iframe pretty much the same way as you would normally via the document property of the iframe
If the main page and the iframe are on the same domain, you can make the javascript in the iframe call a function or access the elements of the parent frame.
So at the end of the script in the iframe you can do
parent.script_is_finished();
If you have control over the script in the iframe, you could use window.postMessage to communicate with your main page, even if they are in different domains.
Support for this is limited to FF3+, IE8+, Chrome, Safari(5?), Opera10+
Here's a demo on html5demos.
As an update to the fact that the iframe is from a different domain:
Short answer: No. You can't detect clicks within an iframe from another domain.
Longer but still short answer: The reason you can't is the same reason you can change the contents of the iframe -- it'd be a security risk unless the iframe is on the same domain. You simply can't track user activity within an iframe sourced from a different domain.
Sorry, but I hope that helped!
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.
I am developing a webpage which our customers want to insert on their websites by wrapping my page in an iframe (cross domain). I don't need to interact with the parent or know anything about whats outside the iframe.
I am using HTML, CSS, Javascript and Webservices.
Question: How am I limited inside an iframe compared to if my page was running outside the iframe?
You're not. Any JS linked within the iframe from your domain will act in the context of the iframe. Aside from being crammed into an unusual container it should work the same as it would if it was loaded independently.
If your needs should change however, there are ways to send signals between parent frame and iframe if both pages have JS written to cooperate. There's methods using the # in URLs which can be read by the parent and don't force page reloads and I believe they share the window.resize event which can be fired manually without actually resizing the window.
UPDATE: There are far better ways to communicate between cross-domain iframes now than there used to be. Naturally you'll still require cooperating JS on both ends but you can use window.postMessage rather than triggering messages via window.resize and data after a hash symbol in the URL. That was a cool trick though.
When creating links you should have in mind to maybe use the target-attribute of the a-tag if you want to create a link for the parent window. Otherwise the new page would be loaded into the iframe.