Safely embedded JavaScript modules for MediaWiki?

At the Zürich Hackathon I’ve been poking a number of things — more notes to come later — but one fun one is that I’ve continued work on one of my older experiments, getting a demo running on Wikimedia Labs and starting to enhance it for MediaWiki’s relatively new ContentHandler system to create custom structured ‘pages’.

Screen Shot 2014-05-11 at 1.20.04 PM

(TL;DR if you don’t want to click through to the docs on the extension: an isolated iframe is used to sandbox script code from the wiki’s own web environment.)

Currently the ‘JSApplet’ namespace content handler just takes straight JavaScript source, but I’m planning to make it a structured bundle which contains:

  • an HTML scaffold
  • a CSS chunk
  • a JavaScript chunk
  • references to other scripts to include
  • references to SVG or raster image files to include
  • print or non-JS fallback content

Then, a custom view/edit handler for the content type can provide an interface to edit those bits and run an immediate preview — kind of like an embedded JSFiddle.

ContentHandler also allows for a custom transclusion mode — so scripts could perhaps be invoked like ‘{{JSApplet:Mandelbrot}}” instead of having to use an XML-like tag extension manually. Not sure if that’s the best plan, but it’s a thought. :D

I’m also thinking about how to make this work on mobile — in theory these things should be able to work with iframes in embedded web views, but it may require adding special support in the client.

For times when the script can’t be executed, some sort of static fallback content should be shown — still thinking about best ways to support that cleanly and make it something that people will do by default. Hmm, ideas ideas. :)