Как CORS и CSP влияют друг на друга?

Введение

CORS (Cross-Origin Resource Sharing) и CSP (Content Security Policy) — это два ключевых механизма безопасности, реализованных в браузерах. Они решают разные задачи, но их взаимодействие может приводить к неожиданным проблемам, если не учитывать оба аспекта. CORS определяет, может ли веб-страница делать HTTP-запросы к другому домену, а CSP ограничивает, какие ресурсы (скрипты, стили, изображения) могут быть загружены и выполнены на странице.

Как CORS и CSP работают по отдельности

CORS работает на уровне HTTP-заголовков. Сервер указывает, какие источники имеют доступ к его ресурсам, с помощью заголовка Access-Control-Allow-Origin. Если заголовок отсутствует или не соответствует источнику страницы, браузер блокирует запрос. CSP, в свою очередь, задается через заголовок Content-Security-Policy и определяет белый список источников для различных типов контента (скрипты, стили, шрифты и т.д.).

Взаимодействие и возможные конфликты

Основное пересечение происходит при загрузке внешних ресурсов, таких как скрипты или стили. Например, если CSP разрешает загрузку скрипта с https://cdn.example.com, но сервер на этом домене не отправляет CORS-заголовок, разрешающий доступ с вашего сайта, браузер может заблокировать выполнение скрипта. Это особенно актуально для fetch или XMLHttpRequest, где CORS обязателен. Однако для тега <script> CORS не требуется по умолчанию, если скрипт не использует crossorigin атрибут. CSP может блокировать inline-скрипты, даже если CORS разрешает их загрузку.

Пример кода

// Серверный ответ с CORS и CSP
HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://my-site.com
Content-Security-Policy: default-src 'self'; script-src https://cdn.example.com

// Клиентский код
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data));
// Если CSP не разрешает 'https://api.example.com', запрос будет заблокирован, даже если CORS разрешает.

Вывод

При разработке веб-приложений важно настраивать CORS и CSP согласованно. CORS контролирует доступ к API, а CSP — загрузку ресурсов. Игнорирование одного из механизмов может привести к блокировке легитимных запросов или, наоборот, к уязвимостям. Рекомендуется тестировать оба заголовка вместе, особенно при использовании внешних скриптов или API.