Экранирование HTML

При работе с библиотекой Noty ключевым моментом является обеспечение безопасности уведомлений и предотвращение внедрения вредоносного кода через HTML. По умолчанию Noty позволяет вставлять HTML в текст уведомления, что делает возможным динамическое оформление сообщений. Однако это открывает потенциальные уязвимости XSS (Cross-Site Scripting), если данные поступают из ненадежных источников.

Включение и отключение HTML

В объекте конфигурации уведомления есть параметр text, который принимает как обычный текст, так и HTML-код:

new Noty({
    text: '<strong>Успех!</strong> Данные сохранены.',
    type: 'success'
}).show();

Если необходимо отключить интерпретацию HTML, используется параметр escapeHTML:

new Noty({
    text: '<strong>Ошибка!</strong> Некорректные данные.',
    type: 'error',
    escapeHTML: true
}).show();

При установке escapeHTML: true все HTML-теги преобразуются в безопасные символы (< → &lt;, > → &gt;) и выводятся как обычный текст.

Использование шаблонов и экранирование

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

const username = '<script>alert("XSS")</script>';
new Noty({
    text: `Привет, ${username}!`,
    type: 'information',
    escapeHTML: true
}).show();

В данном случае даже если переменная username содержит HTML или JavaScript, библиотека автоматически экранирует символы и предотвратит выполнение скрипта.

Комбинирование HTML и безопасного текста

Иногда требуется использовать комбинацию безопасного текста и HTML-разметки. В Noty можно создавать безопасные элементы, вручную экранируя динамический контент:

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

const userInput = '<img src=x oner ror=alert(1)>';
new Noty({
    text: `Пользователь ввёл: <strong>${escape(userInput)}</strong>`,
    type: 'warning'
}).show();

Этот подход позволяет вставлять HTML-теги для оформления (<strong>, <em>) и одновременно защищать динамическое содержимое от внедрения скриптов.

Настройка глобального экранирования

Noty предоставляет возможность глобально включить экранирование HTML для всех уведомлений:

Noty.overrideDefaults({
    escapeHTML: true
});

После этого все создаваемые уведомления будут автоматически экранировать HTML, если только локально не будет указано escapeHTML: false.

Практические рекомендации

  • Всегда использовать escapeHTML: true для данных, поступающих от пользователей или внешних источников.
  • Для статических сообщений или доверенного HTML оставлять escapeHTML: false.
  • При комбинировании динамического контента и HTML использовать собственные функции экранирования.
  • Глобальная настройка Noty.overrideDefaults помогает избежать случайного пропуска экранирования в проекте.

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

Оглавление