Что такое CORS
CORS, также известный как совместное использование ресурсов из разных источников, – это метод, используемый в современных веб-браузерах, который контролирует доступ к ресурсам, размещенным на веб-сервере. CORS использует дополнительные заголовки, такие как origin, access-control-origin и многие другие, чтобы определить, есть ли у запрошенного ресурса разрешение на отправку в браузер. Основная цель CORS – предотвратить доступ веб-приложения, запущенного в веб-браузере, к ресурсам, размещенным в другом источнике, когда нет разрешения, что означает, что веб-приложение не может загружать ресурсы, такие как изображения, скрипты, CSS, например любой контент и т. д., если они не размещены в том же самом источнике (обычно все должны находиться в том же домене), что и веб-приложение, если только сервер не настроен на такое поведение. Имея эту реализацию в веб-браузере, пользователи могут защитить свои данные от неавторизованных сторон. Хакер может тайно изменить веб-страницу, находясь в середине соединения, чтобы нарушить работу пользователя или получить доступ к ценным данным. Однако у CORS есть и преимущества, например, он позволяет разработчикам загружать ресурсы из другого источника из-за экономической эффективности или просто удобства. В этом случае они должны изменить свой веб-сервер, чтобы разрешить такие запросы. В этой статье показано, как легко сделать это на веб-сервере Nginx. В этом случае они должны изменить свой веб-сервер, чтобы разрешить такие запросы. В этой статье показано, как легко это сделать на веб-сервере Nginx. В этом случае они должны изменить свой веб-сервер, чтобы разрешить такие запросы. В этой статье показано, как легко сделать это на веб-сервере Nginx.
Что вызывает запрос CORS
Не все запросы вызывают запрос CORS, поскольку обычно ресурсы размещаются в том же источнике, что и веб-приложение. Если он другой, то срабатывает CORS. CORS имеет два типа запросов: простой запрос и предварительный запрос CORS.
Простой запрос работает как обычный запрос, веб-браузер отправляет запрос на сервер для загрузки определенного ресурса, когда пользователь его инициировал, затем веб-сервер проверяет источник запроса, сравнивает его с правилами на веб-сервере, если он совпадает, ресурс предоставляется. Этот тип запроса использует заголовки OIRIGN и ACCESS-CONTROL-ALLOW-ORIGIN, чтобы определить, следует ли предоставлять ресурс или нет. Простой запрос запускается только в том случае, если используются такие методы запроса, как GET, HEAD, POST, и заголовки, такие как Accept, Accept-Language, Content-Language, Content-Type, DPR, Downlink, Save-Data, Viewport-Width, Width. Даже в этом случае не все типы контента вызывают простой запрос. Здесь только типы кодирования формы вызывают простой запрос.
Тип предварительного запроса несколько отличается, поскольку в первом раунде нет прямого доступа к ресурсам. Когда вышеупомянутые условия каким-либо образом изменяются, либо с использованием другого заголовка запроса, либо другого типа контента, запускается предварительный запрос. В предварительных запросах веб-браузер сначала проверяет, может ли он получить доступ к ресурсу, взаимодействуя с веб-браузером, а затем, когда веб-браузер отвечает положительным (HTTP 200) ответом, он отправляет еще один запрос на загрузку ресурса. Он использует метод запроса HTTP OPTION для инициирования первого запроса, затем он использует типы запросов GET, POST для загрузки ресурсов.
Как настроить Nginx для поддержки запросов CORS
В этом разделе показано, как настроить веб-сервер nginx, чтобы разрешить совместное использование ресурсов из разных источников. Это можно сделать только в том случае, если у разработчика есть доступ к веб-серверу, так как это предполагает изменение файла конфигурации Nginx.
Используйте следующий простой фрагмент кода, чтобы разрешить запросы CORS. Его нужно скопировать в файл по умолчанию службы nginx в Ubuntu или любой другой платформе.
location \ {
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Allow-Origin' 'https://localhost;
add_header 'Access-Control-Allow-Methods' 'POST, OPTIONS';
add_header 'Access-Control-Max-Age' 1728000;
add_header 'Content-Type' 'text/plain; charset=utf-8';
return 204;
}
if ($request_method = 'POST') {
add_header 'Access-Control-Allow-Origin' 'https://localhost;
add_header 'Access-Control-Allow-Methods' 'POST';
}
}
Базовый фрагмент кода выглядит так, как указано выше. Он содержит такие директивы, как request_method, add_header, для определения типа запроса и установки заголовка ответа для чтения браузером соответственно. Заголовок Access-control-allow-origin определяет, к какому источнику имеет доступ ресурс, например, если веб-приложение, размещенное в github, хочет получить доступ к изображению, размещенному на myOwnServer.ru, тогда URL-адрес github должен использоваться в качестве значения Директива Access-control-allow-origin в myOwnServer.ru, затем всякий раз, когда веб-приложение, размещенное в github, отправляет запросы на myOwnServer.ru для загрузки файла изображения, всем этим запрашиваемым предоставляется разрешение. Заголовок Access-control-allow-method определяет, какие типы запросов поддерживает веб-приложение, отправляющее запросы, тогда остальные заголовки предназначены для максимального возраста для кэширования запросов,
Как описано выше, как только запрос OPTION был завершен, браузер отправляет другой запрос на загрузку ресурсов, если первый запрос был успешным, его заголовки устанавливаются в первом request_method, если скобки.
Помимо вышеупомянутых директив, в Nginx есть некоторые другие важные директивы, которые можно использовать в запросах CORS. Одна из наиболее важных директив – access-control-allow-headers, она устанавливает заголовок ответа с разрешенными именами заголовков для проверки браузером. Веб-приложение может иметь свои собственные заголовки для различных целей, и если такие заголовки присутствуют в последующих запросах после начального запроса OPTIONS, то все эти заголовки должны быть разрешены веб-сервером до того, как запрашиваемый ресурс будет совместно использован.
Важно, чтобы этот фрагмент кода находился в нужном месте в файле по умолчанию Nginx, потому что Nginx выполняет разные блоки местоположения в зависимости от сопоставленного URL-адреса, если такой блок местоположения не содержит этот фрагмент кода, он вообще не выполняется, и поэтому важно использовать это во всех блоках локации на всякий случай. Некоторые из важных блоков местоположения – это блоки изображений, PHP (~ \.php$), CSS и т. д.
После сохранения вышеупомянутого фрагмента кода сохраните файл Nginx и перезагрузите службу Nginx, чтобы изменения вступили в силу.
Вывод
CORS известен как совместное использование ресурсов между источниками и представляет собой метод управления доступом к ресурсам. Эти ресурсы могут быть любым файлом от изображения до файла javascript. Основная цель CORS – повысить безопасность веб-приложений для предотвращения атак типа «человек посередине». Однако CORS тоже может иметь преимущества. В этом случае необходимо включить CORS, поскольку по умолчанию это запрещено. Базовый тип запроса CORS – это простой тип запроса, он использует только директивы ORIGIN и ACCESS-CONTROL-ALLOW-ORIGIN, и с этой помощью Nginx может предоставить разрешение веб-браузеру на доступ к запрошенному ресурсу в зависимости от источника. В любом случае CORS весьма полезен, и его следует использовать осторожно.