Content Security Policy

Tooltipster — это мощная библиотека для создания интерактивных всплывающих подсказок на элементах веб-страницы. Для корректной работы требуется подключение CSS и JS файлов библиотеки. В стандартном случае это выглядит так:

<link rel="stylesheet" href="tooltipster.bundle.min.css">
<script src="jquery.min.js"></script>
<script src="tooltipster.bundle.min.js"></script>

Инициализация подсказки выполняется вызовом метода .tooltipster() на выбранных элементах:

$('.tooltip').tooltipster({
    content: 'Текст подсказки',
    theme: 'tooltipster-shadow',
    delay: 300
});

Ключевые параметры инициализации:

  • content — содержимое подсказки, может быть строкой, HTML или jQuery-элементом.
  • theme — стиль отображения подсказки. Tooltipster предоставляет несколько стандартных тем, можно подключать свои.
  • delay — задержка перед появлением подсказки в миллисекундах.

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

Tooltipster поддерживает как текстовый, так и HTML-контент. Для HTML важно использовать опцию contentAsHTML: true:

$('.tooltip-html').tooltipster({
    content: $('<span><strong>Жирный текст</strong> и обычный текст</span>'),
    contentAsHTML: true,
    interactive: true
});

Пояснения:

  • interactive: true позволяет пользователю взаимодействовать с содержимым подсказки, например, нажимать кнопки или ссылки внутри неё.
  • Динамическое обновление содержимого происходит через метод tooltipster('content', newContent):
$('.tooltip-html').tooltipster('content', 'Новый текст подсказки');

Управление поведением подсказок

Tooltipster предоставляет широкий набор опций для управления поведением всплывающих подсказок:

  • trigger — событие, которое вызывает подсказку (hover, click, custom).
  • side — сторона появления подсказки (top, bottom, left, right). Можно указывать массив для автоматического выбора.
  • maxWidth — максимальная ширина подсказки.
  • functionBefore — колбэк перед отображением, позволяет динамически изменять контент.
  • functionReady — колбэк после появления подсказки.
  • functionAfter — колбэк после скрытия.

Пример использования нескольких опций:

$('.tooltip-dynamic').tooltipster({
    trigger: 'click',
    side: ['top', 'bottom'],
    maxWidth: 300,
    functionBefore: function(instance, helper){
        var newContent = 'Динамический контент: ' + new Date().toLocaleTimeString();
        instance.content(newContent);
    }
});

Интеграция с Content Security Policy (CSP)

Content Security Policy (CSP) контролирует, какие ресурсы могут загружаться на странице, предотвращая выполнение небезопасного кода. При работе с Tooltipster важно учитывать несколько аспектов:

1. Размещение скриптов и стилей

  • Все CSS и JS файлы библиотеки должны быть подключены с разрешённых источников (script-src и style-src).
  • Использование inline-скриптов запрещено при строгой CSP. Tooltipster позволяет полностью инициализировать подсказки через внешние JS файлы, избегая inline-кода.
<script src="tooltipster.bundle.min.js" nonce="yourNonceValue"></script>
  • В CSP заголовке допускается передача nonce-значения для разрешения конкретных скриптов и стилей:
Content-Security-Policy: script-src 'self' 'nonce-yourNonceValue'; style-src 'self' 'nonce-yourNonceValue';

2. HTML-контент и безопасное внедрение

Если контент подсказки формируется динамически и содержит HTML, необходимо исключить потенциально опасные элементы (например, <script>). Tooltipster поддерживает безопасное вставление HTML:

$('.tooltip-safe').tooltipster({
    content: $('<div>').text('Безопасный текст с HTML тегами'),
    contentAsHTML: true
});
  • Использование метода .text() вместо .html() предотвращает выполнение скриптов, что совместимо с CSP.

3. Inline-стили и темы

Некоторые темы Tooltipster применяют inline-стили через JavaScript. При строгой CSP рекомендуется использовать заранее скомпилированные CSS-файлы и отключить генерацию inline-стилей:

$('.tooltipster').tooltipster({
    theme: 'tooltipster-light',
    minWidth: 200,
    maxWidth: 400,
    contentAsHTML: true
});
  • Все стили должны быть подключены через link с разрешённого источника.

4. Загрузка ресурсов с доверенных источников

При работе с CSP важно, чтобы все изображения, шрифты и дополнительные файлы для подсказок загружались с доверенных доменов:

img-src 'self' https://example.com;
font-src 'self' https://fonts.gstatic.com;

Tooltipster не требует внешних ресурсов по умолчанию, но при кастомных темах или иконках необходимо учитывать эти директивы.

5. Обработка событий и безопасные колбэки

Tooltipster позволяет использовать функции обратного вызова (functionBefore, functionReady, functionAfter) без нарушения CSP, если они определены во внешних JS-файлах. Пример безопасной интеграции:

function updateTooltipContent(instance, helper){
    var safeContent = 'Текущая дата: ' + new Date().toLocaleDateString();
    instance.content(safeContent);
}

$('.tooltip-csp').tooltipster({
    functionBefore: updateTooltipContent,
    interactive: true
});
  • Такой подход полностью совместим с CSP, исключая необходимость inline-скриптов.

6. Поддержка строгих политик

Для сайтов с политикой default-src 'none' и строгими ограничениями, Tooltipster остаётся совместимым при соблюдении правил:

  • Все JS и CSS подключены через разрешённые источники.
  • Inline-скрипты и стили заменены на внешние файлы.
  • HTML-контент безопасно экранирован.
  • Колбэки определены в отдельных JS-файлах.

Это позволяет сохранять интерактивность подсказок без нарушения политики безопасности.

Tooltipster в связке с правильно настроенной CSP обеспечивает безопасное и гибкое отображение всплывающих подсказок, управляемых как статическим, так и динамическим контентом. Правильное подключение, экранирование HTML и использование внешних JS-файлов гарантируют совместимость с современными стандартами безопасности веб-приложений.

Оглавление