So I am holding a html file on my desktop that has an iframe within it.
This iframe is all good but I want a button within it to control the location of the web page hosting it.
So I want the iframe's parent to go back in history by 1 page, I used this method but it did not work. How would you do this?
onClick="parent.history.go(-1)"
If the inner iframe is on a different host that the outer frame (or even two different URL protocols like file: and http:), you will have trouble making a direct call, because the browser is preventing cross-site scripting vulnerabilities.
One thing that works is in that case is cross-window messaging using postMessage(). Check out http://ejohn.org/blog/cross-window-messaging/ for an example.
Related
I've been googling and looking at various options but could not seem to be able to find a perfect solution that works in what I'm attempting...so needing some help here.
The situation/environment that I have is the following:
Parent page (which has the iframe) - is on a different domain, and the only control I have is a portion of the body tag, where it is updated via an admin console using html/WYSIWG editor. No access to head tag or even hosting jscript in their domain.
Child page (iframe) - is hosted in our domain, and we have full control.
The parent site is actually 3rd party online stores where we have products there, and we want to put in common information that we can control on our end without having to edit each individual product listing one by one.
I've tried alot of options found but it does not seem to work as either they need to include in js file or access to the head tag in the parent page.
So wondering if there are any other options that can help us on this?
I'm afraid you need access to JavaScript on both domains to do this.
Could you get the 3rd online store to host a small JS library that all their clients could then use to solve this problem? I work on a project that allows third parties to add in iFrames and produced this little project for just this reason. When any one say they want to be able have their iFrame resize to content, we point to the iFrame js file and say include this on your page.
https://github.com/davidjbradshaw/iframe-resizer
Sorry, that's not quite the answer your after, but trying asking the store to support this and they might be open to the idea, as I expect others have the same issue with their site.
I want to allow some websites to embed an iframe with a page from my domain. However, I don't want anybody to be able to use the iframe content without my permissions. How can I allow only domains of my choice to be able to embed the iframe with the page's content?
I know vimeo does this, and allows video owners to block the video on certain websites that they don't find appropriate.
I want server side ASP.NET solution, because Javascript code can be altered. However if it can be done using javascript code and its secure, It's ok.
From what I've seen, I need to pass the referrer in some way, but in a way that can be manually altered by other website owners to include the iframe themselves and it would work on their website too, without a permission.
Since it will be a standalone page as you mentioned in the comments, you can do this by inspecting the referer property.
Request.UrlReferrer
See that it contains the domain that you want to allow. This property is available when an embedder puts your page in the IFRAME's SRC attribute and the page loads for the first time.
If the user clicks on a link inside the IFRAME, it is not guaranteed to pass the containing page as a referrer.
If you want to allow multiple linked pages inside the IFRAME to allow a specific domain, then you will need to stick to a JavaScript based solution.
Note however that neither method is completely foolproof.
If I create a widget and embed it in an <iframe> on a site that is from a different domain, how much data about the parent page can the widget read?
Obviously there's no DOM access, but is there any access to other information, such as whether the parent page has a parent, or what the url of the parent page is?
Normally the content of an iframe served from a different domain cannot access the parent in any way. It's like loading the page in a different browser tab.
However, even if served from a different domain, there is a possible man-in-the-middle attack which wil allow access to the parent DOM. This is easier than it sounds -- anyone who has administrative control over a public WiFi access point could carry out this attack (think Starbucks, hotels, airports.)
It is possible to protect against this attack using the HTML5 iframe sandbox attribute -- see below.
The man-in-the-middle attack works 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. 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.
Sandbox also lets you disable scripts, pop-ups, the ability to change the top level URL, and other things.
I did a little google search, and it turns out that normally you cannot access the internal guts of the Iframe if the the content is another domain (same origin policy), however there's an article here which can give you some ways around that.
I'm trying to post to the login form of an application on another subdomain of my site. It's a third party app that I don't have source access to.
I know that you can't access most features of a cross-domain iframe because of same origin policy. All I need to access, however, is the URL that's been redirected to (via JavaScript) within the iframe. It has a session token that I want to pass through.
That seems like something that might be safe enough to be allowed, but I haven't found a way to do it yet. I'm using jQuery, and I've tried $('iframe').contents(), but I seem to have no permissions at all on that object. I've also checked $('iframe').attr('src'), but it remains as the pre-redirect URL. Is there another way?
No, you don't have access to any properties within an iframe. You only have access to the outer positioning and styling properties.
This is why frames are such a pain to work with. I usually only use them if I don't care what is done within them.
Can you not do a server-side authentication and token passing? Instead of having the client do the authentication, can you not do that on your server? You may need to do some extra work to create the HTTP request and parse the response, but you avoid any iframe issues.
Bottom line is iframes probably aren't the best to rely on(especially when it comes to cross-browser functionality) for important things like authentication.
Try this example (method 2) in which the author sets up another iframe inside the first, loading a page at the original domain.
The inner page is allowed to call javascript on the outer parent, since they are loaded in the same domain.
Simply load the inner page with appropriate parameters, which can be passed on to the parent.
The question of how to make your iframe fit 100% of your content (using JavaScript) has been answered on the forum already... for iframes displaying content from the same domain only.
My questions: Is it possible to resize an iframe to fit the content when the iframe src attribute is for a page outside of the domain of the page containing the frame? The browser security features surrounding cross-site scripting prevent me from accessing the document object for the iframe.
I'm looking for any creative solution. One of my thoughts was to somehow detect that scrollbars were visible on the iframe, and to incrementally increase the height until they weren't. Unfortunately I can't find any way to detect visible scrollbars either. Ideas?
Please note that I am looking for a client-side solution.
Responses:
Dave
The problem still exists - I don't know the height of the remote document ahead of time, so I can't set it from a database or querystring value.
dusoft
100% on the iframe in CSS will not set it to 100% of the content inside the iframe, but relative to the the page or containing element (i.e., a div or something).
(My answer to a similar question)
It is not possible to do this without some control over the page being iframed because of the browser's security model. If it was possible, that would be a security problem and would have to be fixed.
Although letting the embedding site know the height of a third party webpage when embedded in the page seems harmless, this can leak information to the embedding site that the browser's user wants to keep private. For example, http://www.facebook.com/ renders differently depending on whether or not you are logged in, so if my website can work out the height of <iframe src="http://www.facebook.com/"> then I can work out whether or not you are a facebook user, something you probably don't want me to know.
The information leakage would be similar to the infamous CSS History Leak which browser vendors had to plug.
Is it possible to resize an iframe to fit the content when the iframe src attribute is for a page outside of the domain of the page containing the frame?
It is possible to get around the cross-site limitation and have an iframe set to the height of it's content, but it can be a bit awkward to get it to work.
The solution involves working around the security model by having the iframed content itself iframe a page on the the same server as the parent page, with which it can communicate. I've answered a similar question to this before here, which goes in to a fair bit of detail on the ins and outs of setting it all up.
The caveat on the described approach is that you must have means of getting your iframed content to itself iframe a page on the parent server. This is usually achieveable when the iframed content is there as part of an agreed partnership between sites, but YMMV.
It sounds like you are trying to work around a security feature that was put in place for a good reason...
Does the resizing have to be through script? You could redirect to a page where the size of the iframe is taken from a querystring, or a database, or config file, etc.
This is theoretical as I have not tested it:
1) PHP save the remote page into a
local html file using
file_get_content() or using CURL. 2) Javascript load local file into
iframe
- it's now local and security issues don't apply.
If there are javascript vars or Session vars (which cannot be pulled from remote content) you can at least use this technique to query the document height of your local file, set the iframe accordingly, then load the remote URL into the resized iframe.
Cavat: you have no way of knowing URLs for page changes within the remote page, therefore you can only use this technique on the first page. If the remote pages are all same height this is no problem.
not the best solutions but you can try:
javascript to write iframe, in iframe app set the current height in url #h700 for 700px etc; then use a loop to listen for that change on host site "in the javascript" to read the src="url#h700" and set the height of the iframe by that.