Extension:EmbedSandbox

work in progress


 * MediaWiki extension code: https://github.com/brion/EmbedSandbox
 * embedded code demos:
 * piechart: https://github.com/brion/EmbedPiechart
 * turtle graphics: https://github.com/brion/EmbedTurtle

Cross-origin embedding
Gadgets and other custom user / site JavaScript today are very powerful, but because they have full access to the wiki's documents and session they are potentially dangerous. Using someone else's script could turn out to do something like hijack your account to make other edits on your behalf!

Using an to embed a script hosted on another domain allows the browser environment's security systems to work for us, severely restricting access to the hosting wiki from code in the embedded context.

Using the window.postMessage facility, wide browser compatibility can be achieved in adding a limited messaging layer between the wiki and the embeddings. Both the hosting site and the embed code within the iframe can verify the origin of the messages as being from the other window, and only that data exchange is allowed.

In my initial example, JSON data stored within the &lt;embedsandbox> tag is passed into the frame on loading, so it can be used as source data to draw a pie chart.

Cross-origin for local code
If code is locally stored/created on the wiki, how can we sandbox it too?

One way is to have a remote embedding page whose sole purpose is to load code from another domain and run it there.

Using redirects to randomly-generated subdomains could ensure that every script has a separate security context.

JSON blob
Initial example uses a JSON blob. Invocation looks like this:

 {"data":[23,40,67],"labels":["small","medium","large"]}

The JSON blob is attached as a data attribute to the actual iframe, and code on the host end sends that data along with an activation message to the iframe's content window once it's initialized.

The embed code pulls the data out and draws some pie slices using the Raphael.js graphics library.

SVG extension
Next step will be to use a static SVG image as a data wrapper; this image can then be saved by the host environment and used as a static image before activating the embedded code.

Raster image + data
Raster images may be more appropriate for some styles.