Javascript sanitization: The most safe way to insert possible XSS html string

Question

Currently i'm using this method with jQuery solution, to clean string from possible XSS attacks.

sanitize:function(str) {
    // return htmlentities(str,'ENT_QUOTES');
    return $('<div></div>').text(str).html().replace(/"/gi,'&quot;').replace(/'/gi,'&apos;');   
}

But i have a feeling it's not safe enough. Do i miss something?

I have tried htmlentities from phpjs project here: http://phpjs.org/functions/htmlentities:425/

But it's kinda bugged and returns some additional special symbols. Maybe it's an old version?

For example:

htmlentities('test"','ENT_QUOTES');

Produces:

test"

But should be:

test"

How are you handling this via javascript?

Answer 1

If your string is supposed to be plain text without HTML formatting, just use .createTextNode(text)/assigning to .data property of existing text node. Whatever you put there will always be interpreted as text and needs no additional escaping.

Answer 2

Yes dynamically using javascript. String comes from untrusted source.

Then you don't need to sanitize it manually. With jQuery you can just write

​var str = '<div>abc"def"ghi</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​';

​$​('test').text(str);
$('test').attr('alt', str);

Browser will separate the data from the code for you.

Example: http://jsfiddle.net/HNQvd/