what's-this?

Content Syndication with Case-Hardened Web Badges

Here's my presentation from the 2008 edition of Web 2.0, originally given at the crack of dawn, 8:30am, Wednesday, 23 April 2008.

Quite a bit more on the subject is available here:

Some Examples:

Examples found in the wild:

Thank You:

Brady Forrest, for letting me do it
Tim O'Reilly, for starting the ball rolling
The folks at Yahoo--Chad, JR, Jeremy, Dan, Eleanor--for encouraging the nuttiness

willkommen-bienvenu-welcome-stranger

Good Morning!

Before We Begin:

We'll be copying and pasting a lot, so:
Please be sure your Internet connection is working. If it's not, let me know: I have this on a memory stick and you can load it locally.
If the Web is strong with you, point your browser at the URL listed at the bottom of this presentation.
Get Firefox up and running. We'll be poking at things with Firebug; please install it from getfirebug.com if you have not already done so.
You'll also need a text editor; my personal favorite is TextPad

Do Me A Favor

If anyone comes in late, please point them at the URL at the bottom of the screen. Thanks!

content-syndication-with-case-hardened-javascript

Content Syndication with Case-Hardened JavaScript, or

Badges! Badges! Badges!

Kent Brewster

http://kentbrewster.com

In just a moment, we'll be off and running into the wonderful world of single-line-include JavaScript badges. But first, it's time to play America's favorite game show....

danger-danger-will-robinson

Disclaimerama!

Yes, I work for Yahoo!, but:

Anything I say is my opinion, not theirs.

If anything breaks, it's my fault, not theirs.

Sorry, I have absolutely nothing to say about the you-know-what. :)

the-state-of-the-art

The State Of The Art:

document.write
- prone to break
- does not work and play well with others
- links in a bunch of mysterious libraries
- just plain horrible code
script + structure + css
- tough for non-nerds to understand
- separate layers = three things to go wrong
- you may not have access to your own HEAD
facebook, igoogle, ning, other closed environments
- high barriers to entry
- it can't run anywhere else
- the matrix is all around you
flash
- don't get me started

whats-on-for-today

Today's Plan

Build a script that:

uses modern DOM methods
is firewalled from the rest of the page as much as possible
requires nothing more than a single line of JavaScript
creates structure, presentation, and behavior layers
securely passes configuration variables from the page, if needed
queries an outside Web service and displays the results
allows further interaction with those results, without re-drawing the page
works and plays nicely with other scripts, including multiple copies of itself
runs right here, right now, on your laptop

Break out your editors, because it's time to copy and paste!

getting-started

Structure

Your basic struture:

<html>
 <head>
  <title>Badge Me!</title>
 </head>
 <body>
  <script src="behavior.js"></script>
 </body>
</html>

Create a working directory and save this file as structure.html.
Trying to type all this in--while a heroic demonstration of keyboarding skillz that has been exhibited more than once in the past--is a Bad Idea. Please copy and paste from the URL listed below!
Note: just about all Web sites should look like this, with separate structure, behavior, and presentation layers.

hello-world

Default Behavior

Save this as behavior.js and run it, by dragging structure.html into your browser:

var MYGLOBAL = window.MYGLOBAL || {};
MYGLOBAL.myProgram = function() {
 return {
  init : function() {
   alert('Hello, world!');
  }
 };
}();
window.onload = function() {
 MYGLOBAL.myProgram.init();
};

Don't close behavior.js or structure.html. We have work to do.

checkpoint

What Just Happened?

If all went well, we've just created a Web page with separate presentation and behavior layers.
When we loaded the page, we saw an alert with a traditional message.
Our script follows modern programming practices. We're hanging the whole thing off a single global variable, MYGLOBAL.

Where We're Vulnerable:

Our global variable is hard-coded into the script, so any other script on the page can hose us, thusly:
window.MYGLOBAL = {};
We're running outside the safety of an anonymous function call with closure, which will firewall the whole thing and make it mucch more secure.
We're waiting for window.onload, which can also be easily hijacked by other scripts on the page.

hide-the-ball

Hide the Ball

We can start to fix this, by obfuscating our root global variable. Here's one way, with a random function name:

