Is it really insecure to build HTML strings in Javascript?

Question

The company who hosts our site reviews our code before deploying - they\'ve recently told us this:

HTML strings should never be directly manipulated,

Answer 1

Security aside, when you build HTML in JavaScript you must make sure that it is valid. While it is possible to build and sanitize HTML by string manipulation*, DOM manipulation is far more convenient. Still, you must know exactly which part of your string is HTML and which is literal text.

Consider the following example where we have two hard-coded variables:

var href = "/detail?tag=hr©%5B%5D=1",
    text = "The HTML 
 tag";

The following code naively builds the HTML string:

var div = document.createElement("div");
div.innerHTML = '' + text + '';
console.log(div.innerHTML);
// The HTML 
 tag

This uses jQuery but it is still incorrect (it uses .html() on a variable that was supposed to be text):

var div = document.createElement("div");
$("").attr("href", href).html(text).appendTo(div);
console.log(div.innerHTML);
// The HTML 
 tag

This is correct because it displays the text as intended:

var div = document.createElement("div");
$("").attr("href", href).text(text).appendTo(div);
console.log(div.innerHTML);
// The HTML <hr> tag

Conclusion: Using DOM manipulation/jQuery do not guarantee any security, but it sure is one step in right direction.

---

* See this question for examples. Both string and DOM manipulation are discussed.