Ответ
Content Security Policy (CSP) настраивается через HTTP-заголовок Content-Security-Policy или метатег <meta>. Основные шаги:
- Определите источники для скриптов, стилей, изображений и других ресурсов:
<meta http-equiv="Content-Security-Policy"
content="default-src 'self';
script-src 'self' https://trusted.cdn.com;
style-src 'self' 'unsafe-inline';
img-src *">- Ключевые директивы:
default-src- политика по умолчаниюscript-src- источники скриптовstyle-src- источники стилейimg-src- источники изображенийconnect-src- ограничения для XHR/fetch
- Специальные значения:
'self'- текущий домен'none'- запрет'unsafe-inline'- разрешает inline-скрипты/стили (не рекомендуется)'unsafe-eval'- разрешает eval (опасно)
Совет: Начинайте с строгой политики и постепенно расширяйте, используя отчеты о нарушениях (директива report-uri).
Ответ 18+ 🔞
А, CSP, блядь! Ну это ж та самая штука, которая говорит браузеру: "Слушай сюда, пидрила, откуда тебе можно грузить скрипты, а откуда — нет, чтобы всякую хуйню не впендюрили тебе на сайт!"
Настраивается эта бандура либо через заголовок Content-Security-Policy (сервером), либо через метатег в <head>, если ты, конечно, не совсем уж олдовый распиздяй.
Вот смотри, как это выглядит в деле, ёпта:
<meta http-equiv="Content-Security-Policy"
content="default-src 'self';
script-src 'self' https://trusted.cdn.com;
style-src 'self' 'unsafe-inline';
img-src *">Перевожу с бюрократического на русский: "По умолчанию всё тащи только с моего домена ('self'). Но скрипты можешь взять ещё и с этого одного доверенного CDN, стили — ну ладно, разрешаю inline-стили (хотя это пиздец как небезопасно, но иначе верстальщик взвоет), а картинки — тащи откуда угодно, мне похуй (*)."
Основные рычаги давления, которые у тебя есть, это директивы:
default-src— дефолтная политика для всего, что не указал отдельно. Ставь'none', и будет тебе пиздец и пустота.script-src— вот тут самое важное, блядь! Контролируй, откуда скрипты лезут. Не дай бог'unsafe-inline'или'unsafe-eval'поставить просто так — это как впустить в дом маньяка с топором и сказать "гостиная там налево".style-src— аналогично для стилей.img-src— для картинок. Если поставишь только'self', то все мемы с котиками с левых сайтов перестанут грузиться, и пользователи охуеют.connect-src— ограничивает, куда твои скрипты могут слать запросы (XHR, fetch). Без этого любая JS-сосалка может тихонько стырить все куки и отправить их на сервер злоумышленника.
Как не выстрелить себе в ногу, а потом в другую? Начинай с жёсткой политики, которая всё блокирует! Потом смотри в консоль браузера — она будет орать, как резаная, что и где не грузится. И вот эти ошибки — твой лучший друг. По одной белой листе, добавляй только те источники, без которых сайт реально не живет. А для всего остального есть директива report-uri (или report-to), которая будет слать тебе подробные отчёты о попытках нарушения, чтобы ты понимал, что ты ещё забыл разрешить или откуда лезет какая-то хуйня.
Короче, CSP — это как поставить решётку на окно. Сначала кажется, что душно и неудобно, но зато потом никакие ебаные воры-скрипты к тебе не залезут.