XSS-защита

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

Использование безопасного контента

По умолчанию iziToast отображает текстовые строки, переданные в параметрах title и message. Любой HTML-код, включённый в эти строки, будет интерпретирован браузером, что создаёт уязвимость. Например:

iziToast.show({
    title: 'Информация',
    message: '<img src=x oner ror=alert(1)>'
});

В этом случае тег <img> с событием onerror выполнит JavaScript-код. Чтобы этого избежать, не следует передавать необработанный HTML от пользователя.

Экранирование HTML

Для безопасного отображения пользовательского контента следует использовать экранирование специальных символов:

  • < → &lt;
  • > → &gt;
  • & → &amp;
  • " → &quot;
  • ' → &#39;

Пример безопасного вывода с использованием функции экранирования:

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

const userMessage = '<script>alert("XSS")</script>';
iziToast.show({
    title: 'Сообщение',
    message: escapeHTML(userMessage)
});

В этом примере любой HTML или JavaScript от пользователя будет отображён как текст, а не выполнен.

Запрет на использование message с HTML

iziToast поддерживает опцию messageHTML, которая позволяет вставлять HTML-код напрямую. Эта функциональность особенно опасна, если данные приходят из ненадёжного источника. Рекомендуется не использовать messageHTML с пользовательским вводом. Если необходимо динамически формировать HTML, нужно применять строгую фильтрацию и безопасные шаблонизаторы.

Ограничение источников данных

Для XSS-защиты важным аспектом является контроль источников данных:

  • Сервер должен фильтровать и валидировать ввод.
  • Не доверять пользовательскому вводу для формирования HTML.
  • Использовать Content Security Policy (CSP) для ограничения выполнения скриптов, особенно если уведомления содержат внешние ссылки.

Практика безопасного использования iziToast

  1. Всегда использовать только текстовые свойства title и message.
  2. Применять экранирование HTML, если есть риск передачи спецсимволов.
  3. Никогда не включать пользовательский ввод в messageHTML.
  4. Настроить CSP для ограничения скриптов в браузере.
  5. Проверять сторонние библиотеки, которые могут внедрять HTML в уведомления.

Пример безопасного уведомления

const userName = '<img src=x oner ror=alert(1)>';
iziToast.success({
    title: 'Приветствие',
    message: `Добро пожаловать, ${escapeHTML(userName)}!`,
    timeout: 5000,
    position: 'topRight'
});

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

Контроль событий и ссылок

Даже если текст экранирован, необходимо следить за тем, что:

  • Ссылки в уведомлениях ведут только на проверенные источники.
  • События клика и другие обработчики не создаются на основе пользовательского ввода.
  • Любой динамически формируемый HTML проходит очистку через библиотеки типа DOMPurify перед вставкой в messageHTML.

Эти методы обеспечивают надёжную защиту от XSS-атак при работе с iziToast, позволяя безопасно отображать уведомления и сохранять интерактивность интерфейса без риска выполнения вредоносного кода.

Оглавление