var trueName = '';
for (var i = 0; i < 16; i++) {
 trueName += String.fromCharCode(Math.floor(Math.random() * 26) + 97);
}
window[trueName] = {};
window[trueName].myProgram = function() {
 return {
  init : function() {
   alert('Hello, ' + trueName + '!');
  }
 };
}();
window.onload = function() {
 window[trueName].myProgram.init();
};

Save this and run it, to learn your function's true name.

checkpoint

What Just Happened?

Our program is no longer dependent on an easily-hackable global variable.
trueName is one of 43 squintillion possible strings, 26 to the 16th power.
A squintillion is any number you have to squint at to count the decimal places.
It is now very, very hard for an accidental namespace collision to occur.
Yes, trueName is currently a global variable. We'll fix that next.

build-a-wall

Build a Wall

Here we put the whole thing into an anonymous function, and add an internal shortcut. Copy, paste, and run this:

( function() {
 var trueName = '';
 for (var i = 0; i < 16; i++) {
  trueName += String.fromCharCode(Math.floor(Math.random() * 26) + 97);
 }
 window[trueName] = {};
 var $ = window[trueName];
  $.f = function() {
   return {
    init : function() {
     alert('Hello again, ' + trueName + '!');
    }
   };
  }();
 window.onload = function() {
  $.f.init();
 };
})();

checkpoint

What Just Happened?

We've wrapped the whole thing in an anonymous function call.
We've created a pointer $ to window[trueName], which we use from now on instead of myProgram.
$.f is yet another anonymous function. It's not strictly necessary for this example, but it will come in handy later when we need to send data into and out of our badge.
Scope concerns no longer rear their ugly little heads. Instead of trying to figure out when to write this and when to write window[trueName].myFunction, we can just use $.f every time. (Bonus: $.f is one character shorter than this.)

creating-structure

Creating Structure

To make a badge work, we'll need a container element. We'll also want to clean up after the badge loads, just to be sure.

( function() {
 var trueName = '';
 for (var i = 0; i < 16; i++) {
  trueName += String.fromCharCode(Math.floor(Math.random() * 26) + 97);
 }
 window[trueName] = {};
 var $ = window[trueName];
 $.f = function() {
  return {
   init : function(target) {
    var theScripts = document.getElementsByTagName('SCRIPT');
    for (var i = 0; i < theScripts.length; i++) {
     if (theScripts[i].src.match(target)) {
      $.w = document.createElement('DIV');
      $.w.innerHTML = 'Hello, world.  My name is ' + trueName + '.';
      theScripts[i].parentNode.insertBefore($.w, theScripts[i]);
      theScripts[i].parentNode.removeChild(theScripts[i]);
      break;
     }
    }
   }
  };
 }();
 var thisScript = /behavior.js/;
 window.onload = function() {
  $.f.init(thisScript);
 };
})();

Here's where you really do want to be copying and pasting. :)

checkpoint

What Just Happened?

Break out Firebug and inspect your page. You'll notice the script isn't there any longer, just the DIV you created. No more document.write!
In production, you'll want to use the full script path, like this:
/^https?:\/\/[^\/]*yourdomain.com\/yourpath\/behavior.js$/
...instead of /badge.js/. (You want to search for every possible page on yourdomain.com, www or en, for instance, that might wind up being directed to this script.)
Naturally you can name behavior.js whatever you want, as long as you remember to change its name here, and in all the calling Web pages.

wait-for-it

Wait For It!

It's good manners (and critical for low percieved load times) for your badge to wait for the rest of the page to load before firing off. Unfortunately, we can't depend on document.onload.

( function() {
 var trueName = '';
 for (var i = 0; i < 16; i++) {
  trueName += String.fromCharCode(Math.floor(Math.random() * 26) + 97);
 }
 window[trueName] = {};
 var $ = window[trueName];
 $.f = function() {
  return {
   init : function(target) {
    var theScripts = document.getElementsByTagName('SCRIPT');
    for (var i = 0; i < theScripts.length; i++) {
     if (theScripts[i].src.match(target)) {
      $.w = document.createElement('DIV');
      $.w.innerHTML = 'Hello, world.  My name is ' + trueName + '.';
      theScripts[i].parentNode.insertBefore($.w, theScripts[i]);
      theScripts[i].parentNode.removeChild(theScripts[i]);
      break;
     }
    }
   }
  };
 }();
 var thisScript = /behavior.js/;
 if (typeof window.addEventListener !== 'undefined') {
  window.addEventListener('load', function() { $.f.init(thisScript); }, false);
 } else if (typeof window.attachEvent !== 'undefined') {
  window.attachEvent('onload', function() { $.f.init(thisScript); });
 }
})();

