osxh

Obviously Safe XHTML

OSXH is an XHTML dialect that's obviously safe to include in a website. It is intended to represent a user-formatted document, similar to markdown. However, unlike markdown, OSXH is easy to extend with custom attributes (for example data-example).

In contrast to Caja or IE's toStaticHTML, OSXH comes with an explicit specification of which code is valid. This means that the result is reproducible. Additionally, the result can always be rendered without downloading anything (this prevents web bugs).

The numerous ways to defeat blacklists do not apply since OSXH uses a white-list approach. OSXH and its implementations shouldn't only be safe, it should be obvious that they are.

Usage (JavaScript)

To get an osxh object, simply call osxh with the desired configuration:

var osxhi = osxh({allowCSS: true});

Also, get a container element you want to render into:

var container = document.getElementById("container");

You may want to style the container element in order to prevent user-supplied code from escaping it, like this:

#container {
	position: absolute;
	width: 80%;
	height: 100px;
	overflow: auto;
}

Then, render the unsafe osxh_code like this:

var osxh_code = "<osxh><a href="javascript:alert('XSS');">click here</a></osxh>";
osxhi.renderInto(osxh_code, container);

If you want to generate osxh code yourself, call serialize:

var osxh_code = osxhi.serialize(container.childNodes);

Specification

OSXH is an application of XML, with the following restrictions:

• The root element must have the tag name osxh.

• By default, all other elements must be one of a, b, br, code, div, em, figcaption, figure, h1, h2, h3, h4, h5, h6, i, img, li, ol, p, span, strong, table, tbody, td, tfoot, th, thead, tr, u, ul.

• Attributes must be one of:

  • href (only on a) may contain URLs starting with http://, https://, or mailto:.
  • src (only on img) must start with either data:image/gif;, data:image/jpeg;, or data:image/png;.
  • alt is allowed on img.
  • colspan and rowspan are allowed on table cells, with integer values only.
  • title is allowed everywhere.
  • class attributes that contain a space-separated list of classes starting with osxh_ are allowed. In particular, the following classes are suggested:
    • osxh_pre for preformatted blocks of code (typical CSS: white-space:pre)
    • osxh_invisible for temporarily invisible text, for example in a slide of a presentation (typical CSS: visibility: hidden;)
  • style (only if the configuration includes "useCSS": true) may contain certain css declarations (see below)

• XML nodes that are not elements, attributes or text nodes are ignored.

Styles

If useCSS is set in the configuration, osxh allows some CSS declarations. You should make sure to render only into a properly sandboxed container element, with position set to one of absolute, relative, or fixed, a fixed width/height, and overflow set to auto, hidden or scroll.

In any case, OSXH allows the following CSS properties:

• position can be one of absolute, relative, static.
• left, right, top, bottom, width, height can be any auto, a percent value (like 20%), or another length (minus lengths relative to the original viewport).