[Перевод] Использование Content-Security-Policy вместе с React & Emotion06.11.2023 14:30

f6a1cac05f7f125281e0442188368466

Content-Security-Policy (CSP) — это HTTP заголовок, который улучшает безопасность веб-приложений за счет запрета небезопасных действий, таких как загрузка и отправка данных на произвольные домены, использование eval, inline-скриптов и т.д. В этой статье будет сделан фокус на директиве style-src и ее использование вместе с CSS-in-JS библиотекой emotion.

Кратко о CSP и style-src

Content-Security-Policy заголовок должен быть выставлен в ответе вместе с загружаемой веб-страницей (например, index.html). Это выглядит следующим образом:

Content-Security-Policy: style-src 'self'

style-src — это директива, которая отвечает за то, какие стили можно загружать и применять на странице. Возможные значения:

  • 'none' — все стили запрещены

  • 'self' — разрешены файлы стилей, которые загружаются с того же домена, что и основной документ (страница)

  • , например https://example.com — разрешены файлы стилей с этого домена, также допускаются wildcard (*) на месте под-домена и порта

  • '-', например 'sha256-ozBpjL6dxO8fsS4u6fwG1dFDACYvpNxYeBA6tzR+FY8=' — разрешены файлы стилей и inline-стили (тег