Content Security Policy

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

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

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

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link href="featherlight.min.css" rel="stylesheet">
<script src="featherlight.min.js"></script>

Базовое создание модального окна осуществляется через вызов:

$.featherlight('<p>Содержимое модального окна</p>');

Можно также привязать модальное окно к элементу на странице:

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

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

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

  1. Inline — отображение существующего DOM-элемента.
  2. Image — модальное окно с изображением (data-featherlight="image").
  3. AJAX — динамическая загрузка контента через URL (data-featherlight="ajax").
  4. iFrame — загрузка внешней страницы в iframe (data-featherlight="iframe").

Примеры:

// AJAX
$.featherlight('/some/content.html');

// Image
$('a.image-link').featherlight({ type: 'image' });

// iFrame
$.featherlight({ iframe: 'https://example.com', iframeMaxWidth: '80%' });

Настройка опций

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

  • variant — добавление CSS-класса для кастомного оформления.
  • closeOnClick — закрытие по клику на фон (true/false).
  • closeOnEsc — закрытие по клавише Escape (true/false).
  • persist — если true, контент inline остаётся в DOM после закрытия.
  • afterOpen, beforeClose, afterClose — колбэки для управления событиями.

Пример с опциями и колбэками:

$.featherlight('<p>Текст</p>', {
    variant: 'custom-lightbox',
    closeOnClick: false,
    afterOpen: function(event){
        console.log('Модальное окно открыто');
    },
    afterClose: function(event){
        console.log('Модальное окно закрыто');
    }
});

Управление стилями и темизацией

Featherlight использует CSS для визуального оформления модальных окон. Ключевые элементы:

  • .featherlight — контейнер окна.
  • .featherlight-content — область контента.
  • .featherlight-close-icon — кнопка закрытия.

Для изменения внешнего вида достаточно переопределить эти классы в CSS:

.featherlight.custom-lightbox .featherlight-content {
    background-color: #f0f0f0;
    border-radius: 10px;
    padding: 20px;
}

.featherlight.custom-lightbox .featherlight-close-icon {
    color: #333;
    font-size: 24px;
}

Группы и галереи

Featherlight позволяет создавать группы элементов для галерей с навигацией между окнами:

<a href="image1.jpg" data-featherlight="image" data-featherlight-group="gallery">1</a>
<a href="image2.jpg" data-featherlight="image" data-featherlight-group="gallery">2</a>
<a href="image3.jpg" data-featherlight="image" data-featherlight-group="gallery">3</a>

Поддерживаются методы перехода:

$.featherlight.current().next(); // следующее окно в группе
$.featherlight.current().previous(); // предыдущее окно

Контроль через API

Featherlight предоставляет объект $.featherlight.current(), позволяющий работать с текущим открытым окном. Методы:

  • close() — закрывает окно.
  • next(), previous() — навигация по группе.
  • content() — доступ к DOM-контенту окна.

Пример:

var fl = $.featherlight('<p>Привет</p>');
fl.close();

Поддержка Content Security Policy (CSP)

При использовании CSP важно учитывать, что Featherlight динамически вставляет HTML и может использовать inline-стили и скрипты. Основные рекомендации:

  • Для inline-контента использовать отдельные элементы в DOM вместо строк HTML.
  • Для AJAX и iframe явно указывать источники в script-src, style-src и frame-src.
  • Избегать eval() и inline JS в контенте.

Пример CSP для безопасной работы:

Content-Security-Policy: 
  default-src 'self';
  script-src 'self' https://code.jquery.com;
  style-src 'self' 'unsafe-inline';
  img-src 'self' https://example.com;
  frame-src https://example.com;

Расширения и плагины

Featherlight поддерживает расширение функционала через плагины:

  • Featherlight Gallery — расширяет стандартный lightbox до полноценной галереи.
  • Featherlight Icon — позволяет использовать кастомные иконки закрытия.

Подключение производится через отдельные JS-файлы и настройку опций:

$('a[data-featherlight="image"]').featherlightGallery({
    galleryFadeIn: 300,
    galleryFadeOut: 300
});

Практические советы

  • Использовать inline-элементы DOM для соблюдения CSP.
  • Для больших проектов создавать кастомные классы через variant.
  • Всегда подключать jQuery перед Featherlight.
  • Использовать колбэки для асинхронных действий, таких как подгрузка данных или трекинг аналитики.

Featherlight сочетает лёгкость и гибкость, обеспечивая быстрый и безопасный способ внедрения модальных окон на странице. Правильная настройка опций и соблюдение CSP позволяет использовать библиотеку в современных веб-приложениях без риска нарушения политики безопасности.

Оглавление