[ACCEPTED]-How to unescape html in javascript?-escaping

Accepted answer
Score: 11

Change your test string to <b><<&&&</b> to get a better 14 handle on what the risk is... (or better, <img src='http://www.spam.com/ASSETS/0EE75B480E5B450F807117E06219CDA6/spamReg.png' onload='alert(document.cookie);'> for 13 cookie-stealing spam)

See the example at 12 http://jsbin.com/uveme/139/ (based on your example, using prototype 11 for the unescaping.) Try clicking the four 10 different buttons to see the different effects. Only 9 the last one is a security risk. (You can 8 view/edit the source at http://jsbin.com/uveme/139/edit) The example doesn't 7 actually steal your cookies...

  1. If your text is coming from a known-safe source and is not based on any user input, then you are safe.
  2. If you are using createTextNode to create a text node and appendChild to insert that unaltered node object directly into your document, you are safe.
  3. Otherwise, you need to take appropriate measures to ensure that unsafe content can't make it to your viewer's browser.

Note: As pointed out by Ben Vinegar Using 6 createTextNode is not a magic bullet: using it to escape 5 the string, then using textContent or innerHTML to get the escaped 4 text out and doing other stuff with it does 3 not protect you in your subsequent uses. In 2 particluar, the escapeHtml method in Peter Brown's answer below is insecure if used to 1 populate attributes.

Score: 5

A very good read is http://benv.ca/2012/10/4/you-are-probably-misusing-DOM-text-methods/ which explains why 4 the convention wisdom of using createTextNode 3 is actually not secure at all.

A representative 2 example take from the article above of the 1 risk:

function escapeHtml(str) {
    var div = document.createElement('div');
    return div.innerHTML;

var userWebsite = '" onmouseover="alert(\'derp\')" "';
var profileLink = '<a href="' + escapeHtml(userWebsite) + '">Bob</a>';
var div = document.getElementById('target');
div.innerHtml = profileLink;
// <a href="" onmouseover="alert('derp')" "">Bob</a>
Score: 2

Try escape and unescape functions available 1 in Javascript

More details : http://www.w3schools.com/jsref/jsref_unescape.asp

Score: 2

Some guesswork for what it's worth.

innerHTML 12 is literally the browser interpretting hte 11 html.

so < becomes the less than symbol 10 becuase that's what would happen if you 9 put < in the html document.

The largest 8 security risk of strings with & is an 7 eval statement, any JSON could make the 6 application insecure. I'm no security expert 5 but if strings remain strings than you should 4 be ok.

This is another way innerHTML is secure 3 the unescaped string is on it's way to becoming 2 html, so theres no risk of it running the 1 javascript.

Score: 1

As long as your code is creating text nodes, the 15 browser should NOT render anything harmful. In 14 fact, if you inspect the generated text 13 node's source using Firebug or the IE Dev 12 Toolbar, you'll see that the browser is 11 re-escaping the special characters.

give 10 it a


and it re-escapes it to:


There are several 9 types of nodes: Elements, Documents, Text, Attributes, etc.

The 8 danger is when the browser interprets a 7 string as containing script. The innerHTML 6 property is susceptible to this problem, since 5 it will instruct the browser to create Element 4 nodes, one of which could be a script element, or 3 have inline Javascript such as onmouseover 2 handlers. Creating text nodes circumvents 1 this problem.

Score: 1
function mailpage()
{ mail_str =  "mailto:?subject= Check out the " + escape( document.title ); 
      mail_str += "&body=" + escape("I thought you might be interested in the " + document.title + ".\n\n" );
      mail_str += escape("You can view it at " + location.href + ".\n\n");
      location.href = mail_str;


More Related questions