Web 2.0 has enabled us to create mash ups of content within our site.  At the same time it also enable a new type of security attack, namely cross site scripting, commonly referred to as XSS attacks.

Cross-site scripting exploit website vulnerabilities which allow attackers to bypass client-side security mechanisms normally imposed on web content by modern browsers. Cross site scripting injects malicious scripts into web pages. An attacker can gain elevated access privileges to sensitive page content, session cookies, and a variety of other information maintained by the browser on behalf of the user.

Mozilla Firefox has put a stop to cross side scripting ever since Firefox 3 Alpha 6. A side effect of mozilla’s security measure is that developers will not be able to easily load a website content to their HTML Page.

The following jQuery code will load google front page in IE but not in Firefox:

$('#load').load('http://www.mozilla.com/en-US/');

Fancybox  IFrame

We can load a website content using an iframe. Fancybox is a jQuery plugin that allow developers to easily displays iframe within our site. I use Fancybox to manage Google’s search result on my experimental geolocation web application Locate For Me:

Using fancy box is extremely straightforward. Let just say we have the following Google map URL that we want to load within an iframe

<a class="extLink" href="http://www.google.com/maps/place?source=uds&q=88&cid=2273293873063803114">This goes to iframe</a>

We only need to add the following code snipped to load the URL into an iframe:

	$(document).ready(function(){
		$(".extLink").fancybox({
			 'width' : '75%',
			 'height' : '75%',
			 'autoScale' : false,
			 'transitionIn' : 'none',
			 'transitionOut' : 'none',
			 'type' : 'iframe'
		 });

		 });
    });

Fancy box can also be used to load ajax content to iFrame and creating a nice image gallery. Refer to fancy box how-to for a more definitive example on how to use fancybox to create iframes or ajax.

Reference:
1. Locate for me
2. Fancy Box