monitoring iframe content/status from the parent page - javascript

What methods are available to monitor the status of IFRAME page, I know there are security limits but I hope some small notification system is still possible.
My situation is that I have created a parent page that is located on customer's server, and this page has has iframe page located on my server (my domain). I need to somehow communicate a little between these two:
Can I make javascript to the parent page that can check if my iframe page has a specific string on it, or somehow make iframe page to notify the parent page?
Is there e.g. any possibility to make a timer that checks iframe content time to time?
I also accept answer how mydomain/client.page calls callback on customerdomain.intranet.com/parentpage.htm that has client on iframe

You need to use cross site JavaScript techniques to be able to do this. Here is an example.
Put another file into your server, call it helper.html, include it to your file served by customers server using an iframe. Set the src of the helper.html iframe with adding get parameters, ie. http:/myserver.com/helper.html?param1=a&param2=b, in the helper file use javascript to call method on parent's parent ( parent.parent.messageFromIframe(params) ). Which is the page on your server itself. Since helper and the container page are on the same domain it should work. The technique is popular, for instance Facebook was using it for their Javascript api.

I got information that this is possible by setting parent.location (from iframe) to have hash data like this "mydomain.com/mypage#mymessage"

By default, security restrictions in the browser will prevent access from/to the document in the iframe if it is in a different domain to the parent page. This is, of course, just as it should be.
I believe this would prevent even checking the current location of the iframe, but that's easily testable. If it's accessible, then you could poll the iframe for its location, and whenever the page in the iframe updates, have it append a random querystring parameter. Comparison of that parameter to the value from the previous poll would tell you if it's changed.
However, as I say, I suspect it's not possible.
Edit: This question suggests it is only possible for the initial src attribute: How do I get the current location of an iframe?

Related

Pass URL parameters from iframe

I have an iframe hosted on my site which is provided by a third party service. I can't manipulate the source code of the iframe and this results in users being able to navigate through the frame whilst the parent URL remains the same. For example
mysite.co.uk/
This presents an issue in regards to tracking and further, post session navigation etc.
Is it possible to listen for events of the hosted iframe and then pass in URL parameters? For example, a user clicks on a listing within an iframe and there URL is appended
mysite.co.uk/listings?listing1
mysite.co.uk/listings?listing2
mysite.co.uk/listings?listing3
My research suggests JaveScript window. & location. but I'm struggling with these suggestions given that I can't amend the code of the iframe.
Any direction would be greatly appreciated.
It is only possible to do this with a same-domain iFrame, unless you can get the third party to make changes on their end to enable CORS.

Call Javascript Function on another page

I am trying to click a link on another page(I do not have access to that page) which loads a JS function.
So can I call that function from my page thru a href="" or thru onClick=""
You can't call a function remotely from another page. Besides, you already left your page by then.
Unless...
that other page is somehow loaded to your page (AJAX+CORS or AJAX+proxy server maybe) and it's contents parsed on your page.
that other page has some logic that reads hashtags or query strings and executes corresponding functions. This could work inter-domain via iframes, as you are indirectly controlling the iframe via it's hash/query string.
that other page could be loaded via iframes. iframes would work if "I do not have access to that page" meant that you just don't have access on the current subdomain but both live on the same top domain.
Subdomain iframe communications can work. Pages on example.com and subdomain.example.com can talk to each other but example1.com and example2.com can't talk to each other because both live on different domains. See the other answer regarding the Same Origin Policy.
If it's on a different domain and you can't change its content, then you can't do it due to the same origin policy. Sorry. You'll have to find a different way to achieve whatever you're trying to do.

How can I prevent an iframe from accessing parent frame?

I've got a page with an iframe. The page and the source of the iframe are in different domains. Inside the iframe I'm using a rich text editor called CuteEditor (which has turned out to be not so cute). There are certain javascript functions in CuteEditor which try to access 'document' but the browser denies access since they're not in the same domain.
Here's the exact error:
Permission denied to access property 'document'
http://dd.byu.edu/plugins/cuteeditor_files/Scripts/Dialog/DialogHead.js
Line 1
Editing the javascript is out of the question because it's been minfied and obfuscated so all the variable names are cryptic.
Using a different editor is currently out of the question because this is a work project and this is the editor I've been told to use.
Is there a way to keep the iframe self-contained? So it does everything inside the iframe and doesn't try to break out to the parent frame?
If the child iframe is loaded from a different domain, then it will not be able to access the parent page or DOM.
However, there is a still a possible vulnerability to man-in-the-middle attack as follows. Suppose your page loads off http://yoursite.com and the iframe goes to http://badsite.org
first http://badsite.org redirects to http://yoursite.com/badpage
This is the step that requires a man-in-the-middle attack. The attacker must either be able to get between the user and yoursite.com, or control the answers to your DNS lookup. This is easier than it sounds -- anyone who has administrative control over a public WiFi access point could do it (think Starbucks, hotels, airports.) The goal is to serve the content of http://yoursite.com/badpage from the attacker's site, not your actual site.
The attacker can then serve whatever malicious code they like from the (fake) http://yoursite.org/badpage. Because this is in the same domain as the main page, it will have access to the parent DOM.
The HTML5 iframe sandbox attribute seems to be the way to avoid this. You can read the spec, but the best description might be here.
This seems to be supported on Chrome, IE10, FireFox, Safari.
The spec says that if the "allow-same-origin" attribute is not set, "the content is treated as being from a unique origin." This should prevent your child iframe from accessing any part of the parent's DOM, no matter what the browser thinks the URL is.
You shouldn't need to worry about that happening.
The only way iframes can talk cross-origin is with postMessage, and that's only possible if you're listening to that domain directly.
https://developer.mozilla.org/en/DOM/window.postMessage