checkpoint

What Just Happened?

Unless it's running inline--which is trouble of an entirely different variety--one of the most common moves for a script is to grab the window.onload event.
Instead, we're using addEventListener and attachEvent to wait for our page to load.
The two different methods make our badges run on Firefox version 1 and above, IE6+, Opera 8+, and Safari 1.2 or greater. Other browsers such as Camino and Konqueror also seem fine, but I don't have minimum version numbers.
Once our page has loaded, the badge runs, whether or not another script has grabbed window.onload.

parsing-user-input

Pasing User Input

Here we check for the script's innerHTML attribute, and attempt to parse it as JSON if it's there.

( function() {
 var trueName = '';
 for (var i = 0; i < 16; i++) {
  trueName += String.fromCharCode(Math.floor(Math.random() * 26) + 97);
 }
 window[trueName] = {};
 var $ = window[trueName];
 $.f = function() {
  return {
   init : function(target) {
    var theScripts = document.getElementsByTagName('SCRIPT');
    for (var i = 0; i < theScripts.length; i++) {
     if (theScripts[i].src.match(target)) {
      $.w = document.createElement('DIV');
      $.w.innerHTML = 'Hello, world.  My name is ' + trueName + '.';
      $.a = {};
      if (theScripts[i].innerHTML) {
       $.a = $.f.parseJson(theScripts[i].innerHTML);
      }
      if ($.a.err) {
       alert('bad json!');
      }
      if ($.a.color) {
       $.w.style.color = $.a.color;
      }
      theScripts[i].parentNode.insertBefore($.w, theScripts[i]);
      theScripts[i].parentNode.removeChild(theScripts[i]);
      break;
     }
    }
   },
   parseJson : function(json) {
    this.parseJson.data = json;
    if ( typeof json !== 'string') {
     return {"err":"trying to parse a non-string JSON object"};
    }
    try {
     var f = Function(['var document,top,self,window,parent,Number,Date,Object,Function,',
      'Array,String,Math,RegExp,Image,ActiveXObject;',
      'return (' , json.replace(/<\!--.+-->/gim,'').replace(/\bfunction\b/g,'function') , ');'].join(''));
       return f();
    } catch (e) {
     return {"err":"trouble parsing JSON object"};
    }
   }
  };
 }();
 var thisScript = /behavior.js/;
 if (typeof window.addEventListener !== 'undefined') {
  window.addEventListener('load', function() { $.f.init(thisScript); }, false);
 } else if (typeof window.attachEvent !== 'undefined') {
  window.attachEvent('onload', function() { $.f.init(thisScript); });
 }
})();

Don't run this yet; we need to change structure.html first.

how-to-send-input

Structure, With Input

<html>
 <head>
  <title>Badge Me!</title>
 </head>
 <body>
  <script src="behavior.js">{"color":"red"}</script>
  <script src="behavior.js">{"color":"green"}</script>
  <script src="behavior.js">{"color":"blue"}</script>
 </body>
</html>

Run this, and you ought to see three separate instances of the script on the same page.

checkpoint

What Just Happened?

We set up three different copies of our script, passed arguments, and saw results.
Yes, multiple copies of the same script will run just fine on the same page; bust out Firebug again if you doubt me.
If you send an argument the script doesn't expect, it will be ignored.
If you send an invalid argument, such as {"color":"frodo"}, the script in its current state will attempt to apply it. This should be dealt with using a try-catch block, to minimize chances of mischief. If you're feeling especially paranoid, squash the entire structure node if bad input shows up, like so:
$.w.parentNode.removeChild($.w);

Up next: getting data from an outside Web service.

getting-outside-data

Getting Outside Data

This next little bit is explained in much greater detail in Build a Wikipedia Search Widget in an Hour.

