UPDATE: Opera-supporting code.

I used to wonder how Google AdSense worked. How did those ads from over at Google get on another site over here? This article ignores how Google did it and shows you how you can do it. That is, shows you how to embed JavaScript widgets on other people’s websites.

Demonstration

As a demonstration, the following yellow box and text is dynamically generated from a 3rd party web server without using Ajax:

The embedded code

Only one line of code is required to activate the widget to perform the preceding trick:

<script src="http://drnicwilliams.com/wp-content/uploads/2006/11/xss_magic.js"></script>

You can copy that line into any HTML page (even a static file on your computer) and it will generate the same HTML view. Sexy magic.

Cross Site Scripting

The ability for Google and you to embed dynamic content on someone else’s site is called Cross Site Scripting (XSS). If you read the Wikipedia page, the first sentence announces warnings and dire consequences:

Cross-site scripting (XSS) is a type of computer security vulnerability typically found in web applications which allow malicious web users to inject HTML or client-side script into the web pages viewed by other users.

XSS rocks and Wikipedia is wrong

So, Wikipedia and Google differ in their thinking. I’m with Google. XSS rocks. Wikipedia is for 15 year olds who are too lazy to research their own essays.

Its one thing to provide users of your sites with a REST API or include microformats into your HTML, and let them get their dirty hands on your data.

But its another level of mutual lovey-dovey-ness entirely between for users to be able to embed something from your site into their site. Not just images, but dynamic, sex-on-a-stick content. Like Google AdSense, or Sphere (see the “Sphereit” icon at the bottom of any TechCrunch article), or all the various wacky Digg tools (where you can embed “Digg this” etc into your page and look supercool).

How to do this

If you’ve been diligent enough to learn Javascript, you too can do this at home without parental supervision.

Things you’ll need

The following things are lying around on the internet for you to use:

1. A copy of someone else’s website, say like an article from Ajaxian [1]. This will be called the mock page.
2. Some data you want to embed into the site. Relax, it will look pretty when the users sees it. Your data must be in JSON format. But I’ll explain this later on.

The run-thru of what will happen

The user will load up the webpage (e.g. Ajaxian mock page) that has a small <script src="http://yoursite.com/magic_xss.js"></script> snippet in it [2]. When the page is loaded, the magic_xss.js file is loaded too. The user doesn’t know nor care.

When the magic_xss.js file is loaded it will do a couple of things:

1. Install any stylesheets it needs
2. Insert an empty, invisible HTML element into the page (e.g. <div id="my_magic_xss" />).
3. Read in any variables (e.g. Google Adsense requires the website owner to specify a number of variables, such as google_ad_format)
4. Fetch any additional Javascript files or data. This is where even more dynamic magic can be performed. When requesting the additional data, you could pass back the current document’s URL or the current users’s IP address, and the webserver could return data that is relevant to that URL or IP address/geographic location. Clever, eh.
5. Insert new HTML into the #my_magic_xss element based on the data that is returned from your own server. Your server – not the host website’s server.

XSS is not Ajax

Technically speaking, Ajax uses the XmlHttpRequest object within the browser to fetch content. Unfortunately, in all browsers, it can only fetch content from the same server as the webpage.

That’s why XSS is interesting – we’re fetching data from a 3rd party server. Your server. So, we can’t use XmlHttpRequest.

The tutorial

Hereafter is the tutorial to explain all this. No specific webserver is required for the tutorial – the data returned will be a static file, though you will implement this with your own webapp to be dynamic.

The data

Later on in the tutorial we’ll need some data to represent the dynamic content from your server. For the sake of the demo, you can use my data: http://drnicwilliams.com/wp-content/uploads/2006/11/people_list.js

Remember, in real life this would be a dynamic server request returning dynamic JSON data.

Here’s the JSON we’re going to be using:

MyMagicXss.serverResponse(['Dr Nic', 'Banjo', 'Angus']);

Down the track, this bit of Javascript will be invoked on the browser. It will look for the function MyMagicXss.serverResponse and invoke it with the Array ['Dr Nic', 'Banjo', 'Angus']. The server function would be the same each time. The data would be different.

The embedded javascript

The point of showing you the dynamic data first is to show us that we need 3 things:

1. A way to fetch and evaluate remote javascript without using XmlHttpRequest
2. A function MyMagicXss.serverResponse
3. A place to display these results on the host webpage

These three things are done by the original page that is loaded into the host webpage when the user visits. For our tutorial, this is the xss_magic.js file: http://drnicwilliams.com/wp-content/uploads/2006/11/xss_magic.js

