Content Security Policy

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

Основы CSP

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

  • default-src — базовый источник для всех ресурсов, если для конкретного типа не указано другое правило.
  • script-src — источники JavaScript.
  • style-src — источники CSS.
  • img-src — источники изображений.
  • connect-src — источники для AJAX-запросов, WebSocket и EventSource.
  • font-src — источники шрифтов.
  • frame-src — источники для <iframe>.

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

Content-Security-Policy: default-src 'self'; script-src 'self' https://cdn.example.com; style-src 'self' 'unsafe-inline';
  • 'self' — разрешает загрузку только с того же домена.
  • 'unsafe-inline' — разрешает выполнение встроенных скриптов и стилей (рекомендуется избегать).

CSP и Preact

Preact как лёгкий фронтенд-фреймворк генерирует DOM-элементы и управляет состоянием компонентов. CSP напрямую влияет на следующие аспекты:

  1. Инлайновые скрипты: Preact приложения часто используют встроенные скрипты для начальной инициализации. CSP с запретом инлайновых скриптов ('unsafe-inline') требует их перемещения в отдельные файлы.

  2. JSX и Preact-компоненты: JSX компилируется в вызовы h() и render(). Генерация DOM через Preact не создаёт проблем с CSP, если не используются динамические eval() или Function().

  3. Стили компонентов: Использование инлайновых стилей в JSX (style={{color: 'red'}}) может требовать директивы 'unsafe-inline' в style-src. Чтобы полностью соответствовать CSP без 'unsafe-inline', рекомендуется применять CSS-модули или внешние CSS-файлы.

  4. Динамическая загрузка ресурсов: Если Preact-компоненты подгружают скрипты через fetch или подключают внешние библиотеки, необходимо включать их домены в script-src или connect-src.

Варианты CSP для Preact-приложений

  1. Базовая политика:
Content-Security-Policy:
  default-src 'self';
  script-src 'self' https://cdn.jsdelivr.net;
  style-src 'self' https://fonts.googleapis.com;
  img-src 'self' dat a:;
  1. Политика с безопасным инлайном: Использует nonce для безопасного выполнения конкретного скрипта:
<script nonce="random123">console.log('Preact initialization');</script>

HTTP-заголовок:

Content-Security-Policy: script-src 'self' 'nonce-random123';
  1. Использование хэшей для встроенных скриптов: Можно добавить SHA-256 хэш содержимого скрипта:
script-src 'self' 'sha256-AbCdEfGhIjKlMnOpQrStUvWxYz1234567890abcdef';

Это позволяет CSP блокировать любые изменения скрипта, повышая безопасность.

Взаимодействие Preact с CSP в продакшене

  • Минификация и сборка: Современные сборщики (Vite, Webpack, esbuild) создают внешние JS и CSS-файлы, что позволяет минимизировать использование инлайновых ресурсов и упрощает соответствие CSP.
  • Сторонние библиотеки: Любые внешние скрипты должны быть явно разрешены в CSP. Для CDN рекомендуется использовать Subresource Integrity (SRI).
  • AJAX и WebSocket: Все адреса API, к которым обращается Preact-приложение, должны быть перечислены в connect-src.

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

  • Избегать 'unsafe-inline' и 'unsafe-eval'.
  • Использовать внешние скрипты и стили, добавляя их домены в соответствующие директивы.
  • Применять nonce или hash для скриптов, которые нельзя вынести во внешние файлы.
  • Проверять политику CSP на тестовых окружениях, используя Content-Security-Policy-Report-Only.
  • Логи CSP-нарушений помогут выявить потенциальные проблемы до того, как они станут критическими.

CSP обеспечивает эффективную защиту Preact-приложений от XSS и других атак. Корректная настройка директив позволяет сохранять функциональность динамических компонентов при строгих правилах безопасности.

Оглавление