Политики безопасности и CSP
1) Зачем нужны политики безопасности
Современный фронтенд и API зависят от множества источников (CDN, аналитика, PSP, 3DS, чаты). Без жестких политик повышаются риски XSS, кликджекинга, утечек данных и угонов сессий. Политики безопасности ограничивают то, что разрешено по умолчанию, переводя браузер в модель «разрешено только явно» (allow-list).
2) Базовые столпы
CSP (Content Security Policy) — централизованное «меню» разрешенных источников и поведения JS/CSS/медиа.
Trusted Types — защита от DOM-XSS на уровне типов.
SRI (Subresource Integrity) — контроль целостности скриптов/стилей.
COOP/COEP/CORP — жесткое изолирование контекстов и ресурсов между источниками.
Fetch Metadata (`Sec-Fetch-`) — серверное решение для фильтрации кросс-сайтовых запросов.
CORS — политика междоменного доступа к API.
Классические заголовки: HSTS, `X-Frame-Options`/`frame-ancestors`, `Referrer-Policy`, `Permissions-Policy`, SameSite-cookies.
3) CSP: основа и принципы
3.1 Директивы (ключевые)
`default-src` — дефолт для остальных директив.
`script-src` — источники JS, nonce/hash, `strict-dynamic`, `report-sample`.
`style-src` — источники CSS; минимизировать `unsafe-inline`.
`img-src`, `font-src`, `media-src`, `object-src` (обычно `none`).
`connect-src` — сетевые запросы (XHR/fetch/WebSocket).
`frame-src`/`child-src` — сторонние фреймы (PSP, 3DS).
`frame-ancestors` — кто может встраивать наш сайт (анти-кликджекинг).
`base-uri` — запрет подмены `<base>`.
`form-action` — куда разрешено сабмитить формы.
`upgrade-insecure-requests`, `block-all-mixed-content` — борьба с миксом HTTP/HTTPS.
`report-uri`/`report-to` — куда слать нарушения.
3.2 Nonce и hash
Nonce-подход: на каждый HTTP-ответ генерировать криптослучайный `nonce`, добавлять к inline-скриптам `<script nonce="...">` и в `script-src 'nonce-...'`.
Hash-подход: фиксированный хэш содержимого инлайна. Подходит для статического HTML, неудобен при динамике.
`strict-dynamic`: доверять только скриптам, загруженным «доверенным» скриптом (с nonce/hash). Убирает необходимость перечислять целевые домены при динамической загрузке, но требует modern-браузеров.
3.3 Запрет `unsafe-`
Избегать `unsafe-inline`, `unsafe-eval`. Если фреймворк требует eval (например, source-map в dev), включать только на dev.
Для стилей — использовать `nonce` или `hash`, по возможности без инлайнов.
3.4 Пример строгой CSP (боевой ориентир)
Content-Security-Policy:
default-src 'none';
base-uri 'self';
object-src 'none';
script-src 'self' 'nonce-{RANDOM}' 'strict-dynamic' https://www. googletagmanager. com;
style-src 'self' 'nonce-{RANDOM}';
img-src 'self' data: https://images. example-cdn. com;
font-src 'self' https://fonts. gstatic. com;
connect-src 'self' https://api. example. com wss://ws. example. com;
frame-src https://3ds. psp. com https://pay. psp. com;
frame-ancestors 'none';
form-action 'self' https://pay. psp. com;
upgrade-insecure-requests;
report-to csp-endpoint; report-sample4) Trusted Types (DOM-XSS)
Включите директиву: `Content-Security-Policy: require-trusted-types-for 'script'; trusted-types app default`.
Создайте единую политику в коде (`window.trustedTypes.createPolicy('app', { createHTML() {... } })`).
Запрещайте небезопасные присваивания (`element.innerHTML =...`) без Trusted Types.
Интеграция с фреймворками (React/Angular/Vue): используйте безопасные API рендеринга, избегайте опасных dangerouslySetInnerHTML.
5) SRI (целостность CDN)
Для внешних `<script>`/`<link>` используйте `integrity="sha256-..." crossorigin="anonymous"`.
SRI дополняет, а не заменяет CSP. При обновлении версии CDN — обновляйте хэш.
6) Кликджекинг и фреймы
Современный способ — `frame-ancestors` (заменяет устаревший `X-Frame-Options`).