Санитизация HTML-контента

iziToast — это легковесная библиотека для отображения уведомлений в браузере на JavaScript. Одной из ключевых возможностей является использование HTML-контента внутри уведомлений, что позволяет создавать гибкие и визуально богатые сообщения. Однако работа с HTML требует осторожности, чтобы избежать уязвимостей типа XSS (Cross-Site Scripting).

Вставка HTML в уведомления

В iziToast можно использовать параметр message для вставки текста, а параметр messageColor и titleColor для стилизации. Для включения HTML-контента используется опция message с HTML-тегами:

iziToast.show({
    title: 'Уведомление',
    message: '<b>Важное сообщение:</b> проверьте данные',
    timeout: 5000,
    position: 'topRight'
});

В этом примере <b> делает текст жирным. Также можно использовать ссылки, списки и другие HTML-элементы:

iziToast.show({
    title: 'Список задач',
    message: '<ul><li>Задача 1</li><li>Задача 2</li></ul>',
    timeout: 4000,
    position: 'bottomLeft'
});

Опасности вставки необработанного HTML

Прямое использование пользовательского ввода в параметре message без обработки создаёт риск XSS. Например, если передавать в message строки, полученные от пользователя, злоумышленник может вставить скрипт:

let userInput = '<img src=x oner ror=alert("XSS")>';
iziToast.show({
    title: 'Ошибка',
    message: userInput
});

Такой код выполнит JavaScript на стороне клиента, что опасно.

Методы санитизации HTML

Для предотвращения XSS необходимо очищать HTML-контент перед отображением. Существует несколько подходов:

  1. Удаление тегов <script> и атрибутов с обработчиками событий. Можно использовать регулярные выражения или сторонние библиотеки вроде DOMPurify:
let cleanHTML = DOMPurify.sanitize(userInput);
iziToast.show({
    title: 'Безопасное сообщение',
    message: cleanHTML
});
  1. Экранирование HTML-тегов. Преобразование < в &lt;, > в &gt; позволяет отобразить текст без интерпретации тегов:
function escapeHTML(str) {
    return str.replace(/&/g, "&amp;")
              .replace(/</g, "&lt;")
              .replace(/>/g, "&gt;")
              .replace(/"/g, "&quot;")
              .replace(/'/g, "&#039;");
}

let safeMessage = escapeHTML(userInput);
iziToast.show({
    title: 'Безопасное сообщение',
    message: safeMessage
});
  1. Использование только разрешённых тегов. Если необходим форматированный HTML, можно разрешать только определённые теги через библиотеки для санитизации.

Настройка iziToast для безопасного HTML

Хотя iziToast не предоставляет встроенного параметра allowHtml, вставка HTML осуществляется через message. Для безопасной работы рекомендуется:

  • Санитизировать пользовательский контент перед передачей в message.
  • Избегать inline-обработчиков событий (onclick, onerror и т.д.) в HTML.
  • Использовать строгие правила CSS, чтобы стилизовать контент без внедрения скриптов.

Пример безопасного уведомления с разрешённым HTML:

let userMessage = '<b>Привет</b>, <i>мир</i>!';
let safeMessage = DOMPurify.sanitize(userMessage, {ALLOWED_TAGS: ['b','i']});

iziToast.show({
    title: 'Сообщение',
    message: safeMessage,
    timeout: 3000,
    position: 'topRight'
});

В этом случае сохраняется форматирование <b> и <i>, но все опасные элементы удалены.

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

  • Всегда предполагать, что пользовательский контент небезопасен.
  • Использовать проверенные библиотеки для санитизации HTML вместо самописных решений.
  • Если HTML не критичен, предпочтительнее отображать текст без тегов.
  • Тестировать уведомления на разных браузерах, чтобы убедиться, что стили и форматирование корректны.

Итоговое понимание

Использование HTML в iziToast открывает широкие возможности для стилизации и форматирования уведомлений, но требует строгой санитизации данных. Комбинация библиотек для очистки контента и ограниченного набора тегов позволяет создавать визуально привлекательные уведомления без угроз безопасности.

Оглавление