Управление escapeMarkup

escapeMarkup — это опция в библиотеке Toastify для JavaScript, которая определяет, как библиотека обрабатывает HTML-содержимое уведомления. По умолчанию Toastify экранирует все HTML-теги, предотвращая выполнение потенциально опасного кода. Однако для сложных уведомлений с HTML-разметкой требуется явное управление этой функциональностью.

Синтаксис и использование

Опция задается при создании уведомления через объект настроек:

Toastify({
    text: "<strong>Важное уведомление</strong>",
    duration: 3000,
    escapeMarkup: true
}).showToast();
  • escapeMarkup: true — все HTML-теги внутри text будут экранированы и отображены как обычный текст.
  • escapeMarkup: false — HTML-теги будут интерпретированы браузером, позволяя использовать <strong>, <em>, <a> и другие элементы.

Пример с отключением экранирования:

Toastify({
    text: "<strong>Важное уведомление</strong>",
    duration: 3000,
    escapeMarkup: false
}).showToast();

В этом случае уведомление отобразит текст жирным шрифтом, а не <strong>Важное уведомление</strong>.

Безопасность

Установка escapeMarkup: false открывает возможность внедрения HTML-кода, что потенциально делает приложение уязвимым к XSS-атакам. Поэтому использование этой опции должно быть ограничено:

  • Доверенный контент — только строки, которые контролируются самим разработчиком.
  • Внешние данные — необходимо предварительно фильтровать или экранировать специальные символы.

Пример безопасного подхода:

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

const userMessage = "<script>alert('XSS')</script>";
Toastify({
    text: sanitizeHTML(userMessage),
    escapeMarkup: true,
    duration: 3000
}).showToast();

Динамическое управление HTML-разметкой

Иногда требуется смешанный подход: часть текста безопасно экранировать, а часть отображать с HTML. Для этого можно использовать комбинацию escapeMarkup и генерацию HTML через Jav * aScript:

const boldText = "<strong>Важно:</strong>";
const safeText = " Новое уведомление готово.";

Toastify({
    text: `${boldText}${safeText}`,
    escapeMarkup: false,
    duration: 4000
}).showToast();

В данном случае <strong> будет интерпретирован, а остальная часть текста может быть сформирована динамически с экранированием.

Настройка глобального поведения

В текущей версии Toastify нет официального метода для глобальной настройки escapeMarkup для всех уведомлений. Опция указывается индивидуально для каждого вызова Toastify(). Для удобства можно создать обертку:

function createToast(message, html=false) {
    Toastify({
        text: message,
        escapeMarkup: !html,
        duration: 3000
    }).showToast();
}

createToast("<strong>Успех!</strong>", true);
createToast("Простое уведомление", false);

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

Практические рекомендации

  • Для коротких текстовых уведомлений всегда использовать escapeMarkup: true.
  • Для сложной HTML-разметки убедиться, что все строки проходят проверку или формируются только из доверенных данных.
  • Для повторяющихся уведомлений создать функцию-обертку, чтобы централизованно управлять безопасностью.
  • Не вставлять пользовательский ввод напрямую в text при escapeMarkup: false.

Частые ошибки

  1. Ожидание HTML по умолчанию Разработчики иногда удивляются, что <strong> отображается как текст. По умолчанию escapeMarkup: true.

  2. Игнорирование безопасности Прямое отключение экранирования на пользовательском контенте может привести к XSS.

  3. Попытка глобальной конфигурации Встроенной поддержки глобального escapeMarkup нет; требуется обертка.

  4. Смешивание экранирования и динамического HTML Неправильная комбинация может привести к отображению необработанных тегов или поломке стилей.

escapeMarkup является ключевым инструментом для управления HTML-разметкой в уведомлениях Toastify, обеспечивая баланс между визуальной выразительностью и безопасностью. Грамотное использование позволяет создавать стильные и безопасные всплывающие уведомления в JavaScript-приложениях.

Оглавление