Pairwise Sorter User-Generated HTML

How to safely allow users to run their own code?

There's a difference between running user code, and allowing users to run their code on others pages - and it was the much more difficult and dangrous latter option that I was doing.

Why

The goal was to allow users to customize their list items - imagine your list was a bunch of URLs to images, swapping these out for actual <img /> would obviously make the sorting easier.

It didn't stop at just HTML generation though - with that I could've went with some markdown-style templating language - I wanted users to be able to run their own JavaScript, to allow - for example - the usage of an external API with the items to turn VSCode extension names into HTML representing the extension itself.

Or a bunch of Codewar Kata IDs to be turned into an anchor, title, and description of the Codewar.

Security

While I'm no expert in security, and I'm sure there is some way to exploit my implementation, I'm confident enough to do so - and if all else fails, locking the executation of user-provided code behing a Consent button.

What I used first to run the user-provided JavaScript that would generate the HTML to represent the items was the jailed library, which despite not being secure on Node.js, having no outstanding Browser-based security issues.

I would then take the generated HTML and display it within <iframe>s, ensuring that if one were to generate HTML with more JavaScript within, it wouldn't be able to access anything about the current user.

Client-Side

This did take a considerable amount of client-side JavaScript to manage the UI, call the actual jailed library, and update the localStorage consent data.

With an additional later of caching and toggleability, it was nearly seamless - with a spinner for the first-time generation of HTML.