Content Security Policy

Content Security Policy (CSP) — это механизм безопасности, который позволяет ограничивать источники контента, загружаемого на страницу, снижая риск атак типа XSS (Cross-Site Scripting). Для современных JavaScript-фреймворков, включая Mithril.js, корректная настройка CSP критически важна, поскольку динамическая генерация DOM и использование inline-скриптов могут конфликтовать с политикой безопасности.

Основные принципы CSP

  1. Разделение источников контента CSP задаётся с помощью HTTP-заголовка Content-Security-Policy или мета-тега <meta>. Он определяет, какие источники разрешены для загрузки различных типов ресурсов:

    • script-src — источники JavaScript.
    • style-src — источники CSS.
    • img-src — источники изображений.
    • connect-src — источники для AJAX-запросов.
    • font-src, media-src, frame-src — для шрифтов, мультимедиа и встроенных фреймов.

  2. Запрет inline-скриптов и eval Строгая CSP запрещает использование inline-скриптов (<script>...</script>) и функций вроде eval(). Mithril активно использует JavaScript для генерации виртуального DOM, но при этом обычно не требует inline-скриптов, если код разделён на модули.

  3. Использование nonce и hash Если необходимо включить inline-скрипт, CSP позволяет использовать атрибут nonce или хэш содержимого скрипта. Это даёт возможность выполнять только проверенные скрипты и блокировать все остальные.

Настройка CSP для приложений на Mithril

Mithril.js строится вокруг функций m() и m.mount(), которые создают виртуальный DOM и монтируют компоненты на страницу. CSP может конфликтовать с определёнными подходами, например:

  • Inline-обработчики событий: <button oncl ick="doSomething()"> будут блокированы строгой CSP. Вместо этого события должны назначаться через Jav * aScript:
m('button', { onclick: () => console.log('Clicked') }, 'Нажми меня');
  • Dynamic scripts: использование eval() или new Function() запрещено в безопасной политике. Mithril не требует подобных конструкций, что делает его совместимым с CSP.

Пример строгой CSP для Mithril-приложения

Content-Security-Policy:
  default-src 'self';
  script-src 'self';
  style-src 'self' 'unsafe-inline';
  img-src 'self' dat a:;
  connect-src 'self' https://api.example.com;
  font-src 'self';
  • 'self' ограничивает загрузку ресурсов с собственного домена.
  • 'unsafe-inline' в style-src позволяет использовать inline-стили, что иногда требуется для Mithril-компонентов с динамическими стилями.
  • connect-src указывает, какие адреса разрешены для fetch/AJAX-запросов.

Взаимодействие Mithril с CSP

Mithril не генерирует <script> теги динамически, а работает через виртуальный DOM и методы JavaScript. Это означает:

  • Нет необходимости включать unsafe-inline для script-src.
  • События можно назначать через объекты атрибутов компонентов.
  • AJAX-запросы через m.request нужно ограничивать разрешёнными доменами в CSP (connect-src).

Практические рекомендации

  1. Разделять JavaScript и HTML, избегая inline-кода.
  2. Назначать обработчики событий через объекты атрибутов компонентов.
  3. Использовать CSP с default-src 'self' и явным указанием доверенных ресурсов.
  4. Для сторонних скриптов применять nonce или хэш.
  5. Проверять приложение через инструменты браузера на нарушения CSP (CSP violation в консоли).

CSP и динамическая генерация контента

Mithril активно обновляет DOM без перезагрузки страницы. CSP не блокирует создание элементов через JavaScript, если:

  • Не используется eval или new Function.
  • Нет вставки HTML через innerHTML с недоверенным содержимым.

Для безопасного рендеринга стороннего HTML следует использовать специализированные библиотеки-санитайзеры или встроенные методы Mithril:

m.trust(safeHtmlString)

m.trust позволяет внедрять доверенный HTML, но его использование должно быть строго ограничено и проверено.

Итоговая структура CSP для крупных Mithril-приложений

  • default-src 'self' — базовое ограничение по умолчанию.
  • script-src 'self' — разрешение только локальных скриптов.
  • style-src 'self' 'unsafe-inline' — для динамических стилей.
  • img-src 'self' dat a: — изображения с сервера и встроенные данные.
  • connect-src 'self' + список API-доменов — для безопасных сетевых запросов.
  • font-src 'self' — загрузка шрифтов только с собственного домена.

Эта конфигурация обеспечивает высокую безопасность и совместимость с архитектурой Mithril, минимизируя риски XSS и других атак.

Оглавление