Different methods of embedding a page

Question

We provide a third-party site to clients. Frequently when we are handling an RFP, we are asked if it is possible to embed our site within our client's site. Many of our prospective clients have unusual limits or requests, such as 'do not use iframes'.

To that end, I've been asked to ensure that our upcoming redesign of our site makes it practical to embed in client's sites in at least two ways.

The methods of embedding a full-functioning website (as opposed to a cross-site image or piece of static content) within another are as follows:

1. iframe - Much used, frequently maligned, and some of our previous RFPs have specifically excluded this as a possiblility.

2. Object/Embed tags - going way back, it's possible to embed a full-functioning HTML page into another the same way you would embed a flash object.

3. Ajax - Supposedly capable of loading a full site into an HTML object (such as a div tag), but there seem to be additional security hoops to jump through, due to the dangers of cross-domain requests.

Are there other methods for placing a full site within another from a different domain? Are there any caveats or limitations to any of the above three (for instance, our site uses AJAX calls for login and to update some user-defined settings, will those all function correctly in each of the above embed strategies?) that I might be unaware of?

Thanks in advance.

Answer 1

X-Frame-OptionsResponse Header

If you are embedding your site to somebody else's site, you must be careful about the X-Frame-Options response header. Make sure your site does not send SAMEORIGIN as the value for X-Frame-Options. If you do, it will cause problems for iframes and embedded objects. You can do two things:

1. You absolutely do not send the header: Any site will be able to display your site in an iframe or as an embedded object. This can cause security problems like clickjacking. See this article for more info and defense on clickjacking.

2. You can make sure only the site you authorize will be able to embed your site: This is done by sending ALLOW-FROM url value for X-Frame-Options header. You can sniff the HTTP-referer to identify which site is requesting your page. This is really secure than option 1 (unless users' browsers are malicious, of course). NOTE: Not all browswers support ALLOW_FROM. See linked reference for supported browsers

Same Origin Policy

Same Origin Policy will not affect you as far as your site and your clients site do not access each others DOM.

CORS

Cross-Origin Resource Sharing should be considered if a script from your clients' website makes an AJAX request (XmlHttpRequest) to the resources in your site. But as far as your question is concerned, this is not the case, I think.

I gave an answer explaining CORS some time back, you can read it if you want to get a basic understanding of CORS.

Plugins for third party sites

It seems like you are trying to embed some functionality in clients site. Consider offering site plugins like those Facebook and Disqus does.

I am not sure if Same-Origin Policy or CORS applies here. I will find that out and get back to you.

Note: X-Frame-Options, Same-Origin Policy, and CORS is implemented by browsers. There's nothing you can do if the users browser does not implement these things, or if the browser is hacked to not respect these security policies.