Безопасная обработка пользовательского ввода

Библиотека iziToast предоставляет удобный способ отображения уведомлений в веб-приложениях. Важной частью работы с любыми уведомлениями является безопасная обработка пользовательского ввода, чтобы предотвратить уязвимости, связанные с внедрением нежелательного кода (XSS) и нарушением целостности интерфейса.

Экранирование пользовательских данных

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

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

const userInput = "<script>alert('XSS')</script>";
iziToast.show({
    title: "Ошибка",
    message: escapeHtml(userInput),
    position: "topRight"
});

Ключевой момент: iziToast поддерживает HTML в message только при включении параметра message: html: true. Если включать HTML, необходимо особенно тщательно фильтровать содержимое.

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

Параметр message позволяет отображать HTML, что может быть полезно для форматирования текста, ссылок и кнопок:

iziToast.show({
    title: "Информация",
    message: "<strong>Важное сообщение</strong> о вашем аккаунте",
    position: "topRight",
    timeout: 5000
});

Если используется HTML, необходимо применять белый список тегов, например с библиотекой DOMPurify:

import DOMPurify from 'dompurify';

const safeHtml = DOMPurify.sanitize(userInput, {ALLOWED_TAGS: ['b', 'i', 'strong', 'em']});

iziToast.show({
    title: "Сообщение",
    message: safeHtml,
    position: "topRight"
});

Это гарантирует, что вредоносные скрипты будут удалены.

Ограничение длины и формата сообщений

Длинные строки могут нарушить отображение toast и создавать UX-проблемы. Для этого применяют ограничение длины текста и фильтрацию недопустимых символов:

function truncateMessage(msg, maxLength = 200) {
    return msg.length > maxLength ? msg.substring(0, maxLength) + "…" : msg;
}

const safeMessage = truncateMessage(escapeHtml(userInput));
iziToast.show({
    title: "Уведомление",
    message: safeMessage,
    position: "bottomRight"
});

Предотвращение многократного отображения

При быстром повторном вызове iziToast могут возникнуть ситуации с многократным отображением одного и того же сообщения, что может использоваться для спама или DoS. Для предотвращения этого применяют уникальные идентификаторы:

const toastId = "unique-toast-id";

if (!document.getElementById(toastId)) {
    iziToast.show({
        id: toastId,
        title: "Внимание",
        message: escapeHtml(userInput),
        position: "topRight"
    });
}

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

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

iziToast.show({
    title: "Действие",
    message: "Вы уверены, что хотите удалить элемент?",
    buttons: [
        ['<button>Да</button>', function (instance, toast) {
            instance.hide({transitionOut: 'fadeOut'});
        }, true],
        ['<button>Нет</button>', function (instance, toast) {
            instance.hide({transitionOut: 'fadeOut'});
        }]
    ]
});

Рекомендации безопасности:

  • Не вставлять пользовательский HTML напрямую в кнопки.
  • Использовать заранее определенные тексты или экранировать пользовательский ввод.
  • В обработчиках избегать eval или динамического формирования кода.

Безопасное позиционирование и размеры

iziToast поддерживает позиции (topRight, bottomLeft и др.) и ширину уведомлений. Чтобы избежать визуальных проблем при работе с пользовательскими данными, рекомендуется:

iziToast.settings({
    maxWidth: 400,
    position: 'topRight',
    transitionIn: 'fadeInUp',
    transitionOut: 'fadeOut',
});

Контроль размеров предотвращает “выход за пределы экрана” при длинных сообщениях и сохраняет читаемость интерфейса.

Логирование и мониторинг

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

console.log("User input for toast:", escapeHtml(userInput));

Это позволяет отслеживать попытки внедрения вредоносного кода и корректировать фильтры.

Итоговые рекомендации

  1. Всегда экранировать пользовательский ввод перед отображением в iziToast.
  2. При использовании HTML применять библиотеки для безопасного санитайзинга.
  3. Ограничивать длину и набор символов сообщений.
  4. Применять уникальные идентификаторы для предотвращения спама уведомлений.
  5. Контролировать размеры и позиции toast, чтобы интерфейс оставался стабильным.
  6. Не вставлять динамический код в кнопки и обработчики.
  7. Вести логирование всех сообщений для мониторинга безопасности.

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

Оглавление