Защита от инъекций

Для начала работы с библиотекой Toastify необходимо подключить её к проекту. Доступны два основных способа:

Через CDN:

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

Через npm:

npm install toastify-js

и импорт в коде:

import Toastify from 'toastify-js';
import "toastify-js/src/toastify.css";

После подключения можно создавать уведомления с минимальными усилиями.

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

Библиотека Toastify предоставляет гибкие настройки для уведомлений. Основные параметры:

text — текст сообщения;
duration — время отображения уведомления в миллисекундах (по умолчанию 3000);
close — отображение кнопки закрытия (true/false);
gravity — вертикальное положение: "top" или "bottom";
position — горизонтальное положение: "left", "center", "right";
backgroundColor — цвет фона уведомления;
stopOnFocus — при наведении курсора уведомление не исчезает (true/false);
onClick — функция, выполняемая при клике на уведомление.

Пример создания уведомления:

Toastify({
  text: "Данные успешно сохранены",
  duration: 5000,
  gravity: "top",
  position: "right",
  backgroundColor: "green",
  close: true,
}).showToast();

Уязвимости при работе с пользовательским вводом

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

const userInput = '<img src=x oner ror=alert("XSS")>';
Toastify({
  text: userInput
}).showToast();

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

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

Для безопасного использования Toastify все данные, полученные от пользователя, необходимо очищать или экранировать. Наиболее простой способ — заменить специальные символы HTML на безопасные сущности:

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

const safeText = escapeHtml(userInput);

Toastify({
  text: safeText
}).showToast();

Использование такой функции предотвращает исполнение вредоносного HTML и JavaScript.

Использование `innerText` вместо `innerHTML`

Если текст уведомления нужно динамически вставлять в DOM вручную, следует использовать innerText или аналогичные методы, исключающие интерпретацию HTML:

const toastElement = document.createElement("div");
toastElement.innerText = userInput; // безопасно
document.body.appendChild(toastElement);

Даже при отсутствии экранирования через escapeHtml, этот метод предотвращает XSS, так как браузер не интерпретирует HTML-теги внутри innerText.

Санитизация данных через библиотеки

Для сложных проектов полезно использовать проверенные библиотеки для санитизации, такие как DOMPurify:

import DOMPurify from 'dompurify';

const sanitizedText = DOMPurify.sanitize(userInput);

Toastify({
  text: sanitizedText
}).showToast();

DOMPurify автоматически удаляет все потенциально опасные скрипты и теги, обеспечивая надежную защиту при выводе пользовательского контента.