Санитизация данных

Sanitization данных является критически важной частью разработки веб-компонентов, обеспечивая защиту от XSS-атак и некорректного отображения пользовательского контента. В контексте FAST Element задача санитизации включает очистку динамически вставляемого HTML, управление атрибутами и безопасное связывание данных с шаблонами.

Основы FAST Element

FAST Element — это библиотека для создания высокопроизводительных веб-компонентов на базе стандартов Web Components. Основные строительные блоки включают:

  • FASTElement — базовый класс для создания компонентов.
  • html — функция для декларативного описания шаблонов.
  • css — поддержка стилевой инкапсуляции.
  • Привязки данных (Bindings) — механизмы связывания свойств и атрибутов с DOM.

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

Опасности небезопасного HTML

Использование конструкции:

html`<div>${userInput}</div>`

без предварительной обработки может привести к выполнению вредоносного кода. Например, если userInput содержит <script>alert('XSS')</script>, он будет выполнен при рендеринге. В FAST Element по умолчанию строки интерполируются безопасно: специальные символы (<, >, &, ") автоматически экранируются. Это предотвращает большинство атак через стандартные текстовые привязки.

Прямое управление HTML и unsafeHTML

Для случаев, когда требуется вставка полноценного HTML, используется директива unsafeHTML:

import { html } from "@microsoft/fast-element";
import { unsafeHTML } from "@microsoft/fast-element/lit-html/directives/unsafe-html.js";

html`<div>${unsafeHTML(userInput)}</div>`

Эта директива не выполняет санитизацию — вставляемый HTML будет интерпретирован браузером напрямую. Использование unsafeHTML должно сопровождаться:

  1. Проверкой источника данных.
  2. Очисткой HTML с помощью специализированных библиотек, таких как DOMPurify.

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

import DOMPurify from "dompurify";

const sanitizedHTML = DOMPurify.sanitize(userInput);
html`<div>${unsafeHTML(sanitizedHTML)}</div>`;

Санитизация атрибутов

FAST Element поддерживает привязку атрибутов через двоеточие:

html`<img src="${imageSrc}" alt="${imageAlt}">`
  • Значения автоматически экранируются.
  • Опасность возникает при динамическом формировании ссылок или href:
html`<a href="${userLink}">Ссылка</a>`

Чтобы предотвратить открытие вредоносных URL, рекомендуется проверять схему (http, https) и блокировать jav * ascript: или другие потенциально опасные протоколы.

Пример фильтрации ссылок:

function sanitizeUrl(url) {
    try {
        const parsed = new URL(url, window.location.origin);
        return parsed.protocol === "http:" || parsed.protocol === "https:" ? parsed.href : "#";
    } catch {
        return "#";
    }
}

html`<a href="${sanitizeUrl(userLink)}">Ссылка</a>`;

Санитизация пользовательских событий

FAST Element позволяет привязывать обработчики событий прямо в шаблоне:

html`<button @click="${this.onClick}">Клик</button>`

Если обработчик генерируется динамически на основе пользовательских данных, необходимо убедиться, что данные не подставляются в качестве имени функции или кода. Использование привязок через методы класса предотвращает внедрение произвольного JavaScript.

Использование слотов и динамических компонентов

Слоты и динамические компоненты — ещё одна область, где важна санитизация. Вставка контента через <slot> безопасна, так как FAST Element обрабатывает текст автоматически, но динамическая генерация компонентов через фабрики требует проверки:

const componentType = getComponentType(userInput); // небезопасно, если userInput произвольный

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

Резюме правил санитизации

  1. Стандартные текстовые привязки автоматически безопасны.
  2. unsafeHTML требует явной очистки данных через проверенные библиотеки.
  3. Динамические URL и атрибуты должны фильтроваться по схемам и формату.
  4. Обработчики событий должны быть определены в коде, а не создаваться из пользовательского ввода.
  5. Динамические компоненты и слоты должны использоваться с ограниченным набором допустимых значений.

Соблюдение этих правил гарантирует, что компоненты FAST Element будут защищены от большинства XSS-атак и некорректной интерпретации данных.

Оглавление