Какие ресурсы позволяет ограничивать CSP?
CSP (Content Security Policy) — это механизм безопасности браузера, который определяет, откуда могут загружаться различные типы ресурсов на веб-странице. Это защищает от XSS-атак, инъекций кода и других векторов атак.
Основные директивы CSP
CSP контролирует загрузку следующих типов ресурсов:
1. Script-src — JavaScript код
Контролирует источники JavaScript файлов и inline скриптов:
Content-Security-Policy: script-src 'self' https://trusted.com
<meta http-equiv="Content-Security-Policy"
content="script-src 'self' https://trusted.com">
Примеры значений:
'self' — только с этого же домена
'unsafe-inline' — разрешить inline скрипты (⚠️ опасно)
'unsafe-eval' — разрешить eval() (⚠️ опасно)
https://trusted.com — разрешить скрипты с конкретного домена
https: — разрешить со всех HTTPS доменов
nonce-<hash> — разрешить inline скрипт с определённым nonce
hash-<algorithm>-<value> — разрешить inline скрипт с определённым хешем
<meta http-equiv="CSP" content="script-src 'nonce-abc123'">
<script nonce="abc123">
console.log('Этот скрипт разрешен');
</script>
<meta http-equiv="CSP"
content="script-src 'sha256-abc123...def456'">
<script>
console.log('Скрипт, чей хеш совпадает');
</script>
2. Style-src — CSS стили
Контролирует источники CSS файлов и inline стилей:
Content-Security-Policy: style-src 'self' https://fonts.googleapis.com 'unsafe-inline'
Примеры:
'self' — CSS файлы с этого домена
https://fonts.googleapis.com — Google Fonts
'unsafe-inline' — inline стили в HTML (⚠️ опасно)
'unsafe-hashes' — хеш для inline стилей
3. Img-src — изображения
Контролирует источники изображений:
Content-Security-Policy: img-src 'self' https: data:
Значения:
'self' — изображения с этого домена
https: — любые HTTPS изображения
data: — встроенные data URL изображения
blob: — blob URL
4. Font-src — шрифты
Контролирует источники веб-шрифтов:
Content-Security-Policy: font-src 'self' https://fonts.gstatic.com data:
5. Connect-src — сетевые запросы
Контролирует источники для fetch, XMLHttpRequest, WebSocket, etc.:
Content-Security-Policy: connect-src 'self' https://api.example.com wss://socket.example.com
Включает:
fetch()
XMLHttpRequest
WebSocket
- Beacon API
- EventSource
6. Media-src — аудио и видео
Контролирует источники аудио и видео файлов:
Content-Security-Policy: media-src 'self' https://video.example.com
7. Object-src — встроенные объекты
Контролирует <object>, <embed>, <applet> теги:
Content-Security-Policy: object-src 'none'
Примечание: рекомендуется устанавливать на 'none' для безопасности.
8. Frame-src — фреймы
Контролирует источники для <iframe> и <frame> тегов:
Content-Security-Policy: frame-src 'self' https://trusted.com
Примечание: также используй X-Frame-Options для дополнительной защиты.
9. Форма отправки (Form-action)
Контролирует, куда могут отправляться HTML формы:
Content-Security-Policy: form-action 'self' https://api.example.com
10. Другие директивы
default-src — fallback для всех других директив:
Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline'
child-src — iframe и web workers:
Content-Security-Policy: child-src 'self'
worker-src — Web Workers и Shared Workers:
Content-Security-Policy: worker-src 'self'
upgrade-insecure-requests — автоматически переводить HTTP на HTTPS:
Content-Security-Policy: upgrade-insecure-requests
block-all-mixed-content — блокировать всё неозащищённое содержимое:
Content-Security-Policy: block-all-mixed-content
Пример полной политики
Content-Security-Policy:
default-src 'self';
script-src 'self' 'unsafe-inline' https://cdn.example.com;
style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;
img-src 'self' https: data:;
font-src 'self' https://fonts.gstatic.com;
connect-src 'self' https://api.example.com;
frame-src 'self';
object-src 'none';
form-action 'self';
upgrade-insecure-requests;
CSP нарушения и обработка
Отправка отчётов о нарушениях CSP:
Content-Security-Policy: default-src 'self'; report-uri https://example.com/csp-report
Обработка нарушений на сервере (Node.js):
app.post('/csp-report', express.json(), (req, res) => {
console.error('CSP Violation:', req.body);
res.sendStatus(204);
});
Тестирование CSP
Content-Security-Policy-Report-Only — тестовая политика без блокировок:
Content-Security-Policy-Report-Only: default-src 'self'; report-uri /csp-report
Это позволяет видеть нарушения в отчётах без фактической блокировки ресурсов.
Best Practices
- Используй 'self' как основу и явно добавляй внешние источники
- Избегай 'unsafe-inline' и 'unsafe-eval' — это серьёзная угроза безопасности
- Используй nonce для необходимых inline скриптов и стилей
- Тестируй с Report-Only перед полным развёртыванием
- Логируй нарушения через report-uri
- Минимизируй разрешённые источники — включай только необходимое
- Обновляй политику при добавлении новых внешних ресурсов
Заключение
CSP — мощный инструмент защиты веб-приложений. Правильная конфигурация помогает предотвратить XSS-атаки, инъекции кода и другие векторы атак. Начни с консервативной политики (Report-Only) и постепенно её усовершенствуй.