Фильтрация загруженного контента

Featherlight строит работу с загружаемым контентом вокруг концепции фильтров содержимого (content filters). Каждый фильтр отвечает за распознавание источника данных и преобразование полученного результата в DOM-узел, который затем помещается в lightbox. Такой подход позволяет гибко вмешиваться в процесс загрузки и отображения данных без изменения ядра библиотеки.

Фильтрация происходит до вставки контента в контейнер Featherlight, что делает этот механизм ключевым для:

  • очистки HTML;
  • модификации структуры документа;
  • добавления служебных обёрток и атрибутов;
  • ограничения или нормализации данных из внешних источников.

Встроенные фильтры и их роль

По умолчанию Featherlight поставляется с набором стандартных фильтров, среди которых наиболее часто используются:

  • image — загрузка и отображение изображений;
  • html — вставка HTML-фрагментов;
  • ajax — загрузка HTML по HTTP-запросу;
  • iframe — встраивание внешних страниц;
  • text — работа с простым текстом.

Каждый фильтр определяется объектом со следующими ключевыми элементами:

  • regex — регулярное выражение для определения применимости фильтра;
  • process — функция обработки входных данных;
  • name — уникальное имя фильтра.

Механизм выбора фильтра основан на первом совпадении regex, что делает порядок фильтров критически важным.

Модификация стандартных фильтров

Стандартные фильтры доступны через $.featherlight.contentFilters и могут быть переопределены или расширены. Это позволяет внедрять фильтрацию без полной замены логики загрузки.

Пример сценариев применения:

  • удаление <script> и <style> из AJAX-ответов;
  • замена относительных ссылок на абсолютные;
  • добавление классов к корневым элементам;
  • нормализация вложенной разметки.

Функция process получает исходные данные и объект Featherlight, что даёт доступ к настройкам текущего экземпляра и контексту вызова.

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

Добавление собственного фильтра выполняется путём расширения объекта contentFilters. Пользовательский фильтр может перехватывать как URL, так и уже загруженный контент.

Ключевые особенности:

  • фильтр может возвращать DOM-элемент, jQuery-объект или строку HTML;
  • допускается асинхронная обработка с возвратом false и последующим вызовом setContent;
  • фильтр может использоваться совместно с AJAX или iframe-загрузкой.

Типичные случаи применения:

  • рендеринг Markdown в HTML;
  • парсинг JSON и генерация представления;
  • фильтрация данных по whitelist-правилам.

Фильтрация AJAX-контента

AJAX-фильтр является одним из наиболее чувствительных с точки зрения безопасности. Загружаемый HTML часто содержит:

  • лишние контейнеры;
  • inline-скрипты;
  • стили, конфликтующие с текущей страницей.

На этапе фильтрации рекомендуется:

  • извлекать только нужные узлы по селекторам;
  • удалять потенциально опасные элементы;
  • выполнять очистку через сторонние библиотеки (например, DOM-санитайзеры).

Featherlight не навязывает конкретный механизм очистки, оставляя это на уровне фильтра.

Работа с iframe-контентом

Фильтрация iframe-контента отличается от HTML и AJAX. Здесь основное внимание уделяется:

  • настройке атрибутов sandbox, allow, referrerpolicy;
  • ограничению размеров и пропорций;
  • блокировке навигации внутри iframe при необходимости.

Фильтр может модифицировать URL до создания iframe или управлять параметрами элемента после его инициализации.

Колбэки как дополнительный уровень фильтрации

Помимо content filters, Featherlight предоставляет жизненный цикл с колбэками, которые позволяют вмешиваться в работу с контентом:

  • beforeOpen — доступен до загрузки;
  • afterContent — вызывается после вставки DOM-узла;
  • beforeClose и afterClose — полезны для очистки временных данных.

Комбинация фильтров и колбэков позволяет выстраивать многоуровневую систему обработки, где первичная фильтрация выполняется на уровне данных, а вторичная — на уровне DOM.

Управление производительностью

Фильтрация объёмного контента может негативно сказаться на производительности. Основные приёмы оптимизации:

  • минимизация количества DOM-операций;
  • отказ от глубоких обходов дерева;
  • кэширование результатов обработки;
  • отказ от синхронных AJAX-запросов.

Фильтр должен выполнять только ту работу, которая необходима именно для отображения в lightbox, без дублирования логики основного приложения.

Безопасность и изоляция

Featherlight не выполняет автоматическую защиту от XSS. Ответственность за безопасность полностью лежит на фильтрах и обработчиках:

  • любые внешние данные считаются недоверенными;
  • inline-скрипты не должны попадать в DOM;
  • iframe рекомендуется использовать с ограничениями sandbox.

Грамотно реализованная фильтрация превращает Featherlight из простого lightbox-компонента в контролируемую среду отображения внешнего и динамического контента.

Оглавление