I came up with a hack to escape HTML using jQuery and I'm wondering if anyone sees a problem with it.
$('<i></i>').text(TEXT_TO_ESCAPE).html();
The <i> tag is just a dummy as jQuery needs a container to set the text of.
Is there perhaps an easier way to do this? Note that I need the text stored in a variable, not for display (otherwise I could just call elem.text(TEXT_TO_ESCAPE);).
Thanks!
That's a pretty standard way of doing it, my version used a <div> though:
return $('<div/>').text(t).html();
This isn't technically 100% safe though as Mike Samuel notes but it is probably pretty safe in practice.
The current Prototype.js does this:
function escapeHTML() {
return this.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>');
}
But it used to use the "put text in a div and extract the HTML" trick.
There's also _.escape in Underscore, that does it like this:
// List of HTML entities for escaping.
var htmlEscapes = {
'&': '&',
'<': '<',
'>': '>',
'"': '"',
"'": ''',
'/': '/'
};
// Regex containing the keys listed immediately above.
var htmlEscaper = /[&<>"'\/]/g;
// Escape a string for HTML interpolation.
_.escape = function(string) {
return ('' + string).replace(htmlEscaper, function(match) {
return htmlEscapes[match];
});
};
That's pretty much the same approach as Prototype's. Most of the JavaScript I do lately has Underscore available so I tend to use _.escape these days.
.text(t).html() or Prototype's replace approaches are really that great, both approaches have problems. The lack of a encodeHTML() function in the standard JavaScript library is a gaping hole and a rather surprising oversight.
encodeURIComponent and JavaScript's roots are in web browsers. And, the fact that everyone ends up writing their own indicates that there is a gap in the standard libraries.
There is no guarantee that html() will be completely escaped so the result might not be safe after concatenation.
html() is based on innerHTML, and a browser could, without violating lots of expectations, implement innerHTML so that $("<i></i>").text("1 <").html() is "1 <", and that $("<i></i>").text("b>").html() is "b>".
Then if you concatenate those two individually safe results, you get "1 <b>" which will obviously not be the HTML version of the concatenation of the two plaintext pieces.
So, this method is not safe by deduction from first principles, and there's no widely followed spec of innerHTML (though HTML5 does address it).
The best way to check if it does what you want is to test corner cases like this.
$("<i></i>").text("1 <").html() to be "1 <" and $("<i></i>").text("b>").html() to be "b>". (which works)<input name="Hello>World"> was returned via innerHTML as <input name="Hello>World">. That may have been fixed in modern browsers though. My point is that testing is the way to gain confidence.That should work. That's basically how the Prototype.js library does it, or at least how it used to do it. I generally do it with three calls to ".replace()" but that's mostly just a habit.
<,>and&to their corresponding HTML entities?$('<i>').text(TEXT_TO_ESCAPE).html();