Коротка відповідь
seniorContent Security Policy (CSP) — це механізм безпеки, що дозволяє обмежити джерела ресурсів, які може завантажувати веб‑сторінка. CSP визначає правила через заголовок HTTP або мета‑тег, що зменшує ризик XSS і ін’єкцій. Приклад: `Content-Security-Policy: default-src 'self'; script-src 'self' https://cdn.example.com`.
Повне пояснення
Що це і навіщо
Content Security Policy (CSP) — політика безпеки, що дозволяє веб‑розробникам вказувати, які джерела контенту (скрипти, стилі, зображення тощо) дозволено завантажувати. Це запобігає виконанню небажаних скриптів, що зменшує ризик XSS‑атак.
Ключові принципи
- Джерела (sources) визначаються через директиви:
default-src,script-src,style-srcтощо. - Синтаксис: значення можуть бути
'self', URL,https:,data:тощо. - Заголовок або
<meta http-equiv="Content-Security-Policy">.
Як це працює
Браузер читає заголовок CSP, порівнює кожен запит на ресурс із дозволеними джерелами. Якщо правило не відповідає, браузер блокує запит і генерує повідомлення в консолі.
Практика та реалізація
# У Node.js (Express)
app.use((req, res, next) => {
res.setHeader('Content-Security-Policy', "default-src 'self'; script-src 'self' https://cdn.jsdelivr.net");
next();
});
Тестування
- Unit: перевірка, що заголовок встановлено у відповіді.
- Integration: використати
supertestдля GET‑запиту і перевірити заголовок. - E2E: у Playwright можна
page.waitForEvent('response')і перевірити CSP.
Безпека та приватність
CSP допомагає уникнути XSS, але не замінює інші заходи (наприклад, sanitization). Важливо комбінувати CSP з X-Content-Type-Options: nosniff і правильним налаштуванням CORS.
Оптимізація
- Використовуйте
nonceабоhashдля динамічних скриптів. - Уникайте
'unsafe-inline'і'unsafe-eval', якщо це можливо.
Часті помилки
- Відсутність
default-src→ браузер дозволяє всі ресурси. - Неправильний синтаксис → CSP не застосовується.
- Використання
'unsafe-inline'→ XSS‑вразливість. - Невірний
nonce→ скрипти не виконуються. - Забагато директив → збільшує складність.
- Невірний
script-src→ блокує потрібні CDN‑скрипти. - Відсутність
report-uri→ немає звітів про порушення. - Невірний
frame-ancestors→ дозволяє фрейми з небажаних джерел.
Cheatsheet
default-src 'self'– дозволити лише власні ресурси.script-src 'self' https://cdn.example.com– дозволити скрипти з власного домену і CDN.style-src 'self' https://fonts.googleapis.com– дозволити стилі з Google Fonts.img-src * data:– дозволити будь-які зображення і data URI.report-uri /csp-report– надсилати порушення на сервер.