Cross-Origin Resource Sharing (CORS), или механизм разделения ресурсов между разными источниками, является фундаментальным аспектом безопасности веб-приложений. Изначально предложенный браузерами для предотвращения атак на основе междоменных запросов, CORS теперь стал неотъемлемой частью веб-разработки.

Понятие Origin и междоменные запросы

  • Origin в веб-мире

Изначально определенный как «origin» в спецификации CORS, это понятие включает протокол, домен и порт. Например, «https://example.com» представляет собой полное происхождение.

  • Междоменные запросы и проблемы безопасности

Когда веб-страница и ресурс (например, скрипт, изображение или данные API) находятся на разных источниках, и браузер пытается выполнить запрос между ними, возникает проблема безопасности. Браузеры по умолчанию блокируют такие запросы из соображений безопасности.

Механизм CORS

  • Разрешение CORS: заголовки и ответы

Механизм CORS предлагает способы разрешения междоменных запросов. Основной механизм — использование HTTP-заголовков, таких как `Access-Control-Allow-Origin`, который указывает, каким источникам разрешено получать ресурс.

«`http

Access-Control-Allow-Origin: https://trusted-source.com

«`

Если источник запроса совпадает с разрешенным источником, браузер разрешает запрос. В противном случае, запрос блокируется.

  • Дополнительные заголовки для контроля

Дополнительные заголовки, такие как `Access-Control-Allow-Methods` и `Access-Control-Allow-Headers`, позволяют серверу уточнять допустимые методы запросов и разрешенные заголовки.

«`http

Access-Control-Allow-Methods: GET, POST, OPTIONS

Access-Control-Allow-Headers: Content-Type, Authorization

«`

Пример использования в реальном проекте

Настройка сервера:

Допустим, у вас есть веб-приложение на «https://app.com», и вы хотите использовать API на «https://api.com». На сервере API добавьте следующие заголовки:

«`http

Access-Control-Allow-Origin: https://app.com

Access-Control-Allow-Methods: GET, POST, OPTIONS

Access-Control-Allow-Headers: Content-Type, Authorization

«`

Клиентский код:

На стороне клиента, в коде веб-страницы, вы можете отправить запрос:

`«javascript

fetch(‘https://api.com/data’)

.then(response => response.json())

.then(data => console.log(data))

.catch(error => console.error(‘Error:’, error));

«`

Преимущества

  • Безопасность

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

  • Гибкость

Спецификация предоставляет множество параметров и настроек, которые позволяют тонко настраивать политики безопасности для конкретных потребностей проекта.

Заключение

CORS существенно улучшает безопасность веб-приложений, обеспечивая эффективное управление ресурсами между различными источниками. Его правильная настройка позволяет разработчикам безопасно использовать данные и сервисы из разных источников, обогащая функциональность веб-приложений.