Санитизация HTML-контента

Tooltipster позволяет отображать сложные HTML-подсказки поверх элементов страницы. Однако при работе с HTML-контентом важно учитывать безопасность: небезопасный или непроверенный HTML может привести к XSS-уязвимостям. Для защиты используется санитизация HTML, которая предотвращает выполнение вредоносных скриптов.

Подключение и настройка Tooltipster для HTML

Tooltipster по умолчанию позволяет вставлять HTML-контент через опцию content или атрибут title. Для включения полноценной поддержки HTML необходимо указать параметр:

$('.tooltip').tooltipster({
    content: $('<div><strong>Сильный заголовок</strong><p>Описание подсказки</p></div>'),
    contentAsHTML: true,
    interactive: true,
    theme: 'tooltipster-shadow'
});

Ключевые моменты:

  • contentAsHTML: true — позволяет рендерить HTML вместо простого текста.
  • interactive: true — делает подсказку интерактивной, чтобы в ней можно было размещать ссылки, кнопки и другие элементы управления.
  • theme — визуальное оформление подсказки.

Если contentAsHTML не включен, все HTML-теги будут экранированы и отображены как текст.

Опасности вставки небезопасного HTML

HTML, передаваемый напрямую, может содержать:

  • <script>-теги или inline-скрипты.
  • Атрибуты on* (например, onclick, onmouseover) с вредоносным кодом.
  • Внешние ресурсы через <iframe> или <img> с опасными URL.

Непроверенный HTML может привести к XSS, утечке данных или манипуляции DOM.

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

Tooltipster не выполняет автоматическую очистку HTML. Для безопасной работы используют внешние библиотеки:

  1. DOMPurify
const unsafeHTML = '<img src=x oner ror=alert(1)><p>Безопасный текст</p>';
const safeHTML = DOMPurify.sanitize(unsafeHTML);

$('.tooltip').tooltipster({
    content: $(safeHTML),
    contentAsHTML: true
});
  • DOMPurify.sanitize() удаляет все потенциально опасные элементы и атрибуты.
  • Позволяет сохранять форматирование, <b>, <i>, <a> и другие безопасные теги.
  1. Sanitize-HTML

Позволяет более тонко настраивать правила очистки:

const cleanHTML = sanitizeHtml(unsafeHTML, {
  allowedTags: ['b', 'i', 'em', 'strong', 'a', 'p'],
  allowedAttributes: {
    'a': ['href', 'title', 'target']
  }
});

$('.tooltip').tooltipster({
    content: $(cleanHTML),
    contentAsHTML: true
});
  • Определяет, какие теги и атрибуты разрешены.
  • Обеспечивает строгий контроль над внешним контентом.

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

  1. Всегда использовать санитизацию перед добавлением HTML в Tooltipster.
  2. Не вставлять HTML напрямую из пользовательского ввода без проверки.
  3. Для динамического контента применять sanitize в момент формирования подсказки.
  4. Если необходимо разрешить сложный HTML (например, таблицы, картинки), убедиться, что используются только безопасные атрибуты и ссылки.
  5. Использовать опцию interactive: true для элементов управления в подсказке, чтобы пользователь мог взаимодействовать с безопасным контентом без риска исполнения скриптов.

Работа с динамическим контентом

При подгрузке HTML через AJAX важно интегрировать санитизацию на лету:

$.get('/tooltip/content', function(data) {
    const safeContent = DOMPurify.sanitize(data);
    $('.tooltip').tooltipster('content', $(safeContent));
});
  • Это предотвращает вставку потенциально опасного кода с серверной стороны.
  • Сохраняется поддержка HTML и форматирования текста.

Фильтрация ссылок и ресурсов

Особое внимание уделяется ссылкам:

  • Отключать jav * ascript: в href.
  • Добавлять rel="noopener noreferrer" для внешних ссылок.
  • Проверять URL на соответствие whitelist или локальным ресурсам.
const safeHTML = DOMPurify.sanitize(unsafeHTML, {
  ALLOWED_URI_REGEXP: /^https?:\/\//
});
  • ALLOWED_URI_REGEXP ограничивает URL только безопасными протоколами.
  • Исключает любые inline скрипты и потенциально вредоносные ссылки.

Интеграция с темами и кастомизацией

Санитизированный HTML можно комбинировать с любыми темами Tooltipster, сохраняя дизайн:

$('.tooltip').tooltipster({
    content: $(DOMPurify.sanitize(ajaxContent)),
    contentAsHTML: true,
    theme: 'tooltipster-light',
    animation: 'fade',
    delay: 200
});
  • Анимация и задержка не влияют на безопасность.
  • HTML остаётся безопасным и интерактивным.

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

Оглавление