Embedding web controls across sites - using IFrames/Javascript

Question

Hi

I'm just looking for clarification on this.

Say I have a small web form, a 'widget' if you will, that gets data, does some client side verification on it or other AJAX-y nonsense, and on clicking a button would direct to another page.

If I wanted this to be an 'embeddable' component, so other people could stick this on their sites, am I limited to basically encapsulating it within an iframe?

And are there any limitations on what I can and can't do in that iframe?

For example, the button that would take you to another page - this would load the content in the iframe? So it would need to exist outwith the iframe?

And finally, if the button the user clicked were to take them to an https page to verify credit-card details, are there any specific security no-nos that would stop this happening?

EDIT: For an example of what I'm on about, think about embedding either googlemaps or multimap on a page.

EDIT EDIT: Okay, I think I get it.

There are Two ways.

One - embed in an IFrame, but this is limited.

Two - create a Javascript API, and ask the consumer to link to this. But this is a lot more complex for both the consumer and the creator.

Have I got that right?

Thanks Duncan

Answer 1

I think you want to get away from using inline frames if possible. Although they are sometimes useful, they can cause issues with navigation and bookmarking. Generally, if you can do it some other way than an iframe, that is the better method.

Given that you make an AJAX reference, a Javascript pointer would probably be the best bet i.e. embed what you need to do in script tags. Note that this is how Google embed things such as Google Analytics and Google Ads. It also has the benefit of also being pullable from a url hosted by you, thus you can update the code and 'voila' it is active in all the web pages that use this. (Google usually use version numbers as well so they don't switch everyone when they make changes).

Re the credit card scenario, Javascript is bound by the 'same origin policy'. For a clarification, see http://en.wikipedia.org/wiki/Same_origin_policy

Added: Google Maps works in the same way and with some caveats such as a user/site key that explicitly identify who is using the code.

Answer 2

There's plus points for both methods. I for one, wouldn't use another person's Javascript on my page unless I was absolutely certain I could trust the source. It's not hard to make a malicious script that submits the values of all input boxes on a page. If you don't need access to the contents of the page, then using an iframe would be the best option.

Buttons and links can be "told" to navigate the top or parent frame using the target attribute, like so:

<a href="http://some.url/with/a/page" target="_top">This is a link</a>
<form action="http://some.url/with/a/page" target="_parent"><button type="submit">This is a button</button></form>

In this situation, since you're navigating away from the hosting page, the same-origin-policy wouldn't apply.

In similar situations, widgets are generally iframes placed on your page. iGoogle and Windows Live Gadgets (to my knowlege) are hosted in iframes, and for very good reason - security.

Answer 3

If you are using AJAX I assume you have a server written in C# or Java or some OO language. It doesn't really matter what language only the syntax will vary.

Either way I would advise against the iFrame methods. It will open up way way too many holes or problems like Http with Https (or vice-versa) in an iFrame will show a mixed content warning.

So what do you do?

1. Do a server-side call to the remote site
2. Parse the response appropriately on the server
3. Return via AJAX what you need
4. Display returned content to the user

You know how to do the AJAX just add a server-side call to the remote site.

Java:

URL url = new URL("http://www.WEBSITE.com");
URLConnection conn = url.openConnection();

or

C#:

HttpWebRequest req = (HttpWebRequest)HttpWebRequest.Create("http://www.WEBSITE.com");
WebResponse res = req.GetResponse();

Answer 4

Look into using something like jQuery, create a "plugin" for your component, just one way, and just a thought but if you want to share the component with other folks to use this is one of the things that can be done.