( function() {
 var trueName = '';
 for (var i = 0; i < 16; i++) {
  trueName += String.fromCharCode(Math.floor(Math.random() * 26) + 97);
 }
 window[trueName] = {};
 var $ = window[trueName];
 $.f = function() {
  return {
   init : function(target) {
    var theScripts = document.getElementsByTagName('SCRIPT');
    for (var i = 0; i < theScripts.length; i++) {
     if (theScripts[i].src.match(target)) {
      $.w = document.createElement('DIV');
      $.a = {};
      if (theScripts[i].innerHTML) {
       $.a = $.f.parseJson(theScripts[i].innerHTML);
      }
      if ($.a.err) {
       alert('bad json!');
      }
      $.w.q = document.createElement('INPUT');
      if ($.a.query) {
       $.w.q.value = $.a.query;
      }
      $.w.q.onkeypress = function(e) {
       if ( (e ? e.which : event.keyCode) == 13) {
        $.f.runSearch();
       }
      };
      $.w.appendChild($.w.q);
      $.w.b = document.createElement('BUTTON');
      $.w.b.innerHTML = 'Search';
      if ($.a.site) {
       $.w.b.innerHTML += ' ' + $.a.site;
      }
      $.w.b.onmouseup = function() {
       $.f.runSearch();
      };
      $.w.appendChild($.w.b);
      $.w.r = document.createElement('UL');
      $.w.appendChild($.w.r);
      theScripts[i].parentNode.insertBefore($.w, theScripts[i]);
      theScripts[i].parentNode.removeChild(theScripts[i]);
      break;
     }
    }
   },
   runSearch : function() {
    $.w.r.innerHTML = '';
    if ($.w.q.value) {
     if (!$.f.runFunction) {
      $.f.runFunction = [];
     }
     var n = $.f.runFunction.length;
     var id = trueName + '.f.runFunction[' + n + ']';
     $.f.runFunction[n] = function(r) {
      delete($.f.runFunction[n]);
      $.f.removeScript(id);
      $.f.renderResult(r);
     }
     var url = 'http://search.yahooapis.com/WebSearchService/V1/webSearch?';
     url += '&appid=YahooSearch';
     url += '&results=5';
     url += '&output=json';
     url += '&query=' + $.w.q.value;
     url += '&callback=' + id;
     if ($.a.site) {
      url += '&site=' + $.a.site;
     }
     $.f.runScript(url, id);
    }
   },
   renderResult: function(r) {
    for (var i = 0; i < r.ResultSet.Result.length; i++) {
     var li = document.createElement('LI');
     var a = document.createElement('A');
     a.innerHTML = r.ResultSet.Result[i].Title;
     a.href = r.ResultSet.Result[i].Url;
     a.target = '_blank';
     li.appendChild(a);
     $.w.r.appendChild(li);
    }
   },
   runScript : function(url, id) {
    var s = document.createElement('script');
    s.id = id;
    s.type ='text/javascript';
    s.src = url;
    document.getElementsByTagName('body')[0].appendChild(s);
   },
   removeScript : function(id) {
    var s = '';
    if (s = document.getElementById(id)) {
     s.parentNode.removeChild(s);
    }
   },
   parseJson : function(json) {
    this.parseJson.data = json;
    if ( typeof json !== 'string') {
     return {"err":"trying to parse a non-string JSON object"};
    }
    try {
     var f = Function(['var document,top,self,window,parent,Number,Date,Object,Function,',
      'Array,String,Math,RegExp,Image,ActiveXObject;',
      'return (' , json.replace(/<\!--.+-->/gim,'').replace(/\bfunction\b/g,'function') , ');'].join(''));
       return f();
    } catch (e) {
     return {"err":"trouble parsing JSON object"};
    }
   }
  };
 }();
 var thisScript = /behavior.js/;
 if (typeof window.addEventListener !== 'undefined') {
  window.addEventListener('load', function() { $.f.init(thisScript); }, false);
 } else if (typeof window.attachEvent !== 'undefined') {
  window.attachEvent('onload', function() { $.f.init(thisScript); });
 }
})();

Don't run this yet; we need to fix up the structure.

how-to-send-input

Structure, With Input

<html>
 <head>
  <title>Badge Me!</title>
 </head>
 <body>
  <script src="behavior.js"></script>
  <script src="behavior.js">{ "site":"en.wikipedia.org" }</script>
  <script src="behavior.js">{ "query":"madonna", "site":"mtv.com" }</script>
 </body>
</html>

Run this, and you ought to see three separate search widgets, with different default sites and queries.

checkpoint

