Санитизация пользовательского ввода

Noty — это лёгкая библиотека для создания уведомлений на веб-страницах с возможностью настройки позиции, типа, анимации и поведения сообщений. Уведомления создаются с помощью конструктора new Noty({...}), где объект конфигурации задаёт все параметры отображения.

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

new Noty({
    text: 'Привет! Это уведомление',
    type: 'success',   // success, error, warning, info, alert
    timeout: 3000,     // время жизни уведомления в мс
    layout: 'topRight' // top, topLeft, topRight, bottom, bottomLeft, bottomRight, center
}).show();

Здесь ключевыми параметрами являются:

  • text — текст уведомления.
  • type — визуальный стиль и семантика сообщения.
  • timeout — продолжительность отображения. false означает постоянное уведомление до закрытия вручную.
  • layout — положение уведомления на странице.

Опасность работы с пользовательским вводом

Когда текст уведомления формируется на основе данных, введённых пользователем (например, формы или URL-параметров), существует риск внедрения вредоносного кода, особенно XSS-атак (Cross-Site Scripting). Если передавать введённые данные напрямую в text, браузер может интерпретировать HTML-теги, включая <script> и обработчики событий, что приведёт к выполнению произвольного кода.

Пример небезопасного кода:

const userInput = '<img src=x oner ror=alert("XSS")>';
new Noty({
    text: userInput,
    type: 'alert'
}).show();

В этом случае при отображении уведомления браузер выполнит alert("XSS").

Методы санитизации текста

Чтобы избежать XSS, пользовательский ввод нужно безопасно обрабатывать перед вставкой в уведомление.

1. Экранирование HTML-символов

Преобразование специальных символов <, >, &, ", ' в 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);

new Noty({
    text: safeText,
    type: 'info'
}).show();

Это самый простой способ предотвратить выполнение скриптов.

2. Использование библиотеки DOMPurify

DOMPurify — надёжная библиотека для очистки HTML:

import DOMPurify from 'dompurify';

const sanitized = DOMPurify.sanitize(userInput);

new Noty({
    text: sanitized,
    type: 'success'
}).show();

DOMPurify позволяет сохранить допустимый HTML (например, <b> или <i>) и удалить всё потенциально опасное.

3. Выбор режима текста в Noty

Noty поддерживает настройку текста как HTML или plain text. Чтобы вставлять только текст, без HTML:

new Noty({
    text: userInput,
    type: 'alert',
    escape: true // заставляет Noty экранировать HTML
}).show();

Параметр escape: true автоматически превращает все HTML-символы в безопасные сущности.

Рекомендации по безопасной работе с Noty

  1. Всегда экранировать или очищать пользовательский ввод перед передачей в text.
  2. Использовать escape: true при работе с потенциально небезопасными данными.
  3. Если необходим форматированный текст, применять проверенные библиотеки очистки HTML.
  4. Никогда не формировать HTML вручную с использованием данных пользователя через конкатенацию строк.
  5. Проверять уведомления, отображаемые через API, на возможные инъекции и неожиданные символы.

Примеры безопасных уведомлений

Простой безопасный текст:

new Noty({
    text: escapeHtml('<script>alert("hack")</script>'),
    type: 'warning'
}).show();

С HTML и фильтрацией через DOMPurify:

const input = '<b>Важное!</b><script>alert("XSS")</script>';
const cleanInput = DOMPurify.sanitize(input);

new Noty({
    text: cleanInput,
    type: 'success'
}).show();

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

Итоговое правило

Любой текст, поступающий от пользователя и выводимый через Noty, должен проходить санитизацию. Это защищает от XSS и позволяет безопасно использовать уведомления с любым контентом, включая форматированный HTML.

Правильное сочетание escape, экранирования и библиотек типа DOMPurify делает работу с Noty безопасной и гибкой для любых проектов.

Оглавление