# О Content Security Policy (CSP)

### Что такое Content Security Policy

Cистема безопасности, которая помогает предотвратить различного рода атаки в веб-приложениях: XSS, кликджекинг и другие векторы инъекции кода. Её разработали с целью предотвратить подмену контента за счёт ограничений для ресурсов.\
\
По сути это как правила безопасности для веб-сайта или набор инструкций, которые говорят браузеру: \
\
— Какие части веб-сайта безопасны,\
— Можно ли доверять различным элементам: скрипты, стили, картинки и т.д. \
\
Если на нашем сайте должны выполняться только определенные скрипты, CSP не позволит загрузить скрипты из непроверенных источников. То же самое относится к остальным элементам. Если что-то пытается загрузиться с места, не указанного в правилах CSP → браузер всё заблокирует.

CSP реализована как HTTP-заголовок, отправляемый сервером при ответе на запрос браузера. В рамках этого заголовка и указываются правила.&#x20;

### Как работает CSP

1\. Разработчик определяет политику безопасности, выбирая подходящие для веб-сайта директивы. \
\
Директивы CSP — инструкции, определяющие какие ресурсы разрешены. Их достаточно много, поэтому мы приведет в таблице ниже самые распространенные.&#x20;

| Директива   | Значение                                                                                                               |
| ----------- | ---------------------------------------------------------------------------------------------------------------------- |
| default-src | Устанавливает политику по умолчанию для загрузки ресурсов.                                                             |
| script-src  | Определяет допустимые источники для JavaScript.                                                                        |
| style-src   | Указывает разрешенные источники для таблиц стилей (CSS).                                                               |
| img-src     | Ограничивает, откуда можно загружать изображения.                                                                      |
| connect-src | Ограничивает URLs, к которым веб-приложения могут подключаться через такие API, как XMLHttpRequest, WebSocket и Fetch. |
| font-src    | Устанавливает источники, разрешенные для загрузки шрифтов.                                                             |

2\. Когда пользователь открывает веб-страницу, веб-сервер отправляет HTTP-ответ браузеру, который включает в себя HTTP-заголовок CSP с установленными правилами.

3\. Браузер получает правила и использует их в качестве руководства при обработке загрузки и исполнения контента страницы. Каждый раз, когда страница пытается загрузить ресурс, браузер проверяет, разрешен ли этот ресурс CSP. Если ресурс не соответствует установленным правилам → блок.&#x20;

4\. CSP можно настроить на отправку отчетов, если в процессе обнаруживается попытка загрузить заблокированный контент. Это помогает анализировать и предотвращать потенциальные атаки.

### Что позволяет применение CSP

* Ограничить источники скриптов и стилей → это обеспечивает защиту от XSS атак.
* Запретить встраивание страницы в фреймы → это защищает от кликджекинга.
* Определить политику для работы с мультимедийными данными, шрифтами и другими ресурсами.
* Указать политику директив на случай несоответствия (например, `'default-src'` действует, когда явно не указаны другие источники для отдельных типов ресурсов).

### Пример HTTP-заголовка CSP:

`Content-Security-Policy: default-src 'self'; img-src 'self' example.com; script-src 'self' apis.example.com;`

В примере:

* `default-src 'self'` → все ресурсы должны быть загружены с того же домена, с которого загружена страница.
* `img-src 'self' example.com` → позволяет загружать изображения с того же домена и с example.com.
* `script-src 'self' apis.example.com` → разрешает выполнение скриптов с домена-источника и с apis.example.com.
