XSS защита

XSS (Cross-Site Scripting) — это тип уязвимости веб-приложений, при которой злоумышленник внедряет в веб-страницу вредоносный скрипт, выполняющийся на стороне клиента. Основная опасность XSS заключается в том, что скрипт получает доступ к данным пользователя, таким как cookies, токены аутентификации и информация из DOM, и может использовать их для несанкционированных действий.

Выделяют три основных вида XSS:

  1. Reflected XSS (Отражённый) Скрипт внедряется в URL или форму ввода и сразу же возвращается пользователю через ответ сервера. Уязвимость проявляется, когда данные пользователя выводятся на страницу без корректной фильтрации.

  2. Stored XSS (Сохранённый) Вредоносный скрипт сохраняется на сервере (в базе данных, комментариях, форумах) и выполняется при посещении страницы другими пользователями. Этот тип считается наиболее опасным, так как может затронуть большое количество пользователей.

  3. DOM-based XSS Скрипт внедряется через манипуляции DOM на стороне клиента. Уязвимость проявляется, когда JavaScript на странице напрямую использует данные из URL или других источников без проверки и экранирования.

Основные принципы защиты от XSS

1. Экранирование данных (Escaping) Любые данные, выводимые в HTML, должны проходить экранирование специальных символов: <, >, ", ', &. Например:

function escapeHTML(str) {
  return str.replace(/[&<>"']/g, function(match) {
    const escape = {
      '&': '&amp;',
      '<': '&lt;',
      '>': '&gt;',
      '"': '&quot;',
      "'": '&#39;'
    };
    return escape[match];
  });
}

Экранирование предотвращает выполнение внедрённого скрипта, превращая его в безопасный текст.

2. Content Security Policy (CSP) CSP позволяет ограничить источники исполняемого контента на сайте. Пример строгой политики:

Content-Security-Policy: default-src 'self'; script-src 'self'; object-src 'none';

CSP блокирует скрипты, загружаемые с ненадёжных источников, и предотвращает внедрение inline-скриптов.

3. Проверка и фильтрация пользовательского ввода Любые данные от пользователей должны проходить проверку на тип, длину и формат. Для текста лучше ограничивать только допустимые символы, а HTML-контент разрешать только через безопасные библиотеки типа DOMPurify.

import DOMPurify from 'dompurify';

const cleanHTML = DOMPurify.sanitize(userInput);

4. Использование безопасных методов работы с DOM Не следует вставлять HTML через innerHTML напрямую с данными пользователя. Вместо этого использовать безопасные методы:

  • textContent для текста
  • setAttribute для атрибутов
  • appendChild для добавления элементов
const div = document.createElement('div');
div.textContent = userInput;
document.body.appendChild(div);

Специфика защиты в MDX

MDX комбинирует Markdown и JSX, что позволяет внедрять компоненты React в текст. Это создаёт дополнительные риски XSS, если данные пользователя рендерятся в компонентах без фильтрации.

Правила безопасного рендеринга в MDX:

  1. Не вставлять сырые HTML-строки через dangerouslySetInnerHTML, если данные исходят от пользователя.
  2. Использовать безопасные React-компоненты для вывода текста:
export default function Comment({ text }) {
  return <p>{text}</p>; // Автоматическая защита от XSS
}
  1. Санитизация HTML-контента перед вставкой в MDX. Для этого часто используют DOMPurify или аналогичные библиотеки:
import DOMPurify from 'dompurify';

export default function SafeHTML({ html }) {
  const clean = DOMPurify.sanitize(html);
  return <div dangerouslySetInnerHTML={{ __html: clean }} />;
}
  1. Ограничение использования сторонних компонентов, которые могут рендерить HTML напрямую, без проверки и экранирования данных.

Интеграция CSP и MDX

MDX позволяет использовать компоненты, которые генерируют HTML и JSX одновременно. Важно дополнительно настраивать CSP:

  • Запрет inline-скриптов ('unsafe-inline')
  • Разрешение только доверенных источников скриптов (script-src 'self')
  • Блокировка потенциально опасных объектов (object-src 'none')

Это обеспечивает защиту на уровне браузера даже при случайном внедрении небезопасного кода через компоненты MDX.

Тестирование XSS у компонентов MDX

  1. Создание тестовых данных с вредоносными скриптами:
const malicious = '<img src=x oner ror=alert(1)//>';

  1. Проверка рендеринга компонентов: убедиться, что скрипт не выполняется.

  2. Использование инструментов автоматического тестирования безопасности: OWASP ZAP, Burp Suite или тесты на Jest с эмуляцией DOM.

  3. Регулярный аудит зависимостей: особенно библиотек для рендеринга HTML или MDX-компонентов. Устаревшие версии могут иметь известные XSS-уязвимости.

Эти методы позволяют комплексно защитить приложение на MDX от XSS, сохраняя удобство использования компонентов и гибкость в работе с контентом.

Оглавление