HTML-экранирование данных, возвращаемых из ajax / json

Question

Я использую ajax для извлечения некоторых данных из серверной части.Я получаю результат как json.

Затем я использую jquery, чтобы добавить его на страницу:

$(...).append('<H3>' + data.title + '</H3>')

И я только что понял, что данные json не экранированы HTML, что плохо.

Что мне делать?

1. HTML экранировать все данные, возвращаемые из бэкэнда в json?
2. Все ли экранируются на внешнем интерфейсе при конкатенации строк?(т.е. обернуть все внешние данные в экранирующую функцию)

Вариант 1 означает, что данные в json на самом деле не «правильные», они полезны для HTML, но не содержат реальных данных.И что еще хуже, это означает, что я не могу просто использовать json_encode () - мне сначала нужно пройтись по данным массива и избежать всего.

Вариант 2 кажется более сложным, и я беспокоюсь, что могу пропуститьместо.С другой стороны, это то, что вы делаете, когда получаете данные из SQL и собираете их в PHP, так что, я думаю, я к этому привык.

Пожалуйста, не предлагайте:

$(...).append($('<H3></H3>').text(data.title))

Этометод написания становится громоздким, когда у вас есть много уровней вложенных тегов.Мне нравится писать HTML, а не DOM-вызовы.

PS.Я знаю, что мне нужна библиотека шаблонов Javascript, но сейчас мне нужно сделать это с конкатенацией строк.

Answer 1

Вот простое расширение jQuery, которое добавляет $append() метод форматирования с использованием html:

(function( $ ){
  $.fn.$append = function()
  {
    var out = arguments[0];
    for (var i = 1; i < arguments.length; ++i) 
      out = out.replace("{" + arg + "}", arguments[arg].toString().htmlEscape());
    this.append(out);
  };
})( jQuery );

С помощью этого метода вы можете написать:

$(...).$append('<H3>{1}</H3>', data.title);

И данные будут экранированы,Добавьте соль и перец к вышесказанному - на ваш вкус.

Обновление : Вам также понадобится это:

String.prototype.htmlEscape = function() {
   return this.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
}

Answer 2

Ну, я как бы работаю над проектом с открытым исходным кодом по выходным.Я думаю, что это будет соответствовать вашему требованию.Пожалуйста, проверьте это на http://tog2html.com

Например, в вашем случае, после получения json obj (var data).Вы можете сделать что-то вроде:

$(...).append(
   Tog('div#main_div').h1('hello, ', data.name).h3().raw(data.title).html()
   // raw() is for escaping the data into something valid to be shown in html
)

possible output:
<div id='main_div'><h1>hello, some one</h1><h3>this is my blog title</h3></div>