JavaScript: как экранировать HTML спецсимволы безопасно

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

Несомненно, для предотвращения инъекции кода необходимо экранировать специальные символы HTML в JavaScript, создав для этой цели уникальную функцию. Специальное внимание следует обратить на символы: &, <, >, ", ' и ` . Посмотрите на пример функции:

function escapeHtml(str) {
  return str
    .replace(/&/g, '&')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#39;')
    .replace(/`/g, '&#x60;');
}

Демонстрация использования:

console.log(escapeHtml('<script>alert("XSS")</script>')); 
// Результат: &lt;script&gt;alert(&quot;XSS&quot;)&lt;/script&gt;

Указанный метод удостоверяет себя как защитник безопасного отображения текста и отличный противник XSS-атак при динамическом обновлении DOM.

Высокоэффективное экранирование в разных контекстах

В зависимости от конкретной задачи, могут быть применены и другие методы или библиотеки для экранирования HTML. Обозрим некоторые из них.

Когда и где требуется экранирование

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

1. Контент, генерируемый пользователями: он может скрывать в себе потенциально опасные скрипты.
2. Шаблонные литералы: применение экранирования для всех вставляемых переменных представляется желательным.
3. Данные, получаемые от сторонних API: всё, что выводится на странице, должно быть тщательно «очищено» от возможно опасных символов.

Последовательное применение методов экранирования снизит риски для безопасности ваших данных.

Помощь будет и от библиотек

В случае, если в вашем проекте уже присутствуют Lodash или jQuery, вы можете без лишних заморочек использовать их функции экранирования:

_.escape('<script>alert("XSS")</script>'); // Lodash
$('#element').text('<script>alert("XSS")</script>'); // jQuery

Вопросы совместимости с браузерами

Функция escapeHtml разработана таким образом, чтобы быть совместимой со всеми браузерами. Обратите внимание, что replaceAll не поддерживается старыми версиями браузеров.

Обработка данных в реальном времени

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

inputElement.addEventListener('input', function(e) {
  e.target.value = escapeHtml(e.target.value);
});

Работа с DOM

От использования innerHTML стоит воздержаться, чтобы случайно не исполнить вредоносный HTML или JavaScript код. Более совершенный способ — это создание текстового узла и его последующее добавление в документ:

const textNode = document.createTextNode('<script>alert("XSS")</script>');
paragraphElement.appendChild(textNode);

Также при работе с текстом возможно использование textContent, которое надёжно и поддерживается всеми современными браузерами.

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

Представьте JavaScript в образе усердного садовника 👨‍🌾, который заботливо обрабатывает цветочный сад 🏡. Специальные символы HTML – это дикие цветы 🌼🌻🌷, которые нужно привести в порядок:

👨‍🌾 Садовник: Экранирующая функция в JavaScript
🏡 Сад      : Текст на вашем сайте
📜 Страница  : Необработанный текст
🌼🌻🌷      : Спецсимволы HTML (дикие цветы)

Функция JavaScript должна аккуратно обработать дикие цветы, обеспечивая «чистоту» текста:

function sanitize(str) {
    return str.replace(/[&<>"'`]/g, char => escapeMap[char]);
}

Обратите внимание, насколько изменился сад до и после ухода садовника:

До: 🏡 (ваш HTML) со 🌼"🌻<🌷 (спецсимволы)
После: 🏡 (ваш HTML) с аккуратно вычищенным 📜 (текстом)

Тщательная обработка диких цветов позволяет сохранить текстовому саду его красоту и порядок.

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

1. Свойство Element: innerHTML – Web APIs | MDN – документация MDN по обработке данных в HTML с использованием JavaScript.
2. Предотвращение перехвата сессии – OWASP Cheat Sheet Series — лучшие практики по предотвращению XSS-атак от OWASP.
3. htmlEntities_for_JavaScript | CSS-Tricks – готовая функция для экранирования HTML-символов.
4. javascript – HTML-encoding lost when attribute read from input field – Stack Overflow – обсуждение методов эффективного экранирования HTML-символов на Stack Overflow.
5. Свойство HTML DOM Element innerText – подробное описание свойства innerText.
6. GitHub – component/escape-html: Escape string for use in HTML – надежный инструмент для эффективного экранирования строк на GitHub.
7. GitHub – mathiasbynens/he: A robust HTML entity encoder/decoder written in JavaScript. – библиотека, позволяющая кодировать и декодировать HTML-сущности на JavaScript.