CORS Введение для начинающих

Хотите знать, что такое CORS (Обмен ресурсами между источниками)?


В шпионских фильмах сотрудники службы безопасности имеют закодированный способ передачи информации между собой. Поскольку они в основном передают информацию, которая может быть использована против них, если она попадет в руки их врагов, они должны убедиться, что те, кто получает информацию, являются доверенными сторонами. То же самое относится и к тем, кто отправляет указанную информацию. Когда отправителю и получателю доверяют, достоверность и безопасность информации могут быть гарантированы.

https://pt.slideshare.net/atirekgupta/selenium-workshop-34820044

Точная копия этого сценария происходит в связи между браузерами и веб-серверами, и она называется политика того же происхождения.

Согласно MDN:

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

Что такое CORS?

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

Распределение ресурсов между источниками (CORS) – это механизм, который использует дополнительные заголовки HTTP, чтобы дать браузерам указание предоставить веб-приложению, работающему в одном источнике, доступ к выбранным ресурсам из другого источника..

Я говорил о происхождении не раз, и вам, наверное, интересно, что это значит. Источник определяется протоколом, доменом и портом URL. Если у вас есть API в источнике, таком как https://api.geekflare.com:3001, и ваш веб-интерфейс на https://geekflare.com, то источники, как говорят, различны. В этой ситуации вам потребуется CORS, чтобы иметь доступ к ресурсам на обоих концах.

Когда запросы отправляются на сервер, браузеры (клиент) и серверы отправляют запросы и ответы, включаются заголовки HTTP. Среди этих заголовков добавлены дополнительные заголовки, чтобы браузер не блокировал связь.

Почему браузер блокирует связь?

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

Заголовки CORS

Один из безопасных заголовков, который может быть заголовком ответа или запроса.

Заголовки ответа

Это заголовки, которые сервер отправляет обратно в ответе..

  • Access-Control-Allow-Origin:: используется для указания источника, которому разрешен доступ к ресурсу на сервере. Можно указать, что разрешены только запросы от определенного источника – Access-Control-Allow-Origin: https://geekflare.com или что источник не имеет значения – Access-Control-Allow-Origin: *.
  • Access-Control-Expose-Headers:: Как видно из названия, здесь перечислены заголовки, к которым браузер имеет доступ.
  • Access-Control-Max-Age:: указывает на продолжительность, в течение которой ответ на запрос предполета может быть кэширован.
  • Access-Control-Allow-Credentials:: это указывает, что браузер может использовать ответ, когда первоначальный запрос был сделан с учетными данными.
  • Access-Control-Allow-Methods :: Указывает метод, который разрешен при попытке доступа к ресурсу..
  • Access-Control-Allow-Headers:: это указывает, что заголовки HTTP могут использоваться в запросе.

Вот пример того, как будет выглядеть ответ

HTTP / 1.1 204 Нет содержимого
Access-Control-Allow-Origin: *
Методы контроля доступа-разрешения: GET, HEAD, PUT, PATCH, POST, DELETE
Вары: Access-Control-Request-Headers
Access-Control-Allow-Headers: Content-Type, Accept
Длина контента: 0
Дата: сб, 16 ноября 2019 11:41:08 GMT + 1
Подключение: keep-alive

Заголовки запроса

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

  • Origin:: указывает на источник запроса клиента. При работе с веб-интерфейсом и внутренним интерфейсом, как указано выше, это будет хост вашего приложения веб-интерфейса..
  • Access-Control-Request-Method:: используется в предварительном запросе для указания метода HTTP, который будет использоваться для выполнения запроса..
  • Access-Control-Request-Headers:: используется в предварительном запросе для указания заголовков HTTP, которые будут использоваться для выполнения запроса..

Вот пример того, как будет выглядеть запрос

curl -i -X ​​ОПЦИИ localhost: 3001 / api \
-H ‘Access-Control-Request-Method: GET’ \
-H ‘Access-Control-Request-Headers: Content-Type, Accept’ \
-H ‘Происхождение: http: // localhost: 3000’

Предварительные запросы

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

После упоминания предварительных запросов здесь и там, что это может означать?

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

Когда запрос не является предварительным запросом, он называется простой запрос.

Внедрение CORS

В основном вы захотите настроить вещи в бэкэнде вашего приложения. Реализация зависит от используемой вами структуры. В этом уроке мы рассмотрим, как это сделать в NodeJS и Rails..

Рельсы

Я рекомендую вам использовать Реечный CORS драгоценный камень. Затем вам нужно добавить это в ваш файл config / application.rb.

config.middleware.insert_before 0, Rack :: Cors do
разрешить сделать
происхождение ‘*’
ресурс ‘*’,
заголовки: любой,
expose:% i (клиент uid типа токена истечения срока действия токена доступа),
Методы:% i (получить опцию пут патч, удалить опции),
учетные данные: правда
конец
конец

NodeJS

В Node.js это будет выглядеть так.

app.all (‘*’, (req, res, next) => {
res.header («Access-Control-Allow-Origin», «*»);
res.header («Access-Control-Allow-Methods», «PUT, GET, POST, DELETE, PATCH, OPTIONS HEAD»);
res.header («Access-Control-Allow-Headers», «*»);
res.header («Access-Control-Allow-Credentials», true);
следующий();
});

Во фрагменте кода мы настраиваем источник, методы, заголовки и учетные данные, которым должен быть разрешен доступ к ресурсам, доступным на нашем сервере. Вы также можете оформить заказ Sqreen который предоставляет модуль заголовков безопасности для интеграции с приложениями Ruby, PHP, Python, Java, Go, Node.JS. А чтобы реализовать в Apache или Nginx, обратитесь к этому руководству.

Вывод

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map