Безопасное экранирование HTML строк через jQuery

Быстрый ответ

Для безопасного вставления текста и предотвратления выполнения HTML используйте метод .text() в jQuery:

var escapedHtml = $("<div>").text("<ваш HTML>").html();

Метод .text() преобразует символы <, > в их безопасные эквиваленты — <, >. Строка готова к внедрению в DOM. Пример:

var userInput = "<img src=x onerror=alert(1)>";
var safeStr = $("<div>").text(userInput).html();

Далее мы подробно обсудим экранирование HTML с точек зрения производительности и реализации.

Тщательный анализ экранирования HTML

Веб-контент иногда требуется конвертировать в простой текст для предотвращения вредоносных действий. Этот процесс носит название экранирования. Метод .text() в jQuery не только обрабатывает строки, но и защищает от XSS-атак.

Собственная функция экранирования

Если вам недостаточно использования .text(), например, когда требуется экранировать строки для последующих целей, вы можете создать свою функцию. Создание карты символов поможет в этом:

const escapeChars = {'<': '&lt;', '>': '&gt;', '&': '&amp;', '"': '&quot;', "'": '&#39;'};
function escapeHtml(str) {
  return String(str).replace(/[<>&"']/g, function (s) {
    return escapeChars[s];
  });
}

Подробнее об этом расскажет наш спикер на видео

Библиотеки для экранирования

Если нужна большая производительность, используйте специализированные библиотеки, такие как mustache.js или lodash's _.escape():

var safeStr = _.escape(userInput);

Такие инструменты соответствуют стандартам безопасности, принятым в сообществе.

Регулярные выражения

Регулярные выражения становятся незаменимыми, когда существенны скорость и точность:

function escapeHtml(str) {
  return str.replace(/[\u00A0-\u9999<>\&]/gim, function(i) {
     return '&#'+i.charCodeAt(0)+';';
  });
}

Они преобразуют символы в числовые HTML-сущности.

Расширение jQuery для экранирования

Вы можете расширить прототип jQuery, добавив в него метод экранирования:

$.fn.extend({
  escape() {
    return this.each(function() {
      $(this).text($(this).text());
    });
  }
});

$("#unsafe").escape();

Таким образом, вы получаете метод .escape(), который позволяет легко санитарно обрабатывать содержимое.

Визуализация

Экранирование HTML при помощи jQuery выступает в виде ограждения, защищающего ваш контент от угроз:

Без экранирования: 🐗➡️🌷
С jQuery:           🐗🚫🚧➡️🌷

За ограждением в безопасности даже от специальных символов:

$("<div>").text('Спецсимволы, как <>&, находятся за забором!').html();

Ограждение .text() обеспечивает защиту вашего содержимого от вредоносных символов.

Усовершенствованные меры безопасности

Использование encodeURIComponent

Не используйте encodeURIComponent() для HTML. Это инструмент для URI, не для HTML.

Очистка пользовательских данных

При работе с пользовательским вводом применяйте методы очистки данных: экранируйте данные, держите в уме допустимые значения, удаляйте небезопасные данные.

Тестирование

Тестируйте механизмы экранирования, например, через .html() в jQuery. Разрабатывайте модульные тесты, чтобы результат соответствовал ожиданиям.

Полезные материалы

1. .html() | Документация по jQuery API — детальная документация метода .html().
2. Какие символы нужно экранировать в HTML? – Stack Overflow — советы от сообщества разработчиков.
3. JavaScript: Самый неправильно понятый язык программирования в мире — статья Дугласа Крокфорда о JavaScript.
4. GitHub – camsong/You-Dont-Need-jQuery — советы о том, как заменить jQuery обычным JavaScript.
5. jQuery 1.7.2 Beta 1 выпущен | Официальный блог jQuery — блог о необходимости экранирования.
6. he – npm — пакет npm для работы с HTML-сущностями.