XSS при загрузке внешнего контента

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

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

$.featherlight('<p>Пример текста в модальном окне</p>');

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

$('a.lightbox').featherlight();

В этом случае содержимое href ссылки автоматически загружается в модальное окно.

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

Featherlight поддерживает несколько типов контента, каждый из которых может быть источником потенциальных XSS-уязвимостей:

  1. HTML-контент — может быть передан как строка или извлечён из существующего элемента на странице через селектор data-featherlight.
  2. Изображения — автоматически создаются <img> элементы с src, который берётся из href.
  3. AJAX-контент — загружается с удалённого сервера, вставляется в модальное окно после успешного ответа.
  4. iFrame — позволяет загружать сторонние страницы внутри модального окна.

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

Угрозы XSS при загрузке внешнего контента

Основная уязвимость Featherlight возникает при работе с динамическим контентом, особенно когда:

  • Используется $.featherlight() с входящими данными из внешних источников.
  • AJAX-запросы возвращают HTML, который вставляется напрямую в DOM без очистки.
  • iFrame загружает страницы с ненадёжных источников, позволяя стороннему JavaScript взаимодействовать с модальным контейнером.

Пример опасного кода:

$.featherlight('<div>' + externalData + '</div>');

Если externalData содержит <script>alert('XSS');</script>, скрипт выполнится при вставке в DOM.

Безопасные методы работы с контентом

1. Использование текстового контента

Чтобы избежать XSS, необходимо разделять текст и HTML. Featherlight позволяет безопасно вставлять текст с помощью jQuery:

$.featherlight($('<div>').text(externalData));

Метод .text() автоматически экранирует специальные символы (<, >, &) и предотвращает выполнение скриптов.

2. Очистка HTML через безопасные библиотеки

Если необходимо вставлять HTML, его нужно фильтровать. Примеры популярных библиотек:

  • DOMPurify — очищает HTML, удаляя скрипты и опасные атрибуты.
  • sanitize-html — позволяет настроить разрешённые теги и атрибуты.

Пример с DOMPurify:

var cleanHTML = DOMPurify.sanitize(externalHTML);
$.featherlight(cleanHTML);

Это гарантирует, что никакие <script> или on* события не будут выполнены.

3. Безопасная загрузка AJAX-контента

AJAX-контент особенно опасен, если сервер возвращает HTML. Рекомендуется:

  • Возвращать JSON с данными, а не готовый HTML.
  • На клиенте генерировать безопасный HTML через шаблонизаторы (например, Handlebars, Mustache).
  • Использовать .text() или фильтровать через DOMPurify.

Пример безопасной вставки AJAX:

$.get('/api/content', function(data) {
    var safeHTML = DOMPurify.sanitize(data.html);
    $.featherlight(safeHTML);
});

4. iFrame и изоляция контента

iFrame создаёт отдельный контекст, что снижает риск выполнения внешнего скрипта в основном DOM. Для усиления безопасности:

  • Использовать атрибуты sandbox и referrerpolicy.
  • Ограничивать доступ через allow-scripts только при необходимости.
  • Не передавать чувствительные данные через глобальные переменные.

Пример:

$.featherlight('<iframe src="https://trusted-site.com" sandbox="allow-same-origin"></iframe>');

Настройки Featherlight, влияющие на безопасность

  • persist — при значении true сохраняет DOM после закрытия модального окна. Вставка непроверенного контента в такой контейнер увеличивает риск XSS.
  • afterContent — колбэк, который вызывается после вставки контента. Необходимо быть осторожным с манипуляцией DOM внутри этого колбэка.

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

$.featherlight('<div></div>', {
    afterContent: function() {
        this.$content.text(externalData);
    }
});

Рекомендации по предотвращению XSS

  • Никогда не вставлять сырые данные из URL или внешних источников напрямую в Featherlight.
  • Всегда экранировать текст или фильтровать HTML через проверенные библиотеки.
  • Использовать JSON-формат для обмена данными вместо HTML.
  • Ограничивать использование iFrame для доверенных источников.
  • Проверять все пользовательские входные данные на стороне сервера.

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

Оглавление