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.