Phenquestions
Что такое CORS
CORS, также известный как совместное использование ресурсов из разных источников, - это метод, используемый в современных веб-браузерах, который контролирует доступ к ресурсам, размещенным на веб-сервере. CORS использует дополнительные заголовки, такие как origin, access-control-origin и многие другие, чтобы определить, есть ли у запрошенного ресурса разрешение на отправку в браузер. Основная цель CORS - предотвратить доступ веб-приложения, запущенного в веб-браузере, к ресурсам, размещенным в другом источнике, когда нет разрешения, что означает, что веб-приложение не может загружать ресурсы, такие как изображения, скрипты, CSS, например любой контент и т. д. когда они не размещены в одном и том же источнике (обычно все должны находиться в одном домене), что и веб-приложение, если сервер не настроен на такое поведение. Имея эту реализацию в веб-браузере, пользователи могут защитить свои данные от неавторизованных сторон. Хакер может тайно изменить веб-страницу, находясь в середине соединения, чтобы нарушить работу пользователя или получить доступ к ценным данным. Однако у CORS есть и преимущества, например, он позволяет разработчикам загружать ресурсы из другого источника из-за экономической эффективности или просто удобства. В этом случае они должны изменить свой веб-сервер, чтобы разрешить такие запросы. В этой статье показано, как легко сделать это на веб-сервере 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 или любой другой платформе.
место расположения \if ($ request_method = 'OPTIONS')
add_header 'Access-Control-Allow-Origin' 'https: // localhost;
add_header 'Доступ-Контроль-Разрешить-Методы "POST, OPTIONS';
add_header 'Access-Control-Max-Age' 1728000;
add_header 'Content-Type "текст / простой; charset = utf-8';
возврат 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.com, то URL-адрес github следует использовать в качестве значения директивы Access-control-allow-origin в myOwnServer.com, затем всякий раз, когда веб-приложение, размещенное в github, отправляет запросы на myOwnServer.com, чтобы загрузить файл изображения, всем этим запрашиваемым предоставляется разрешение. Заголовок 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 весьма полезен, и его следует использовать осторожно.
