Политика CORS

Политика CORS — это механизм безопасности браузера, контролирующий доступ Веб-страниц к ресурсам на других доменах. Он разрешает или блокирует кросс-доменные запросы, защищая пользователей от несанкционированного доступа. В Веб-разработке этот стандарт определяет, может ли Скрипт с одного сайта обращаться к API другого. Механизм предотвращает вредоносные действия, сохраняя возможность легитимного обмена данными между сервисами.

Главное

  • Механизм действует на стороне клиента (браузера), проверяя заголовки ответа сервера.
  • Доступ определяется значением заголовка Origin, указывающего источник запроса.
  • Без правильной настройки сервера кросс-доменные вызовы API будут заблокированы.
  • Применяется ко всем типам сетевых запросов: fetch, XMLHttpRequest и WebSocket.
  • Ошибки возникают при разработке SPA и интеграции сторонних виджетов или аналитики.

Как работает Политика CORS

Политика CORS использует двухэтапный процесс для обеспечения безопасности соединения. При простых запросах Браузер отправляет HTTP-запрос вместе с заголовком Origin. Сервер отвечает заголовком Access-Control-Allow-Origin; если значения совпадают, данные передаются клиенту. Для сложных операций, таких как PUT или DELETE, применяется предварительный запрос (preflight). Браузер сначала отправляет метод OPTIONS, чтобы проверить разрешения сервера через заголовки Allow-Methods и Allow-Headers. Только после успешной проверки отправляется основной запрос. Это предотвращает выполнение потенциально опасных действий без явного согласия владельца ресурса.

Зачем нужен Политика CORS

Политика CORS нужна для защиты от межсайтовых подделок запросов (CSRF) и кражи данных. Она гарантирует, что только авторизованные домены могут получать конфиденциальную информацию через Браузер пользователя. Для интернет-маркетинга это критично при подключении платёжных шлюзов, CRM-систем и трекеров конверсий. Без этого механизма злоумышленники могли бы выполнять действия от имени пользователя на одном сайте, используя его куки на другом. Стандарт позволяет безопасно строить современные архитектуры, разделяя фронтенд и Бэкенд на разных серверах.

Какие бывают виды политики CORS

Политика CORS не имеет строгих «видов», но различают конфигурации по уровню доступа. Первый вариант — открытая настройка, когда заголовок установлен в *, разрешая запросы с любого источника. Второй вариант — ограниченная Конфигурация, где указывается конкретный Домен или белый Список. Третий вариант — Политика с учётными данными (credentials), которая требует точного совпадения Origin и запрещает использование символа звёздочки. Выбор зависит от чувствительности данных и уровня доверия к источникам трафика. Разработчики часто настраивают эти правила индивидуально для каждого маршрута API.

Где используется Политика CORS

Политика CORS используется в Веб-приложениях, загружающих данные с внешних источников: карты, виджеты соцсетей и платёжные системы. В маркетинге она применяется при настройке сквозной аналитики, когда Скрипт отправляет события на сторонний Сервер. Также механизм важен для CDN-сервисов, раздающих шрифты или изображения с других доменов. Ошибки видимы в консоли браузера как «blocked by CORS policy». Они решаются изменением серверных заголовков в Middleware фреймворков Express, Django или Spring, а не в коде клиента.

Пример: установка и чтение политики CORS

Настройка осуществляется на стороне сервера путём добавления необходимых HTTP-заголовков в ответ. Ниже приведён пример конфигурации для Node.js/Express, где разрешены запросы с конкретного домена с передачей Cookies.

JavaScript
const cors = require('cors');
const app = express();

// Настройка с указанием конкретного origin и credentials
app.use(cors({
  origin: 'https://marketing-site.com',
  credentials: true
}));

app.get('/api/data', (req, res) => {
  res.json({ status: 'ok' });
});

При тестировании локально используйте HTTP://localhost:3000 как origin, так как порты считаются разными доменами.

Часто задаваемые вопросы политики CORS

Часто задаваемые вопросы

Почему возникает Ошибка CORS?

Ошибка появляется, когда Браузер блокирует Ответ сервера из-за несоответствия заголовка Origin. Это происходит, если Сервер не вернул разрешающий заголовок Access-Control-Allow-Origin для текущего домена источника.

Можно ли отключить эту политику?

В продакшене отключать её нельзя — это создаст критическую уязвимость. Для локальной разработки можно использовать расширения браузера или запускать браузер с флагом отключения безопасности, но это небезопасно.

Работает ли CORS для серверных запросов?

Нет, механизм действует только в браузере. Запросы с сервера на сервер (например, через curl или backend-библиотеки) не подвержены ограничениям CORS, так как там нет контекста безопасности клиента.

Что такое preflight-запрос?

Это предварительный запрос методом OPTIONS, который браузер отправляет перед сложным запросом. Он нужен, чтобы узнать, разрешает ли сервер использование определённых методов и заголовков.

Как настроить CORS для нескольких доменов?

Нужно динамически проверять заголовок Origin входящего запроса и, если он есть в белом списке, возвращать его же в заголовке Access-Control-Allow-Origin. Использование символа * невозможно при включённых credentials.

Итоги

Политика CORS — это обязательный элемент безопасности современного веба, регулирующий обмен данными между различными доменами.

  • Механизм защищает браузер от несанкционированного доступа к данным других сайтов.
  • Настройка выполняется на сервере через специальные HTTP-заголовки ответа.
  • Существуют открытые, ограниченные и защищённые конфигурации доступа.
  • Ошибки возникают при неправильной интеграции фронтенда с внешними API.
  • Для передачи cookies требуется точное указание домена и флаг credentials.
  • Предварительные запросы (preflight) обеспечивают безопасность сложных операций.
  • Корректная настройка необходима для работы аналитики и сторонних виджетов.