В чем разница между CORS и CSP?

Разница между CORS и CSP

CORS (Cross-Origin Resource Sharing) и CSP (Content Security Policy) — это два разных механизма безопасности браузера, решающие разные задачи.

CORS: Управление кросс-доменными запросами

CORS контролирует, какие кросс-доменные HTTP-запросы допустимы. Это механизм на уровне браузера, который спрашивает у сервера: «Разрешен ли мне обращаться к твоим ресурсам с другого домена?»

Когда браузер делает запрос с одного домена на другой, он:

1. Отправляет preflight-запрос (OPTIONS)
2. Сервер отвечает с CORS-заголовками
3. Если разрешено — браузер отправляет реальный запрос

// Клиент отправляет запрос с домена A на домен B
fetch("https://api.another-domain.com/data")
  .then(res => res.json())
  .catch(err => console.error("CORS error:", err));

Сервер должен вернуть нужные заголовки:

// Ответ сервера B
Access-Control-Allow-Origin: https://domain-a.com
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Allow-Credentials: true

CSP: Защита от XSS-атак

CSP — это политика безопасности контента. Она контролирует, какие источники контента (скрипты, стили, изображения) браузер может загружать и выполнять.

CSP защищает от:

• XSS-атак (инъекция вредоносного кода)
• Перехвата данных
• Кликджекинга

// Ответ сервера со своего домена
Content-Security-Policy: default-src self; script-src self trusted-cdn.com; style-src self unsafe-inline

Это означает:

• По умолчанию загружай ресурсы только со своего домена (self)
• Скрипты можно загружать со своего домена и с trusted-cdn.com
• Стили можно инлайнить и загружать со своего домена

Ключевые различия

Практический пример

// Фронтенд на https://myapp.com
// Отправляем запрос на https://api.myapp.com

fetch("https://api.myapp.com/users", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({ name: "John" })
})
.then(res => res.json())
.catch(err => console.error("Error:", err));

CORS проверка: Браузер пропустит запрос, если api.myapp.com вернет Access-Control-Allow-Origin: https://myapp.com

CSP проверка: Браузер не позволит загрузить вредоносный скрипт, если он не с разрешённого домена (например, если на странице попадёт <script src="https://malicious.com/hack.js"></script>)

Когда они работают вместе

// Server response headers
Access-Control-Allow-Origin: https://trusted-client.com
Content-Security-Policy: default-src self; script-src self https://trusted-cdn.com

CORS разрешает запрос с другого домена, а CSP гарантирует, что скрипты в ответе могут быть только с доверенных источников.

Вывод

• CORS нужен, когда фронтенд и бэкенд на разных доменах
• CSP нужен всегда, чтобы защитить от XSS-атак
• Они решают разные задачи и не конкурируют между собой