Content Security Policy

Для начала работы с Toastify необходимо подключить библиотеку в проект. Toastify доступна как через CDN, так и через пакетный менеджер npm/yarn.

Подключение через CDN:

Подключение через npm:

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

После подключения можно создавать уведомления с помощью метода Toastify({ ...options }).showToast().

Основные параметры конфигурации

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

  • text – текст уведомления.
  • duration – время отображения в миллисекундах. Значение -1 оставляет уведомление на экране до закрытия вручную.
  • close – отображение кнопки закрытия.
  • gravity – вертикальное положение: "top" или "bottom".
  • position – горизонтальное положение: "left", "center", "right".
  • backgroundColor – цвет фона уведомления.
  • className – CSS-класс для стилизации уведомления.
  • stopOnFocus – при true уведомление не исчезает при наведении мыши.
  • onClick – функция, вызываемая при клике по уведомлению.
  • offset – объект для смещения уведомления по вертикали и горизонтали: { x: 0, y: 0 }.

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

Toastify({
  text: "Пример уведомления",
  duration: 3000,
  gravity: "top",
  position: "right",
  backgroundColor: "#4CAF50",
}).showToast();

Кастомизация стиля и анимаций

Toastify позволяет использовать CSS для полной кастомизации внешнего вида уведомлений:

  • Добавление собственного CSS-класса через className:
Toastify({
  text: "Кастомный стиль",
  className: "my-toast",
}).showToast();
.my-toast {
  background: linear-gradient(to right, #ff6a00, #ee0979);
  font-weight: bold;
  border-radius: 10px;
}
  • Изменение анимации появления и исчезновения через CSS:
.toastify {
  animation: fadeIn 0.5s, fadeOut 0.5s 2.5s;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-20px); }
}

Работа с ссылками и действиями внутри уведомления

Уведомления могут содержать интерактивные элементы, такие как ссылки или кнопки:

Toastify({
  node: (() => {
    const container = document.createElement("div");
    container.innerHTML = `
      Уведомление с ссылкой
    `;
    return container;
  })(),
  duration: 5000,
  gravity: "bottom",
  position: "center"
}).showToast();

Content Security Policy (CSP) и Toastify

Для проектов с активной Content Security Policy необходимо учитывать следующие моменты:

  1. Подключение скриптов и стилей При использовании CDN необходимо добавить разрешения для источников:
Content-Security-Policy: 
  script-src 'self' https://cdn.jsdelivr.net; 
  style-src 'self' https://cdn.jsdelivr.net;

  1. Inline скрипты и eval() Toastify не использует eval(), но при использовании параметра node для кастомных элементов необходимо убедиться, что CSP разрешает создание DOM через JavaScript.

  2. Кастомные стили Для inline-стилей нужно использовать style-src 'unsafe-inline' или подключать CSS через отдельный файл, что предпочтительнее с точки зрения безопасности.

  3. HTTPS и безопасные источники Все внешние ресурсы должны загружаться через HTTPS. CSP должен включать https: для скриптов и стилей, если они загружаются с внешних CDN.

Пример корректной политики для использования Toastify с CDN:

Content-Security-Policy: 
  default-src 'self'; 
  script-src 'self' https://cdn.jsdelivr.net; 
  style-src 'self' https://cdn.jsdelivr.net;
  connect-src 'self';

Продвинутые возможности

  • Стек уведомлений – создание нескольких уведомлений, которые появляются одно за другим:
Toastify({
  text: "Первое уведомление",
  duration: 2000
}).showToast();

Toastify({
  text: "Второе уведомление",
  duration: 2000,
  gravity: "bottom",
  position: "left"
}).showToast();
  • Интеграция с событиями приложения – уведомления можно привязывать к любым событиям, например, успешное сохранение данных или ошибка API.
async function saveData() {
  try {
    await api.save();
    Toastify({
      text: "Данные успешно сохранены",
      backgroundColor: "#4CAF50"
    }).showToast();
  } catch (error) {
    Toastify({
      text: "Ошибка при сохранении",
      backgroundColor: "#F44336"
    }).showToast();
  }
}
  • Отложенное уведомление – можно использовать setTimeout для отображения уведомления через заданное время:
setTimeout(() => {
  Toastify({
    text: "Отложенное уведомление",
    duration: 3000
  }).showToast();
}, 5000);

Советы по безопасной интеграции

  • Избегать inline-скриптов для создания уведомлений.
  • Подключать CSS и JS только с доверенных источников.
  • Проверять, что параметры, передаваемые в Toastify, не содержат непроверенный HTML при использовании node.
  • Настраивать CSP таким образом, чтобы разрешенные источники были минимальными и только для необходимых ресурсов.
Оглавление