Running a bookmarklet on an iFrame that is coming from a different domain

Is there any way to run a bookmarklet on an iFrame which is from a different domain?
For example, I have a page loaded from http://example.com, which has an iFrame whose source is set to http://example2.com. When I run the bookmarklet, it is always run on http://example.com, since that is the main page. I want to run it on the other iFrame though.
When I attempt to interact with the iFrame (e.g. by changing its source attribute to javascript:alert('test')), Chrome shows the following error:
Unsafe JavaScript attempt to access frame with URL http://example.com from frame with URL http://example2.com. Domains, protocols and ports must match.
I tried dragging and dropping the bookmarklet into the frame, but it says:
Failed to load resource
Is there any way for me to interact with an iFrame using a bookmarklet in Chrome?
There is a way to do cross-domain message-passing (not arbitrary code execution) using window.postMessage, yet all a frame A can do to frame B (when they are not of the same origin) is passing it a message hoping that B has a callback function listening for this message.
So here if you control exemple2.com (what's in the frame that don't get the bookmarklet), you can make the bookmarklet pass a message to the iframe and handle it in the iframe.
Else I don't think you have a solution here, except very complicated ones (like proxying).
Other links:
In-depth article about same origin policy and its implementations in browsers
A cross-browser, backward compatible postMessage attempt (as jQuery plugin)
iFrames have alot of security on them as do ajax calls.
Any attempt to use these in a cross-domain manner will result in a security error.
Imagine you were able to interact with other iFrames on different domains. You would be able to make an iFrame (like facebook login's page) that had width and height of 100% and add a function to execute on a submit event which would email you the username and pass before submitting.
So you're gonna have a lot of trouble accomplishing what you're trying to do. You basically can't mess with a page that you don't own. You can use firebug to edit it with the html tab though.
Hope that helps
One option if you are not in control of the page or the iframe is to load the iframe into a new window. The src attribute of the iframe is available to read by the parent JS, which can then open a new tab or window. The user can then click on the bookmarklet a second time to load it into this new page.

loading remote page into DOM with javascript

I am trying to write a web widget which will allow users to display customized information (from my website) in their own web page. The mechanism I want to use (for creating the web widget) is javascript.
So basically, I want to be able to write some javascript code like this (this is what the end user copies into their HTML page, to get my widget displayed in their page)
<script type="text/javascript">
/* javascript here to fetch page from remote url and insert into DOM */
</script>
I have two questions:
how do I write a javascript code to fetch the page from the remote url?
Ideally this will be PLAIN javascript (i.e. not using jQuery etc - since I dont want to force the user to get third party scripts jQuery which may conflict with other scripts on their page etc)
The page I am fetching contains inline javascript, which gets executed in an body.onLoad event, as well as other functions which are used in response to user actions - my questions are:
i). will the body.onLoad event be triggered for the retrieved document?.
ii). If the retrieved page is dumped directly into the DOM, then the document will contain two <body> sections, which is no longer valid (X)HTML - however, I need the body.onLoad event to be triggered for the page to be setup correctly, and I also need the other functions in the retrieved page, for the retrieved page to be able to respond to the user interaction.
Any suggestions/tips on how I can solve these problems?
There are two approaches to this.
The host site uses an <iframe> tag to include your page in a fixed-size box inside their page. It operates in its own document with its own <body> and onload event; it is in your site's security context so it can use AJAX to call back to your server if it needs to for some reason.
This is easy; the guest page doesn't even especially need to know it is being included in an iframe.
The host site uses <script src="http://your-site/thing.js"></script> to run a script from your server. Your script creates a load of content directly inside the host document using document.write() or DOM methods. Either way you know when you've finished putting them in place so you don't need onload.
You are running in the host's security context, so you can't AJAX to your server or look at your server's cookies directly; any such data must be served as part of the script. (You can look at the host server's cookies and cross-site-script into any of their pages, and conversely if there is any sensitive data in your script the host site gets to see it too. So there is an implicit trust relationship any time one site takes scripting content from another.)

Categories