Санитизация HTML

Featherlight — это лёгкая и минималистичная библиотека для создания модальных окон (lightbox) в JavaScript. Основной её принцип заключается в простоте интеграции и высокой гибкости: она предоставляет удобный способ отображать изображения, HTML-контент и AJAX-запросы без громоздкого кода. Featherlight основана на jQuery и использует его возможности для манипуляции DOM и событий.

Подключение и инициализация

Для работы с Featherlight необходимо подключить jQuery, после чего подключается сам плагин и его стили:

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

Инициализация осуществляется через вызов метода .featherlight() на выбранных элементах:

$('.lightbox-trigger').featherlight({
    targetAttr: 'data-featherlight'
});

Здесь targetAttr указывает, где хранится содержимое, которое нужно открыть в модальном окне. По умолчанию используется href.

Типы контента

Featherlight поддерживает несколько типов контента:

  • Изображения: достаточно указать путь в href или data-featherlight.
  • HTML-контент: можно передавать селектор DOM или строку с HTML.
  • AJAX: позволяет загружать контент динамически с сервера.
  • IFrame: для интеграции сторонних страниц.

Пример открытия HTML-контента из страницы:

<a href="#" data-featherlight="#inline-content">Открыть контент</a>
<div id="inline-content" style="display:none;">
    <h2>Заголовок</h2>
    <p>Текст внутри модального окна.</p>
</div>

Настройка поведения

Featherlight предоставляет множество опций для настройки:

  • closeOnClick — закрытие по клику на фоне (true по умолчанию).
  • closeIcon — кастомная иконка закрытия.
  • openSpeed и closeSpeed — скорость анимации открытия и закрытия.
  • beforeOpen, afterOpen, beforeClose, afterClose — колбэки для управления жизненным циклом модального окна.

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

$('.lightbox-trigger').featherlight({
    beforeOpen: function() {
        console.log('Окно скоро откроется');
    },
    afterClose: function() {
        console.log('Окно закрыто');
    }
});

Санитизация HTML

Работа с внешним или динамическим HTML-контентом требует особого внимания к безопасности. Featherlight позволяет вставлять любые HTML-строки, что создаёт риск XSS-атак. Санитизация HTML — обязательный шаг при использовании пользовательских данных. Основные подходы:

  1. Использование библиотек для очистки HTML Библиотеки вроде DOMPurify позволяют безопасно фильтровать HTML:

    var cleanHtml = DOMPurify.sanitize(userInputHtml);
$.featherlight(cleanHtml);

    DOMPurify удаляет все скрипты, потенциально опасные атрибуты (onload, onclick) и теги, которые могут выполнять код.

  2. Удаление скриптов и событий вручную Если не использовать сторонние библиотеки, можно очищать контент через jQuery:

    var $content = $(userInputHtml);
$content.find('script').remove();
$content.find('*[onload], *[onclick]').removeAttr('onload onclick');
$.featherlight($content.html());

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

  3. Ограничение тегов и атрибутов Эффективная стратегия — разрешать только определённый набор тегов (<p>, <b>, <i>, <a>, <img> с безопасными src). Остальные элементы удаляются:

    var allowedTags = ['p', 'b', 'i', 'a', 'img'];
var $content = $(userInputHtml).filter(function() {
    return allowedTags.includes(this.tagName.toLowerCase());
});
$.featherlight($content);

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

При загрузке контента с сервера важно комбинировать AJAX с санитизацией. Пример безопасного вызова:

$.featherlight({
    ajax: '/get-content',
    beforeContent: function() {
        var sanitized = DOMPurify.sanitize(this.$content.html());
        this.$content.html(sanitized);
    }
});

Здесь контент загружается динамически, но перед отображением проходит через фильтр безопасности.

Дополнительные возможности Featherlight

  • Группировка элементов: позволяет создавать галереи с навигацией между изображениями.
  • Кастомные анимации: через CSS или JavaScript.
  • Поддержка мобильных устройств: автоматически адаптируется под сенсорное управление.

Featherlight сочетает простоту использования с гибкостью, но при работе с HTML-контентом особое внимание следует уделять санитизации и предотвращению XSS, так как библиотека напрямую вставляет HTML в DOM.

Оглавление