What Just Happened?

Using Yahoo's excellent Web Search API, we sent a query.
We created a dynamic script tag to do this, requesting our data in the form of a JSON object with a callback.
When the data arrived, we were waiting. We rendered it, and deleted our callback function and the script tag that received it. (Go on, check out your structure with Firebug again; no script tags should be in evidence.
Our first example ran Web search with no restrictions. Our second showed results only from en.wikipedia.org. Our third had a default query set already, and showed results only from mtv.com.
Once again, multiple copies co-existed just fine.
Yes, this solves the age-old "how do I put inline search results on my blog?" question pretty thoroughly.

styling-it-up

Creating Stylesheets

( function() {
 var trueName = '';
 for (var i = 0; i < 16; i++) {
  trueName += String.fromCharCode(Math.floor(Math.random() * 26) + 97);
 }
 window[trueName] = {};
 var $ = window[trueName];
 $.f = function() {
  return {
   init : function(target) {
    var theScripts = document.getElementsByTagName('SCRIPT');
    for (var i = 0; i < theScripts.length; i++) {
     if (theScripts[i].src.match(target)) {
      $.w = document.createElement('DIV');
      $.a = {};
      if (theScripts[i].innerHTML) {
       $.a = $.f.parseJson(theScripts[i].innerHTML);
      }
      if ($.a.err) {
       alert('bad json!');
      }
      $.d = {"background":"#fff", "border":"1px solid #000"};
      for (var k in $.d) {
       if ($.a[k] === undefined) {
        $.a[k] = $.d[k];
       }
      }
      var ns = document.createElement('style');
      document.getElementsByTagName('head')[0].appendChild(ns);
      if (!window.createPopup) {
       ns.appendChild(document.createTextNode(''));
       ns.setAttribute("type", "text/css");
      }
      var s = document.styleSheets[document.styleSheets.length - 1];
      var rules = {
       "" : "{zoom:1;padding:5px;margin:5px;background:" + $.a.background + ";border:" + $.a.border + "}",
       "button":"{margin-left:5px;}",
       "ul" : "{margin:0; padding:0;}",
       "ul li" : "{list-style:none;}",
      };
      var ieRules = "";
      for (r in rules) {
       var selector = '.' + trueName + ' ' + r;
       if (!window.createPopup) {
        var theRule = document.createTextNode(selector + rules[r]);
        ns.appendChild(theRule);
       } else {
        ieRules += selector + rules[r];
       }
      }
      if (window.createPopup) {
       s.cssText = ieRules;
      }
      $.w.className = trueName;
      $.w.q = document.createElement('INPUT');
      if ($.a.query) {
       $.w.q.value = $.a.query;
      }
      $.w.q.onkeypress = function(e) {
       if ( (e ? e.which : event.keyCode) == 13) {
        $.f.runSearch();
       }
      };
      $.w.appendChild($.w.q);
      $.w.b = document.createElement('BUTTON');
      $.w.b.innerHTML = 'Search';
      if ($.a.site) {
       $.w.b.innerHTML += ' ' + $.a.site;
      }
      $.w.b.onmouseup = function() {
       $.f.runSearch();
      };
      $.w.appendChild($.w.b);
      $.w.r = document.createElement('UL');
      $.w.appendChild($.w.r);
      theScripts[i].parentNode.insertBefore($.w, theScripts[i]);
      theScripts[i].parentNode.removeChild(theScripts[i]);
      break;
     }
    }
   },
   runSearch : function() {
    $.w.r.innerHTML = '';
    if ($.w.q.value) {
     if (!$.f.runFunction) {
      $.f.runFunction = [];
     }
     var n = $.f.runFunction.length;
     var id = trueName + '.f.runFunction[' + n + ']';
     $.f.runFunction[n] = function(r) {
      delete($.f.runFunction[n]);
      $.f.removeScript(id);
      $.f.renderResult(r);
     }
     var url = 'http://search.yahooapis.com/WebSearchService/V1/webSearch?';
     url += '&appid=YahooSearch';
     url += '&results=5';
     url += '&output=json';
     url += '&query=' + $.w.q.value;
     url += '&callback=' + id;
     if ($.a.site) {
      url += '&site=' + $.a.site;
     }
     $.f.runScript(url, id);
    }
   },
   renderResult: function(r) {
    for (var i = 0; i < r.ResultSet.Result.length; i++) {
     var li = document.createElement('LI');
     var a = document.createElement('A');
     a.innerHTML = r.ResultSet.Result[i].Title;
     a.href = r.ResultSet.Result[i].Url;
     a.target = '_blank';
     li.appendChild(a);
     $.w.r.appendChild(li);
    }
   },
   runScript : function(url, id) {
    var s = document.createElement('script');
    s.id = id;
    s.type ='text/javascript';
    s.src = url;
    document.getElementsByTagName('body')[0].appendChild(s);
   },
   removeScript : function(id) {
    var s = '';
    if (s = document.getElementById(id)) {
     s.parentNode.removeChild(s);
    }
   },
   parseJson : function(json) {
    this.parseJson.data = json;
    if ( typeof json !== 'string') {
     return {"err":"trying to parse a non-string JSON object"};
    }
    try {
     var f = Function(['var document,top,self,window,parent,Number,Date,Object,Function,',
      'Array,String,Math,RegExp,Image,ActiveXObject;',
      'return (' , json.replace(/<\!--.+-->/gim,'').replace(/\bfunction\b/g,'function') , ');'].join(''));
       return f();
    } catch (e) {
     return {"err":"trouble parsing JSON object"};
    }
   }
  };
 }();
 var thisScript = /behavior.js/;
 if (typeof window.addEventListener !== 'undefined') {
  window.addEventListener('load', function() { $.f.init(thisScript); }, false);
 } else if (typeof window.attachEvent !== 'undefined') {
  window.attachEvent('onload', function() { $.f.init(thisScript); });
 }
})();

Don't run this yet; we're going to pass some different arguments in for the stylesheet creator.

some-sample-arguments

Here we're dropping in a couple of basic CSS selectors, background and border.

<html>
 <head>
  <title>Badge Me!</title>
 </head>
 <body>
  <script src="behavior.js"></script>
  <script src="behavior.js">{"site":"en.wikipedia.org", "background":"#ffa"}</script>
  <script src="behavior.js">{"query":"madonna", "site":"mtv.com", "border":"1px solid red"}</script>
 </body>
</html>

Save this and run it; we're almost done.

checkpoint

What Just Happened?

As before, we have three copies of the same script. This time, we style each one differently.
Any valid CSS will work here; anything invalid may or may not break things.
Again, a try-catch block would be highly advisable.)
Also highly advisable: the Yahoo User Interface Library's Fonts and CSS Reset stylesheets. These can be grabbed from http://developer.yahoo.com/yui/reset, translated to rules in our dynamic stylesheet, and we won't have to worry about anything outside the badge dictating styles inside, and vice versa.

