Strict Standards: Declaration of Walker_Page::start_lvl() should be compatible with Walker::start_lvl($output) in /home/narcvs/blog.narcvs.com/wp-includes/classes.php on line 584

Strict Standards: Declaration of Walker_Page::end_lvl() should be compatible with Walker::end_lvl($output) in /home/narcvs/blog.narcvs.com/wp-includes/classes.php on line 584

Strict Standards: Declaration of Walker_Page::start_el() should be compatible with Walker::start_el($output) in /home/narcvs/blog.narcvs.com/wp-includes/classes.php on line 584

Strict Standards: Declaration of Walker_Page::end_el() should be compatible with Walker::end_el($output) in /home/narcvs/blog.narcvs.com/wp-includes/classes.php on line 584

Strict Standards: Declaration of Walker_PageDropdown::start_el() should be compatible with Walker::start_el($output) in /home/narcvs/blog.narcvs.com/wp-includes/classes.php on line 603

Strict Standards: Declaration of Walker_Category::start_lvl() should be compatible with Walker::start_lvl($output) in /home/narcvs/blog.narcvs.com/wp-includes/classes.php on line 702

Strict Standards: Declaration of Walker_Category::end_lvl() should be compatible with Walker::end_lvl($output) in /home/narcvs/blog.narcvs.com/wp-includes/classes.php on line 702

Strict Standards: Declaration of Walker_Category::start_el() should be compatible with Walker::start_el($output) in /home/narcvs/blog.narcvs.com/wp-includes/classes.php on line 702

Strict Standards: Declaration of Walker_Category::end_el() should be compatible with Walker::end_el($output) in /home/narcvs/blog.narcvs.com/wp-includes/classes.php on line 702

Strict Standards: Declaration of Walker_CategoryDropdown::start_el() should be compatible with Walker::start_el($output) in /home/narcvs/blog.narcvs.com/wp-includes/classes.php on line 727

Strict Standards: Redefining already defined constructor for class wpdb in /home/narcvs/blog.narcvs.com/wp-includes/wp-db.php on line 58

Deprecated: Assigning the return value of new by reference is deprecated in /home/narcvs/blog.narcvs.com/wp-includes/cache.php on line 99

Strict Standards: Redefining already defined constructor for class WP_Object_Cache in /home/narcvs/blog.narcvs.com/wp-includes/cache.php on line 404

Deprecated: Assigning the return value of new by reference is deprecated in /home/narcvs/blog.narcvs.com/wp-includes/query.php on line 21

Deprecated: Assigning the return value of new by reference is deprecated in /home/narcvs/blog.narcvs.com/wp-includes/theme.php on line 576
ajaxlights » Unobtrusive

Archive for the ‘Unobtrusive’ Category

Pick your busts with oFrameBust

Sunday, April 12th, 2009

Update 04-13-09: In focusing on cross-domain communication, I completely overlooked the obvious solution: document.referrer. Assuming document.referer works reliably for iframes cross browser, tather than using oframebust, sites should just do:

(function(){
   var whitelist = ['digg.com', 'facebook.com', 'www.facebook.com'];
   if (window.top.location != window.location) {
      var match = document.referrer.match(/^https?:\/\/([^:\/\s]+)\/?.*/);
      if (match) {
         var domain = match[0];
         for (var i=0; i < whitelist.length; i++) {
            if (domain == whitelist[i]) { return; }
         }
      }
      window.top.location = window.location;
   }
})();

Original post:

One problem it could still potentially solve is the issue of removing the bar once the user navigates away. Could we perhaps use it to communicate to the top frame that the user has navigated away to a new page?

Cheers,
Marcus

The iFrame is an important element in the HTML toolkit. However, while providing crucial functionality it also enables certain nuisances. http://www.meebo.com.br/ is a good example of iframe absue - the domain com.br iframes meebo.com and sticks a banner ad on top of it.

There is a well known solution to this problem - it is called frame busting:

<script type="text/javascript">

if (top.location != location) { top.location = location; }

</script>

However, this solution blindly busts out of all frames. What if you would want to allow for e.g. digg to iframe you, in order to allow for digg visitors to further digg your site and increase your traffic? It would look something like this:

<script type="text/javascript">

if ( ! top.location.domain.match(/digg.com$/) ) {

top.location = location;

}

</script>

This would effectively frame bust all sites but digg.com, were it not for the cross domain policy causing an error when you try to access top.location.domain or top.location.toString(), when top is on a different domain (toString gets called at any time you compare the location object to a string, e.g. top.location == “digg.com”).

oFrameBust is a protocol and an implementation designed to tackle this issue. The protocol works as follows:

Say digg.com wants to iframe¬†http://blog.narcvs.com/?p=55. I permit this, along with say facebook.com and marcuswestin.com, but I don’t want anyone else to iframe my site. On blog.narcvs.com, I just include the oframebust script and list the domains I want to allow:

<script type="text/javascript" src="http://oframebust.com/oframebust.js">

oFrameBust('digg.com', 'www.facebook.com', 'www.marcuswestin.com');

</script>

