HTML: Эквивалентные символы избегают атаки xss [дублировать]

Никогда не используйте escape(). HTML-кодирование не имеет никакого отношения. Это больше похоже на кодирование URL, но это даже не так. Это странная нестандартная кодировка, доступная только в JavaScript.

Если вы хотите кодировщик HTML, вам придется писать его самостоятельно, поскольку JavaScript не дает вам одного. Например:

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

Однако, пока этого достаточно, чтобы разместить user_id в таких местах, как input value, этого недостаточно для id, поскольку идентификаторы могут использовать только ограниченный набор символов. (И % не входит в их число, поэтому escape() или даже encodeURIComponent() не годится.)

Вы можете придумать свою собственную схему кодирования, чтобы поместить любые символы в идентификатор, например:

function encodeID(s) {
    if (s==='') return '_';
    return s.replace(/[^a-zA-Z0-9.-]/g, function(match) {
        return '_'+match[0].charCodeAt(0).toString(16)+'_';
    });
}

Но у вас все еще есть проблема, если один и тот же user_id происходит дважды. И, честно говоря, все дело в том, чтобы бросить вокруг строк HTML, как правило, плохая идея. Вместо этого используйте методы DOM и сохраняйте ссылки JavaScript на каждый элемент, поэтому вам не нужно продолжать звонить getElementById или беспокоиться о том, как вставляются произвольные строки в идентификаторы.

например.:

function addChut(user_id) {
    var log= document.createElement('div');
    log.className= 'log';
    var textarea= document.createElement('textarea');
    var input= document.createElement('input');
    input.value= user_id;
    input.readonly= True;
    var button= document.createElement('input');
    button.type= 'button';
    button.value= 'Message';

    var chut= document.createElement('div');
    chut.className= 'chut';
    chut.appendChild(log);
    chut.appendChild(textarea);
    chut.appendChild(input);
    chut.appendChild(button);
    document.getElementById('chuts').appendChild(chut);

    button.onclick= function() {
        alert('Send '+textarea.value+' to '+user_id);
    };

    return chut;
}

Вы также можете использовать функцию удобства или структуру JS, чтобы сократить длительность вызовов, созданных при создании-добавлении.

ETA:

Я использую jQuery в качестве рамки

ОК, затем рассмотрим ярлыки создания jQuery 1.4, например ::

var log= $('<div>', {className: 'log'});
var input= $('<input>', {readOnly: true, val: user_id});
...

Проблема, с которой я столкнулся сейчас, заключается в том, что я использую JSONP для добавления элементов и событий на страницу, поэтому я не могу знать, существуют ли эти элементы или нет, прежде чем показывать сообщение.

Вы может сохранить поиск user_id к узлам элемента (или объектам-оболочкам) в JavaScript, чтобы сохранить эту информацию в самой DOM, где символы, которые могут попасть в id, ограничены.

var chut_lookup= {};
...

function getChut(user_id) {
    var key= '_map_'+user_id;
    if (key in chut_lookup)
        return chut_lookup[key];
    return chut_lookup[key]= addChut(user_id);
}

(Префикс _map_ связан с тем, что объекты JavaScript не имеют довольно работают как отображение произвольных строк. Пустая строка и в IE некоторые имена Object членов путают ее.)