th-th-that's-all-folks!

The End

Thank You:

Brady Forrest, Doug Crockford, Hedger Wang, Scott Schille, PPK, Isaac Schleuter, Brothercake, Nate Koechley, Thomas Sha, Matt Sweeney, and Dave Balmer.

Questions?

Meet Me at the Y! Booth This Afternoon

Content Syndication with Case-Hardened Web Badges

Good Morning!

Before We Begin:

Do Me A Favor

Content Syndication with Case-Hardened JavaScript, or

Badges! Badges! Badges!

Kent Brewster

http://kentbrewster.com

In just a moment, we'll be off and running into the wonderful world of single-line-include JavaScript badges. But first, it's time to play America's favorite game show....

Disclaimerama!

Yes, I work for Yahoo!, but:

Anything I say is my opinion, not theirs. If anything breaks, it's my fault, not theirs. Sorry, I have absolutely nothing to say about the you-know-what. :)

The State Of The Art:

Today's Plan

Break out your editors, because it's time to copy and paste!

Structure

Default Behavior

What Just Happened?

Where We're Vulnerable:

Hide the Ball

What Just Happened?

Build a Wall

What Just Happened?

Creating Structure

What Just Happened?

Wait For It!

What Just Happened?

Pasing User Input

Structure, With Input

What Just Happened?

Getting Outside Data

Structure, With Input

What Just Happened?

Creating Stylesheets

What Just Happened?

The End

See Also:

Thank You:

Questions?

Anything I say is my opinion, not theirs.

If anything breaks, it's my fault, not theirs.

Sorry, I have absolutely nothing to say about the you-know-what. :)