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;