Политика безопасности содержимого для приложений React

Политика безопасности содержимого (CSP) — это заголовок HTTP-ответа, сообщающий браузеру, какие источники содержимого считаются доверенными. Объявляя точный список разрешенных скриптов, стилей, изображений и шрифтов, CSP не позволяет выполнять внедренное вредоносное содержимое — даже если уязвимость XSS позволяет злоумышленнику внедрить HTML на страницу.

default-src 'self' задает базовое правило: все типы ресурсов (скрипты, стили, изображения, шрифты и фреймы) могут загружаться только из того же источника. script-src 'self' ограничивает загрузку скриптов тем же источником и блокирует скрипты с внешних CDN, если они не указаны явно. Вместе эти две директивы образуют основу строгой CSP.

eval() преобразует строку в исполняемый код во время работы программы — именно это требуется XSS-полезным нагрузкам. CSP с script-src 'self' (без 'unsafe-eval') блокирует eval() и связанные функции, такие как new Function() и setTimeout(string). Это устраняет целый класс способов выполнения XSS-полезных нагрузок.

'strict-dynamic' в script-src передает доверие скриптам, загруженным уже доверенными скриптами. Это позволяет использовать шаблоны динамической загрузки скриптов, применяемые сборщиками, без необходимости добавлять в список разрешенных каждый адрес CDN. Доверенный скрипт может загрузить дополнительные скрипты, и они наследуют это доверие.

Если приложению требуется конкретный встроенный скрипт (например, фрагмент инициализации аналитики), можно вычислить его хеш SHA-256 и добавить 'sha256-base64hash' в script-src. Разрешается выполнять непосредственно на странице только скрипты с точно таким хешем. Любой скрипт, внедренный злоумышленником, будет иметь другой хеш и будет заблокирован.

Одноразовое значение — это криптографически случайное значение, генерируемое сервером для каждого запроса. Сервер добавляет это значение и в тег скрипта (<script nonce="abc123">), и в заголовок CSP (script-src 'nonce-abc123'). Выполняются только скрипты с правильным одноразовым значением. Злоумышленники не могут предсказать это значение, поэтому внедренные скрипты не могут его использовать.

CSP поддерживает отправку отчетов о нарушениях через report-uri /csp-violation-endpoint или более новую директиву report-to. Когда браузер блокирует ресурс из-за CSP, он отправляет на конечную точку отчет в формате JSON. Отслеживание этих отчетов помогает выявлять как реальные проблемы конфигурации, так и активные попытки атак.

В Next.js добавьте заголовки CSP в промежуточный обработчик: создайте middleware.ts, сгенерируйте одноразовое значение, задайте заголовок Content-Security-Policy и передайте это значение странице через заголовок ответа. Макет страницы считывает одноразовое значение из заголовка и применяет его ко всем встроенным скриптам и тегам стилей.

Content-Security-Policy-Report-Only — это режим тестирования: браузер ничего не блокирует, но отправляет отчеты обо всех нарушениях, которые привели бы к блокировке. Сначала разверните приложение в режиме только отчетов, исправьте все нарушения, а затем переключитесь на применяющий ограничения заголовок Content-Security-Policy, чтобы не нарушить работу приложения.

Когда CSP блокирует ресурс, консоль Chrome DevTools показывает красное сообщение об ошибке с адресом заблокированного ресурса и нарушенной директивой. Эти сообщения бесценны во время разработки и тестирования. Каждое нарушение необходимо устранить: исправить политику, переместить ресурс в разрешенный источник или использовать одноразовое значение либо хеш.

Практическая CSP для SPA на React: default-src 'self'; script-src 'self' 'strict-dynamic' 'nonce-NONCE'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; connect-src 'self' https://api.yourdomain.com; frame-ancestors 'none'. Директива frame-ancestors 'none' также предотвращает атаки с перехватом кликов, блокируя встраивание приложения во фреймы.

Что предотвращает директива script-src 'self' в политике безопасности содержимого?

CSP — это HTTP-заголовок, объявляющий доверенные источники содержимого. default-src 'self' и script-src 'self' блокируют внешние скрипты и eval. Встроенные скрипты разрешаются с помощью хешей или одноразовых значений. 'strict-dynamic' поддерживает динамическую загрузку скриптов. Используйте Content-Security-Policy-Report-Only для тестирования перед включением принудительного применения. Next.js реализует CSP через промежуточный обработчик. Консоль DevTools показывает нарушения в реальном времени.