This file looks like:

MyXssMagic = new function() {
  var BASE_URL = 'http://drnicwilliams.com/wp-content/uploads/2006/11/';
  var STYLESHEET = BASE_URL + "xss_magic.css"
  var CONTENT_URL = BASE_URL + 'people_list.js';
  var ROOT = 'my_xss_magic';

  function requestStylesheet(stylesheet_url) {
    stylesheet = document.createElement("link");
    stylesheet.rel = "stylesheet";
    stylesheet.type = "text/css";
    stylesheet.href = stylesheet_url;
    stylesheet.media = "all";
    document.lastChild.firstChild.appendChild(stylesheet);
  }

  function requestContent( local ) {
    var script = document.createElement('script');
    // How you'd pass the current URL into the request
    // script.src = CONTENT_URL + '&url=' + escape(local || location.href);
    script.src = CONTENT_URL;
    // IE7 doesn't like this: document.body.appendChild(script);
    // Instead use:
    document.getElementsByTagName('head')[0].appendChild(script);
  }

  this.serverResponse = function( data ) {
    if (!data) return;
    var div = document.getElementById(ROOT);
    var txt = '';
    for (var i = 0; i < data.length; i++) {
      if (txt.length > 0) { txt += ", "; }
      txt += data[i];
    }
    div.innerHTML = "<strong>Names:</strong> " + txt;  // assign new HTML into #ROOT
    div.style.display = 'block'; // make element visible
  }

  requestStylesheet(STYLESHEET);
  document.write("<div id='" + ROOT + "' style='display: none'></div>");
  requestContent();
}

For the most part you should be able to reuse that and modify it as necessary.

No Javascript frameworks allowed

First point – we should not rely upon any Javascript frameworks (e.g. prototype or jquery) as they might conflict with any Javascript already active in the host page. So, our code is encapsulated in an object MyXssMagic which we hope is unique on any host page.

Step one – install stylesheets

  requestStylesheet(STYLESHEET);

So that your embedded HTML looks pretty you might want to preinstall your own stylesheets.

Step two – create the holder element

  document.write("<div id='" + ROOT + "' style='display: none'></div>");

This allows the code to subsequently know where to insert HTML. Here we’re going to install the HTML at the same location where the host inserted our <script src="..."> code.

Step three – request remote data

   requestContent();

which invokes…

  function requestContent( local ) {
    var script = document.createElement('script');
    script.src = CONTENT_URL;
    // IE7 doesn't like this: document.body.appendChild(script);
    // Instead use:
    document.getElementsByTagName('head')[0].appendChild(script);
  }

We’re going to load our data by creating a new <script src="..."> element into the page. We can’t use XmlHttpRequest, so this is all we have. This means that the response must be pure Javascript, and must invoke a callback function so that the browser does something with the data.

Step four – process response

The browser automatically executes the returned data (introduced earlier):

MyMagicXss.serverResponse(['Dr Nic', 'Banjo', 'Angus']);

This invokes our callback function:

  this.serverResponse = function( data ) {
    if (!data) return;
    var div = document.getElementById(ROOT);
    var txt = '';
    for (var i = 0; i < data.length; i++) {
      if (txt.length > 0) { txt += ", "; }
      txt += data[i];
    }
    div.innerHTML = "<strong>Names:</strong> " + txt;  // assign new HTML into #ROOT
    div.style.display = 'block'; // make element visible
  }

This inserts “Names: Dr Nic, Banjo, Angus” into the element #my_magic_xss, as per the demostration at the start of the article.

Magic!

Epilogue – dynamic interactions

Loading dynamic data and adding HTML into a host page is easy, as shown. Supporting user interactions, where you dynamically load new data and show new HTML, is slightly more complicated.

Remember the rule: the returned JSON data must be wrapped in a callback function (e.g. MyMagicXss.serverResponse(…data…)).

[1] I suggest Ajaxian.com to you because I fancy they might give me something free for doing it. Here’s hoping.

[2] This snippet got into the page because the authors of the site embedded it for you. You can’t make them. But copying a bit of text into a website template is common place thanks to Google AdSense etc, so unless your target audience is 1800th century quilting website owners, you should be fine. Write up some instructions, and give them the small chunk of HTML that they need to embed.

Related posts:

1. Autotesting Javascript in Rails I used to love Javascript so much that it would...
2. Syntax Highlighting in Tumblr I wrote an email to the lovely Tumblr people asking...
3. Supporting JSON callbacks in Rails Now you know how to write JavaScript widgets, now you...