NetTalk web app within an Iframe

[frosty]

I've embedded a NetTalk web app inside an Iframe to maintain the overall look and feel of the client's website.  That works just fine with both Firefox and Opera.  But I've just noticed that IE 6 and 7 kick up a fuss about the app appearing inside the Iframe.  With IE, the app appears, but the search button doesn’t do anything.  After experimenting, I noticed that dropping IE’s “privacy options” down to “Low” or “Accept all cookies” solves the issue.  Running the app outside of an iframe also works.  This is showstopper.  I’ve Googled for a solution but I haven’t found one.

The app inside an Iframe (works with FF and Opera/doesn't work with IE 6 or 7):  http://www.hiflightrc.com/html/catalogue.html
The app outside of an Iframe (works with all browsers):  http://142.179.197.168:90

Anyone have any ideas here?

[L]

[Mike Grigsby]

I haven't done a search using an iframe, but if it helps, I have noticed severe formatting problems when running more than one frame from the same application in separate iframes on the same page.

[Bruce]

Hi Leroy,

Yeah, you're gonna have a problem running JavaScript from one site inside another site. And that's effectively what you're trying to do here.

In essence, IE is doing a "security" thing - by preventing one site from "mixing" with another site. If you think about it for a bit, allowing two sites to "mix" is not good for the host site.

the solution of course is not to have two sites, but to host the whole thing as one site. Or to make two sites, but to make all the pages from the two sites distinct from each other. In other words you'd have no problem calling one site from the other, backwards and forwards, it's strictly a problem because you are wanting to "include" the one site inside another.

Cheers
Bruce

[frosty]

Thanks for the replies.  Since that website's header and footer info will be changing on a frequent basis, I'd rather not have to bring that into the NetTalk app.

It's not an option at the moment to have both sites on one server.  The website is at the web host's server, while the NetTalk app is running on my client's inhouse server.  The NetTalk app has to run inhouse so that inventory availabilty is live.  Moving the app the web host's server isn't an option.

I suppose it would be an option to host the rest of the website inhouse, but that's not an option that I'm eager to look at (because of maintainance, security issues, load on the server, etc.)  However, it may be possible to host just the single catalogue page inhouse to work around IE's security concerns.

Also, in talking to Charles Edmonds yesterday, he suggested two possible solutions:

Your main domain ( www.hiflightrc.com ) is at IP address 216.234.163.202

Your pulling content in from http://142.179.197.168:90

Welcome to Microsoft Cross-Domain Scripting Restrictions.

;-)

It is no problem (usually) to pull read-only content into context, but when you start interacting with the other domain, the security model kicks in.

http://msdn.microsoft.com/en-us/library/ms533028(VS.85).aspx

Your probably going to have to switch from an Iframe to using PHP cURL.

An alternative that might work would be to put the search button and its layup in the parent page.  Then use some Javascript on the parent page to call the URL of the NetTalk Server in the Iframe.

Haven't tried that with your layout but I think it might work.

Are we having fun yet<g>?

and later...

It is a catch22<g>.

If the server supports PHP cURL then it may be the easiest (since you haven't worked with Javascript).

What happens is that the page on the main server will become a .php page (has to have a .php extension, but I'm sure you know that).

Then a small PHP cURL script will fetch the remote NetTalk server page.

The key is that the NetTalk server page gets delivered out in the main page as part of the source - not as IFrame content.

OR

In the other method, you put the drop list and search box as part of the parent page.

The data for the search criteria gets gathered from the control with Javascript.

Then you build a complete URL (including search criteria as parameters) and you use Javascript to switch that for the hard coded URL in the IFrame.

Then it gets fetched as part of the page (just normal IFrame stuff).

[L]

[Bruce]

Hi Leroy,

Since the header and footer may change, why not make them iFrames in _your_ window, and fetch _them_ from the parent site.

ie
Make a whole page...
Consisting of 3 parts...
Top and Bottom part are iFrames, fetching the header and footer from the "parent" site.
Middle part is the dynamic bit.

this would work because neither the header, nor footer, include JavaScript - so would not incur the cross-site-scripting issue.

Alternatively - If the header and footer are "reasonably static" they could be stored as HTML "snippets" in the web folder, and included as needed using the <!-- Net:F:filename --> tag. so if they got updated on the main site, they'd get copied to your web folder as well, but it's not like you'd have to recompile or anything.

If you're _really_ clever you automate the update of the snippets so that your server "fetches" the header and footer from the main site from time to time.

Cheers
Bruce

[frosty]

Thanks for the ideas.  I'm thinking things over.

[L]

[Wolfgang Orth]

In essence, IE is doing a "security" thing - by preventing one site from "mixing" with another site.

Apparently these gusy here have found a new way for "click-jacking" using iframes: http://www.contextis.co.uk/resources/tools/clickjacking-tool/

They suggest to add

  "X-FRAME-OPTIONS: DENY"

to the webservers header.

So the question to you, Bruce, is: any side-effects to be expected under Nettalk? Would you consider to add that line to the template?

thx
Wolfgang