Safely displaying untrusted HTML

aoakley — Wed, 12 Nov 2003 22:26:00 GMT

One of the challenges in importing external RSS feeds for the annotations aggregator is how to safely display untrusted HTML. Enter the SECURITY attribute of the IFRAME, a great way of instructing the browser to render the contents of the frame in the Restricted Sites zone, thus (by default) limiting the capabilities of HTML in that frame to markup and not much else.

To cut a long story short, the client-side component encodes the incoming HTML from the RSS feed and ships it around in that HtmlEncoded state through a series of transforms to provide sorting, create borders and generally beautify. Just before it’s rendered in the browser, there’s a final decoding step to decode that content back into HTML so that the markup is interpreted for display to the end user.

Since there’s no built-in client side implementation, here’s a rendition of Server.HtmlDecode in Javascript:

// HtmlDecode http://lab.msdn.microsoft.com/annotations/htmldecode.js

// client side version of the useful Server.HtmlDecode method

// takes one string (encoded) and returns another (decoded)

function HtmlDecode(s)

{

var out = "";

if (s==null) return;

var l = s.length;

for (var i=0; i<l; i++)

{

var ch = s.charAt(i);

if (ch == '&')

{

var semicolonIndex = s.indexOf(';', i+1);

if (semicolonIndex > 0)

{

var entity = s.substring(i + 1, semicolonIndex);

if (entity.length > 1 && entity.charAt(0) == '#')

{

if (entity.charAt(1) == 'x' || entity.charAt(1) == 'X')

ch = String.fromCharCode(eval('0'+entity.substring(1)));

else

ch = String.fromCharCode(eval(entity.substring(1)));

}

else

{

switch (entity)

{

case 'quot': ch = String.fromCharCode(0x0022); break;

case 'amp': ch = String.fromCharCode(0x0026); break;

case 'lt': ch = String.fromCharCode(0x003c); break;

case 'gt': ch = String.fromCharCode(0x003e); break;

case 'nbsp': ch = String.fromCharCode(0x00a0); break;

case 'iexcl': ch = String.fromCharCode(0x00a1); break;

case 'cent': ch = String.fromCharCode(0x00a2); break;

case 'pound': ch = String.fromCharCode(0x00a3); break;

case 'curren': ch = String.fromCharCode(0x00a4); break;

case 'yen': ch = String.fromCharCode(0x00a5); break;

case 'brvbar': ch = String.fromCharCode(0x00a6); break;

case 'sect': ch = String.fromCharCode(0x00a7); break;

case 'uml': ch = String.fromCharCode(0x00a8); break;

case 'copy': ch = String.fromCharCode(0x00a9); break;

case 'ordf': ch = String.fromCharCode(0x00aa); break;

case 'laquo': ch = String.fromCharCode(0x00ab); break;

case 'not': ch = String.fromCharCode(0x00ac); break;

case 'shy': ch = String.fromCharCode(0x00ad); break;

case 'reg': ch = String.fromCharCode(0x00ae); break;

case 'macr': ch = String.fromCharCode(0x00af); break;

case 'deg': ch = String.fromCharCode(0x00b0); break;

case 'plusmn': ch = String.fromCharCode(0x00b1); break;

case 'sup2': ch = String.fromCharCode(0x00b2); break;

case 'sup3': ch = String.fromCharCode(0x00b3); break;

case 'acute': ch = String.fromCharCode(0x00b4); break;

case 'micro': ch = String.fromCharCode(0x00b5); break;

case 'para': ch = String.fromCharCode(0x00b6); break;

case 'middot': ch = String.fromCharCode(0x00b7); break;

case 'cedil': ch = String.fromCharCode(0x00b8); break;

case 'sup1': ch = String.fromCharCode(0x00b9); break;

case 'ordm': ch = String.fromCharCode(0x00ba); break;

case 'raquo': ch = String.fromCharCode(0x00bb); break;

case 'frac14': ch = String.fromCharCode(0x00bc); break;

case 'frac12': ch = String.fromCharCode(0x00bd); break;

case 'frac34': ch = String.fromCharCode(0x00be); break;

case 'iquest': ch = String.fromCharCode(0x00bf); break;

case 'Agrave': ch = String.fromCharCode(0x00c0); break;

case 'Aacute': ch = String.fromCharCode(0x00c1); break;

case 'Acirc': ch = String.fromCharCode(0x00c2); break;

case 'Atilde': ch = String.fromCharCode(0x00c3); break;

case 'Auml': ch = String.fromCharCode(0x00c4); break;

case 'Aring': ch = String.fromCharCode(0x00c5); break;

case 'AElig': ch = String.fromCharCode(0x00c6); break;

case 'Ccedil': ch = String.fromCharCode(0x00c7); break;

case 'Egrave': ch = String.fromCharCode(0x00c8); break;

case 'Eacute': ch = String.fromCharCode(0x00c9); break;

case 'Ecirc': ch = String.fromCharCode(0x00ca); break;

case 'Euml': ch = String.fromCharCode(0x00cb); break;

case 'Igrave': ch = String.fromCharCode(0x00cc); break;

case 'Iacute': ch = String.fromCharCode(0x00cd); break;

case 'Icirc': ch = String.fromCharCode(0x00ce ); break;

case 'Iuml': ch = String.fromCharCode(0x00cf); break;

case 'ETH': ch = String.fromCharCode(0x00d0); break;

case 'Ntilde': ch = String.fromCharCode(0x00d1); break;

case 'Ograve': ch = String.fromCharCode(0x00d2); break;

case 'Oacute': ch = String.fromCharCode(0x00d3); break;

case 'Ocirc': ch = String.fromCharCode(0x00d4); break;

case 'Otilde': ch = String.fromCharCode(0x00d5); break;

case 'Ouml': ch = String.fromCharCode(0x00d6); break;

case 'times': ch = String.fromCharCode(0x00d7); break;

case 'Oslash': ch = String.fromCharCode(0x00d8); break;

case 'Ugrave': ch = String.fromCharCode(0x00d9); break;

case 'Uacute': ch = String.fromCharCode(0x00da); break;

case 'Ucirc': ch = String.fromCharCode(0x00db); break;

case 'Uuml': ch = String.fromCharCode(0x00dc); break;

case 'Yacute': ch = String.fromCharCode(0x00dd); break;

case 'THORN': ch = String.fromCharCode(0x00de); break;

case 'szlig': ch = String.fromCharCode(0x00df); break;

case 'agrave': ch = String.fromCharCode(0x00e0); break;

case 'aacute': ch = String.fromCharCode(0x00e1); break;

case 'acirc': ch = String.fromCharCode(0x00e2); break;

case 'atilde': ch = String.fromCharCode(0x00e3); break;

case 'auml': ch = String.fromCharCode(0x00e4); break;

case 'aring': ch = String.fromCharCode(0x00e5); break;

case 'aelig': ch = String.fromCharCode(0x00e6); break;

case 'ccedil': ch = String.fromCharCode(0x00e7); break;

case 'egrave': ch = String.fromCharCode(0x00e8); break;

case 'eacute': ch = String.fromCharCode(0x00e9); break;

case 'ecirc': ch = String.fromCharCode(0x00ea); break;

case 'euml': ch = String.fromCharCode(0x00eb); break;

case 'igrave': ch = String.fromCharCode(0x00ec); break;

case 'iacute': ch = String.fromCharCode(0x00ed); break;

case 'icirc': ch = String.fromCharCode(0x00ee); break;

case 'iuml': ch = String.fromCharCode(0x00ef); break;

case 'eth': ch = String.fromCharCode(0x00f0); break;

case 'ntilde': ch = String.fromCharCode(0x00f1); break;

case 'ograve': ch = String.fromCharCode(0x00f2); break;

case 'oacute': ch = String.fromCharCode(0x00f3); break;

case 'ocirc': ch = String.fromCharCode(0x00f4); break;

case 'otilde': ch = String.fromCharCode(0x00f5); break;

case 'ouml': ch = String.fromCharCode(0x00f6); break;

case 'divide': ch = String.fromCharCode(0x00f7); break;

case 'oslash': ch = String.fromCharCode(0x00f8); break;

case 'ugrave': ch = String.fromCharCode(0x00f9); break;

case 'uacute': ch = String.fromCharCode(0x00fa); break;

case 'ucirc': ch = String.fromCharCode(0x00fb); break;

case 'uuml': ch = String.fromCharCode(0x00fc); break;

case 'yacute': ch = String.fromCharCode(0x00fd); break;

case 'thorn': ch = String.fromCharCode(0x00fe); break;

case 'yuml': ch = String.fromCharCode(0x00ff); break;

case 'OElig': ch = String.fromCharCode(0x0152); break;

case 'oelig': ch = String.fromCharCode(0x0153); break;

case 'Scaron': ch = String.fromCharCode(0x0160); break;

case 'scaron': ch = String.fromCharCode(0x0161); break;

case 'Yuml': ch = String.fromCharCode(0x0178); break;

case 'fnof': ch = String.fromCharCode(0x0192); break;

case 'circ': ch = String.fromCharCode(0x02c6); break;

case 'tilde': ch = String.fromCharCode(0x02dc); break;

case 'Alpha': ch = String.fromCharCode(0x0391); break;

case 'Beta': ch = String.fromCharCode(0x0392); break;

case 'Gamma': ch = String.fromCharCode(0x0393); break;

case 'Delta': ch = String.fromCharCode(0x0394); break;

case 'Epsilon': ch = String.fromCharCode(0x0395); break;

case 'Zeta': ch = String.fromCharCode(0x0396); break;

case 'Eta': ch = String.fromCharCode(0x0397); break;

case 'Theta': ch = String.fromCharCode(0x0398); break;

case 'Iota': ch = String.fromCharCode(0x0399); break;

case 'Kappa': ch = String.fromCharCode(0x039a); break;

case 'Lambda': ch = String.fromCharCode(0x039b); break;

case 'Mu': ch = String.fromCharCode(0x039c); break;

case 'Nu': ch = String.fromCharCode(0x039d); break;

case 'Xi': ch = String.fromCharCode(0x039e); break;

case 'Omicron': ch = String.fromCharCode(0x039f); break;

case 'Pi': ch = String.fromCharCode(0x03a0); break;

case ' Rho ': ch = String.fromCharCode(0x03a1); break;

case 'Sigma': ch = String.fromCharCode(0x03a3); break;

case 'Tau': ch = String.fromCharCode(0x03a4); break;

case 'Upsilon': ch = String.fromCharCode(0x03a5); break;

case 'Phi': ch = String.fromCharCode(0x03a6); break;

case 'Chi': ch = String.fromCharCode(0x03a7); break;

case 'Psi': ch = String.fromCharCode(0x03a8); break;

case 'Omega': ch = String.fromCharCode(0x03a9); break;

case 'alpha': ch = String.fromCharCode(0x03b1); break;

case 'beta': ch = String.fromCharCode(0x03b2); break;

case 'gamma': ch = String.fromCharCode(0x03b3); break;

case 'delta': ch = String.fromCharCode(0x03b4); break;

case 'epsilon': ch = String.fromCharCode(0x03b5); break;

case 'zeta': ch = String.fromCharCode(0x03b6); break;

case 'eta': ch = String.fromCharCode(0x03b7); break;

case 'theta': ch = String.fromCharCode(0x03b8); break;

case 'iota': ch = String.fromCharCode(0x03b9); break;

case 'kappa': ch = String.fromCharCode(0x03ba); break;

case 'lambda': ch = String.fromCharCode(0x03bb); break;

case 'mu': ch = String.fromCharCode(0x03bc); break;

case 'nu': ch = String.fromCharCode(0x03bd); break;

case 'xi': ch = String.fromCharCode(0x03be); break;

case 'omicron': ch = String.fromCharCode(0x03bf); break;

case 'pi': ch = String.fromCharCode(0x03c0); break;

case 'rho': ch = String.fromCharCode(0x03c1); break;

case 'sigmaf': ch = String.fromCharCode(0x03c2); break;

case 'sigma': ch = String.fromCharCode(0x03c3); break;

case 'tau': ch = String.fromCharCode(0x03c4); break;

case 'upsilon': ch = String.fromCharCode(0x03c5); break;

case 'phi': ch = String.fromCharCode(0x03c6); break;

case 'chi': ch = String.fromCharCode(0x03c7); break;

case 'psi': ch = String.fromCharCode(0x03c8); break;

case 'omega': ch = String.fromCharCode(0x03c9); break;

case 'thetasym': ch = String.fromCharCode(0x03d1); break;

case 'upsih': ch = String.fromCharCode(0x03d2); break;

case 'piv': ch = String.fromCharCode(0x03d6); break;

case 'ensp': ch = String.fromCharCode(0x2002); break;

case 'emsp': ch = String.fromCharCode(0x2003); break;

case 'thinsp': ch = String.fromCharCode(0x2009); break;

case 'zwnj': ch = String.fromCharCode(0x200c); break;

case 'zwj': ch = String.fromCharCode(0x200d); break;

case 'lrm': ch = String.fromCharCode(0x200e); break;

case 'rlm': ch = String.fromCharCode(0x200f); break;

case 'ndash': ch = String.fromCharCode(0x2013); break;

case 'mdash': ch = String.fromCharCode(0x2014); break;

case 'lsquo': ch = String.fromCharCode(0x2018); break;

case 'rsquo': ch = String.fromCharCode(0x2019); break;

case 'sbquo': ch = String.fromCharCode(0x201a); break;

case 'ldquo': ch = String.fromCharCode(0x201c); break;

case 'rdquo': ch = String.fromCharCode(0x201d); break;

case 'bdquo': ch = String.fromCharCode(0x201e); break;

case 'dagger': ch = String.fromCharCode(0x2020); break;

case 'Dagger': ch = String.fromCharCode(0x2021); break;

case 'bull': ch = String.fromCharCode(0x2022); break;

case 'hellip': ch = String.fromCharCode(0x2026); break;

case 'permil': ch = String.fromCharCode(0x2030); break;

case 'prime': ch = String.fromCharCode(0x2032); break;

case 'Prime': ch = String.fromCharCode(0x2033); break;

case 'lsaquo': ch = String.fromCharCode(0x2039); break;

case 'rsaquo': ch = String.fromCharCode(0x203a); break;

case 'oline': ch = String.fromCharCode(0x203e); break;

case 'frasl': ch = String.fromCharCode(0x2044); break;

case 'euro': ch = String.fromCharCode(0x20ac); break;

case 'image': ch = String.fromCharCode(0x2111); break;

case 'weierp': ch = String.fromCharCode(0x2118); break;

case 'real': ch = String.fromCharCode(0x211c); break;

case 'trade': ch = String.fromCharCode(0x2122); break;

case 'alefsym': ch = String.fromCharCode(0x2135); break;

case 'larr': ch = String.fromCharCode(0x2190); break;

case 'uarr': ch = String.fromCharCode(0x2191); break;

case 'rarr': ch = String.fromCharCode(0x2192); break;

case 'darr': ch = String.fromCharCode(0x2193); break;

case 'harr': ch = String.fromCharCode(0x2194); break;

case 'crarr': ch = String.fromCharCode(0x21b5); break;

case 'lArr': ch = String.fromCharCode(0x21d0); break;

case 'uArr': ch = String.fromCharCode(0x21d1); break;

case 'rArr': ch = String.fromCharCode(0x21d2); break;

case 'dArr': ch = String.fromCharCode(0x21d3); break;

case 'hArr': ch = String.fromCharCode(0x21d4); break;

case 'forall': ch = String.fromCharCode(0x2200); break;

case 'part': ch = String.fromCharCode(0x2202); break;

case 'exist': ch = String.fromCharCode(0x2203); break;

case 'empty': ch = String.fromCharCode(0x2205); break;

case 'nabla': ch = String.fromCharCode(0x2207); break;

case 'isin': ch = String.fromCharCode(0x2208); break;

case 'notin': ch = String.fromCharCode(0x2209); break;

case 'ni': ch = String.fromCharCode(0x220b); break;

case 'prod': ch = String.fromCharCode(0x220f); break;

case 'sum': ch = String.fromCharCode(0x2211); break;

case 'minus': ch = String.fromCharCode(0x2212); break;

case 'lowast': ch = String.fromCharCode(0x2217); break;

case 'radic': ch = String.fromCharCode(0x221a); break;

case 'prop': ch = String.fromCharCode(0x221d); break;

case 'infin': ch = String.fromCharCode(0x221e); break;

case 'ang': ch = String.fromCharCode(0x2220); break;

case 'and': ch = String.fromCharCode(0x2227); break;

case 'or': ch = String.fromCharCode(0x2228); break;

case 'cap': ch = String.fromCharCode(0x2229); break;

case 'cup': ch = String.fromCharCode(0x222a); break;

case 'int': ch = String.fromCharCode(0x222b); break;

case 'there4': ch = String.fromCharCode(0x2234); break;

case 'sim': ch = String.fromCharCode(0x223c); break;

case 'cong': ch = String.fromCharCode(0x2245); break;

case 'asymp': ch = String.fromCharCode(0x2248); break;

case 'ne': ch = String.fromCharCode(0x2260); break;

case 'equiv': ch = String.fromCharCode(0x2261); break;

case 'le': ch = String.fromCharCode(0x2264); break;

case 'ge': ch = String.fromCharCode(0x2265); break;

case 'sub': ch = String.fromCharCode(0x2282); break;

case 'sup': ch = String.fromCharCode(0x2283); break;

case 'nsub': ch = String.fromCharCode(0x2284); break;

case 'sube': ch = String.fromCharCode(0x2286); break;

case 'supe': ch = String.fromCharCode(0x2287); break;

case 'oplus': ch = String.fromCharCode(0x2295); break;

case 'otimes': ch = String.fromCharCode(0x2297); break;

case 'perp': ch = String.fromCharCode(0x22a5); break;

case 'sdot': ch = String.fromCharCode(0x22c5); break;

case 'lceil': ch = String.fromCharCode(0x2308); break;

case 'rceil': ch = String.fromCharCode(0x2309); break;

case 'lfloor': ch = String.fromCharCode(0x230a); break;

case 'rfloor': ch = String.fromCharCode(0x230b); break;

case 'lang': ch = String.fromCharCode(0x2329); break;

case 'rang': ch = String.fromCharCode(0x232a); break;

case 'loz': ch = String.fromCharCode(0x25ca); break;

case 'spades': ch = String.fromCharCode(0x2660); break;

case 'clubs': ch = String.fromCharCode(0x2663); break;

case 'hearts': ch = String.fromCharCode(0x2665); break;

case 'diams': ch = String.fromCharCode(0x2666); break;

default: ch = ''; break;

}

i = semicolonIndex;

}

out += ch;

}

return out;

}

Andy Oakley : Code

Drag and drop file uploads in IE with .NET

Safely displaying untrusted HTML