Безопасная работа с HTML

Для начала работы с библиотекой Toastify необходимо подключить её CSS и JS файлы. Можно использовать CDN:

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>

После подключения можно создавать уведомления с помощью метода Toastify(). Основная структура вызова:

Toastify({
    text: "Пример уведомления",
    duration: 3000, // время показа в миллисекундах
    close: true,    // кнопка закрытия
}).showToast();

Основные параметры

  • text — текст уведомления. Поддерживается строка HTML, но использование <script> и внешних ссылок может быть опасно.
  • duration — время отображения уведомления. Если не указано, по умолчанию 3000 мс.
  • close — отображение кнопки закрытия уведомления.
  • gravity — положение по вертикали ("top" или "bottom").
  • position — положение по горизонтали ("left", "center", "right").
  • backgroundColor — цвет фона уведомления.
  • stopOnFocus — если true, уведомление не скрывается при наведении курсора.

Безопасная работа с HTML

Toastify позволяет вставлять HTML-контент через параметр text, но необходимо соблюдать правила безопасности, чтобы избежать XSS-уязвимостей:

  1. Не вставлять пользовательский HTML напрямую

    let userInput = '<img src=x oner ror=alert(1)>';
Toastify({ text: userInput }).showToast(); // опасно!

  2. Экранировать специальные символы Перед вставкой в text любые пользовательские данные следует преобразовать в безопасный текст:

    function escapeHtml(str) {
    return str.replace(/&/g, "&amp;")
              .replace(/</g, "&lt;")
              .replace(/>/g, "&gt;")
              .replace(/"/g, "&quot;")
              .replace(/'/g, "&#039;");
}
let safeText = escapeHtml(userInput);
Toastify({ text: safeText }).showToast();

  3. Избегать вставки скриптов Любой HTML, содержащий <script> или атрибуты вроде onerror, onclick, может быть выполнен браузером. Использование text только для отображения текста гарантирует безопасность.

  4. Использование кастомного элемента Вместо вставки HTML через text можно создавать элемент вручную и передавать его через node:

    const node = document.createElement("span");
node.textContent = userInput; // безопасно
Toastify({ node: node }).showToast();

Настройка стилей уведомлений

  • backgroundColor и className позволяют задавать визуальный стиль. Рекомендуется использовать CSS-классы вместо вставки HTML с инлайновыми стилями для упрощения поддержки и предотвращения XSS.

  • onClick — функция обратного вызова при клике. Любые действия с DOM должны быть тщательно проверены на источники данных:

    Toastify({
    text: "Нажми меня",
    onClick: () => alert("Данные защищены")
}).showToast();

Безопасная работа с динамическим контентом

При создании уведомлений с динамическим контентом, полученным от пользователя или API:

  1. Фильтровать HTML-теги и скрипты
  2. Использовать textContent или innerText вместо innerHTML
  3. Проверять длину и формат строки

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

const inputField = document.querySelector("#userInput");
document.querySelector("#showToast").addEventListener("click", () => {
    const safeText = escapeHtml(inputField.value);
    Toastify({
        text: safeText,
        duration: 5000,
        close: true,
    }).showToast();
});

Поддержка событий и безопасности

Toastify позволяет добавлять события при отображении и закрытии уведомлений:

Toastify({
    text: "События",
    onClick: function() {
        console.log("Уведомление кликнуто безопасно");
    },
    onClose: function() {
        console.log("Уведомление закрыто");
    }
}).showToast();

Использование событий не должно напрямую включать пользовательский HTML или скрипты — только проверенные данные и функции.

Итоговые рекомендации по безопасной интеграции

  • Использовать textContent или node вместо text с HTML.
  • Экранировать все данные от пользователей.
  • Ограничивать интерактивность только безопасными событиями (onClick, onClose).
  • Применять CSS-классы для стилизации вместо инлайнового HTML.
  • Проверять внешний контент перед вставкой.

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

Оглавление