Question

What are the risks of using Javascript and how to avoid them?

Answer 1

One of the most common errors is HTML injection, allowing third parties to inject JavaScript into your security context. That allows an attacker to control what a user does on your site, completely breaking account security.

Whilst there has been some slow progress trying to get web authors to remember to HTML-encode strings they output into web pages at the server side (eg htmlspecialchars in PHP), a new generation of webapps are using the same dumb string-concatenation hacks to create content at the client-side using JavaScript:

somediv.innerHTML= '<p>Hello, '+name+'</p>';

often using jQuery:

$('table').append('<tr title="'+row.title+'"><td>'+row.description+'</td></tr>');

This is just as vulnerable as server-side HTML injection and authors really need to stop building content this way. You can HTML-encode text content at the client side, but since JS doesn’t have a built-in HTML encoder you’d have to do it yourself:

function encodeHTML(s) {
    return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/"/g, '&quot;');
}

somediv.innerHTML= '<p>Hello, '+encodeHTML(name)+'</p>';

However it’s usually much better to use the available DOM methods and properties that obviate the need for escaping:

var p= document.createElement('p');
p.appendChild(document.createTextNode('Hello, '+name);

and with jQuery use attr(), text() and the creation shortcuts:

$('table').append(
    $('<tr>', {title: row.title}).append(
        $('<td>', {text: row.description})
    )
);