Then when digg wants to iframe me, they pass in the oframebust parameter declaring their domain:

http://blog.narcvs.com/?p=55&oframebust=digg.com

The oframebust script automatically detects the oframebust GET parameter, and uses it to create an iframe to http://digg.com/oframebust.html - since this page lives on the digg.com, it is allowed to read the top.location.hostname - if the top frame indeed is digg.com!

Now, there is the risk that the top framer is spoofing the digg.com domain. In order to protect from this, the oframebust script passes in the current page url to the oframebust.html page living on diggs domain:

http://digg.com/oframebust.html?http://blog.narcvs.com/?p=55

At this point, if the top frame was spoofing the digg.com domain, the digg.com oframebust page uses the url that was passed in in order to frame bust:

try {

top.location.hostname.toString()

} catch(e) {

top.location=decodeURIComponent(location.search.substr(1))

}

All together, the oframebust protocol is an open source, transparent solution to white listed frame busting! There is already an implementation in place: if you want to whitelist domains, just put

<script type="text/javascript" src="http://oframebust.com/oframebust.js">

oFrameBust('digg.com', 'facebook.com', 'www.facebook.com', 'marcuswestin.com');

</script>

on your site. Then all you’ve got to do is convince those websites to include the oframebust.html page on their domain.

That’s it! Let’s solve this problem as a community, shall we?

Raising the bar - whitelisted frame busting

Monday, March 2nd, 2009

There’s an interesting new trend emerging among web companies - putting a contextualized bar on top of external pages.

StumbleUpon has been doing this for a long time, but the broader trend seems to be new. Facebook started doing it not too long ago, and Digg’s version is currently in beta testing.

The common denominator of the “bar companies” is a wealth of links passing through their servers. They rewrite links passed through their network to point to a page on their own domain, on which they have a bar on top and an iframe below that includes the original, external site.

Being iframed can be annoying, and is easy to avoid. The following javascript snippet “frame busts” your site such that no one can iframe you:

if (location != top.location) { top.location = location }

However, some of these top bars may very well add value to your site. For example, your site becomes more viral - a visitor with the bar on top is probably more likely to share that page with a friend than someone without the bar. Can you allow for some sites to iframe you, but not others? It would look something like:

function frameBustSelectively() {
  // if we're not being framed, just return
  if (top.location == location) { return; }

  // if we're framed by an ok site, just return
  var okDomains = {
    'www.digg.com': true,
    'www.stumbleupon.com': true,
    'www.facebook.com': true
  }
  if (top.location.hostname.toString() in okDomains) { return; }

  // we're framed by a not-ok site - frame bust...
  top.location = location;
}

This is unfortunately not possible. The browser same-origin security model allows you to compare the locations of your current frame and the “top” frame. However, you are not allowed not “inspect” the location of the top frame if it is not on your domain. top.location.hostname.toString() will throw an exception…

So do we give up and call it a day? No - we solve it as a community.

This morning I registered www.oFrameBust.com (in the spirit of oEmbed.com). When it comes up in a day or two there will be a javascript include that you can include on your site that will allow for us as a community to go towards whitelisted iframing. How? Well, it requires some cooperation - but it works:

If you want to iframe a page, you pass in an extra oFrameBust=[your domain] parameter in the GET query of the url. The iframed page will have to include the oFrameBust javascript - if it does, the script will parse the oFrameBust domain out of the GET query, and match it against a white list of allowed domains. If there is a match, the script creates an offscreen iframe pointing to [domain]/oFrameBust.html?url=[document.location.href].

That’s the magic moment. Since you allowed to communicate information through the url to other domains, we now have a page that both knows the current page’s url, and is allowed to inspect the location of the top frame. At this point the oFrameBust.html page can verify that the top frame is indeed the whitelisted domain that was passed in through the oFrameBust get parameter by attempting to read the top.location in a try { } catch(e) { } statement. If it is, everything is well! If not - well, then you just parse out the url of the page that was passed in to [domain]/oFrameBust.html, which used that to say top.location=[url];

I’ve got a prototype of this that will be up on www.oFrameBust.com in two days. Keep an eye out! This is totally intended to be an open source, transparent project, so if you’re interested let me know and I’ll keep you in the loop. After all, this could only succeed as a community.

Unobtrusive Javascrips with jQuery - Loading Spinner

Monday, May 12th, 2008

This is the first in an intended series of small snippets of unobtrusive javascript patterns.

What?

How to effortlessly and unobtrusively have a loading spinner appear on each ajax call with jQuery.
Ajax loading spinner

Why?

There are a number of reasons why, and they fall in a number of different categories

  • UI - You should always keep your user aware of what’s going on. In this case that something is loading.
  • Development - unobtrusive code degrades well by definition, and the effortless part explains itself.
How? Using jQuery
// Create closure
jQuery(function($){
	// Create img dom element and insert it into our document
	var loading = $('<img alt="loading" src="/images/loading.gif" />')
	.appendTo(document.body).hide();
	// Make the image appear during ajax calls
	$(window).ajaxStart(loading.show);
	$(window).ajaxStop(loading.hide);
});