Все, что вы хотели знать о CORS

Введение

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

Эта статья предоставит упрощенный Объяснение CORS использует реальную аналогию. Мы пойдем в детали того, что вам нужно для понимания и устранения неполадок в вопросе CORS. Статья также описывает Как добавить Поддержка CORS в ASP.NET Core Web API, чтобы позволить нескольким клиентам в разных доменах взаимодействовать с API. Позже мы продемонстрируем взаимодействие между статической веб-страницей доступа к API на другом происхождении.

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

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

Важность CORS & Как микросервисы формируют современное развитие приложений?

В современном разработке программного обеспечения, с появлением микросервисов и подъемом распределенных систем, больше компонентов, чем когда-либо прежде, разрабатываются в изоляции. Приложения монолита архитектуруют, чтобы построить меньшие более управляемые компоненты в виде ASP.NET Core Web API. Микровериты могут быть развернуты и масштабированы независимо от интерфейса. Кроме того, поскольку интерфейс должен взаимодействовать с API, это ответственность API, чтобы гарантировать, что он позволяет клиентам взаимодействовать и отправлять соответствующие данные клиентам для обеспечения безопасной связи. CORS образует основную спецификацию, которая позволяет API принимать несколько входящих запросов с разных веб-сайтов.

Что такое CORS?

Аббревиатура CORS – это обмен ресурсами Cross Origin.

Кредит: Графические изображения

CORS – это механизм безопасности, используемый браузерами, такими как (Firefox, Chrome, IE и т. Д.), Чтобы браузеры отказаться от звонков на другой веб-сайт. Запрос на ресурс (например, изображение или шрифт) за пределами происхождения известно как запрос с перекрестным происхождением. CORS (обмен ресурсами по перекрестным происхождениям) – это спецификация, которая управляет запросами по перекрестным происхождениям.

Более наилучшее объяснение – это похоже на охранник, который мешает злонамеренному человеку входить в ваши помещения, пока они не обладают определенной авторизацией, и, следовательно, сохраняет вашу семью в безопасности.

Аналогия квартирного сообщества

Давайте возьмем аналогию, чтобы понять CORS. Представь, вы живете в Безопасный К жилищному квартиру сообщество и иметь доступ ко всем объектам и прекрасным временем 😄. Доступ к сообществу ограничено его арендаторами только для обеспечения безопасности. Если вы являетесь арендатором, то вы можете прийти/выходить в любое время. Для всех остальных разрешение запрещено.

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

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

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

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

Что такое происхождение?

Давайте посмотрим, что именно происходит происхождение. Происхождение состоит из следующих трех частей:

1. Протокол/схема : (Http/https)
2. Хозяин : Сервер/доменное имя
3. Номер порта : Числовое значение

Поэтому URL, как https://galodha.com представляет происхождение.

Пример же происхождения

Давайте рассмотрим следующие два URL, которые принадлежат к тому же происхождению, https://galodha.com Отказ

https://galodha.com/image1.jpg https://galodha.com/image2.jpg.

Выше URL есть тот же протокол (https), Хозяин (Galodha.com), а Номер порта (80 по умолчанию для HTTP Communication).

Пример разного происхождения

Ниже приведены пример истоков, которые имеют разное происхождение, чем https://galodha.com . Один из URL-адресов имеет другой протокол, а другой относится к другому хосту.

http://galodha.com/image1.jpg (Другой протокол) https://github.com/image1.jpg (Другой хост)

Теперь, после получения понимания происхождения, давайте посмотрим на то, что именно такая политика одинаковы происхождения.

Что подразумевается под политикой происхождения?

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

Пример: то же самое начало Позволяя общаться

Следующее изображение показывает связь между клиентом и браузером в одном происхождении. Сайт просмотра клиента https://galodha.com может сделать звонки на https://galodha.com/projects API, чтобы получить данные. Происхождение ( https://galodha.com ) Это же для клиента, а сервер и, следовательно, связь разрешена.

Обмен ресурсами

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

Пример: перекрестное происхождение (разное происхождение) запрещается связь.

Следующее изображение показывает связь между 2 различными происхождениями. Клиентский браузер просматривает веб-сайт по происхождению, https://galodha.com и сделать AJAX запросы на https://anotherwebsite.com/api/users который находится в происхождении ` https://anotherwebsite.com Отказ Поскольку клиент и сервер находятся в другом происхождении, сообщение запрещено.

Почему браузеры принудили политику одинакового происхождения?

Такая же политика происхождения была применена, чтобы предотвратить такие атаки безопасности, как CSRF (кросс-запрос подделы).

Пример

Если вы просматриваете веб-сайт банка и на другой вкладке, при просмотре вашего любимого видео у вас есть реклама, «Вы выиграли в лотерею» Вы соблюдаете объявление и щелкните рекламу, он открывает другое окно. Реклама является вредоносным веб-сайтом и имеет код AJAX, чтобы отправить деньги со своей учетной записи на учетную запись владельцев злонамеренного сайта.

$ .POST (‘ https://yourfavouritebank.com/transfer ‘, {to: ‘maliryoseer’, сумма: ‘10000000’}),

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

Для получения дополнительной информации вы можете прочитать здесь

CORS позволяет обходить такую же политику происхождения, не укомплектовавшись по безопасности.

Давайте сломаем CORS на мелкие кусочки, чтобы понять это лучше.

Перекрестное происхождение

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

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

Разное происхождение

Ресурс

Ресурс похож на изображение, шрифт, видео, данные и т. Д. Когда мы делаем вызов AJAX, мы запрашиваем для некоторых данных, которые являются ресурсом в соответствии с терминологией.

В нашей аналогии бассейн был ресурсом. Это ценное владение, которое другие люди заинтересованы в доступе.

Общий вопрос

CORS определяет различные заголовки, которые позволяют браузеру и серверу сообщать о том, какие запросы (и не являются) разрешены и позволяют совместно использовать ресурсы.

В нашей аналогии бассейн должен был быть разделен.

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

Обмен ресурсами

Как CORS позволяет обходить политику одинакового происхождения?

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

В нашей аналогии это было Уникальный проход Что позволяет своим друзьям информировать о безопасности, которую у вас есть разрешение войти в квартиру.

Клиент отправляет запросы на сервер, а сервер отвечает, предоставляя информацию о разрешенных ресурсах и о том, как доступны ресурсы. Сервер отправляет информацию в заголовки ответа. Каждый заголовк ответа означает атрибут для совместного использования ресурсов. Для е.Г. The Header Access-Control-Tools-Methods Указывает список методов HTTP (Get, Post, Delete и т. Д.), которые разрешены сервером.

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

• Сервер: https://localhost: 5001
• Клиент: https://localhost:44343

Из-за такой политики происхождения запрос AJAX заблокирован к другому происхождению. Однако мы позволили CORS на API на https://localhost: 5001 Добавляя заголовки ответа Access-Control-Tower-Record-Origin: https://localhost: 44343 , что позволяет API на https://localhost:5001 получить любой запрос от происхождения https://localhost:44343

Различные части в действии в CORS

Большинство заголовков префиксированы с помощью «доступа-контроля». Немногие примеры показаны ниже.

• Доступ-контроль-разрешение
• Доступ-контроль-разрешение-заголовки
• Доступ-контроль-разрешение-методы
• Доступ-контроль-разрешение-учетные данные

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

Доступ-контроль-разрешение

Заголовок Access-Control-Tower-Procent-Origin-Origin позволяет серверам указывать список происхождений, с помощью которого сервер будет делиться ресурсами.

Ссылаясь на нашу аналогию, это в основном позволяет указывать список друзей, которые разрешены в вашей вечеринке в бассейне. Вам разрешено указать список имен, которые вы захотите разрешить вечеринку. Если имя вашего друга не в списке, им не будет разрешено войти внутрь.

Во время этапа разработки значение может быть установлено значение *, что означает, что сервер будет делиться запрошенными ресурсами с любым доменом в Интернете. Но, пожалуйста, воздержитесь от использования этой настройки за пределами местного развития.

Пример

Клиент браузера от происхождения, https://galodha.com , хочет отправить запрос на сервер https://api.github.com Из-за такой политики происхождения клиент не может отправить запрос на сервер. Однако, когда сервер отвечает с устройством доступа к заголовку ответа-элемента: https://galodha.com К клиенту браузеры клиента позволяют сделать запрос к отправке https://api.github Отказ

Заголовки CORS позволяют общаться среди различного происхождения

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

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

Почему браузер отправляет дополнительный запрос в виде запроса до полета? Разве это не накладки?

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

Запрос перед полетом был добавлен в спецификацию CORS, чтобы разрешить связь с Старый Серверы, которые не понимают CORS и Safeguard против потенциально опасных запросов, таких как удаление.

Следующий скриншот из инструментов Developer Chrome отображает запрос параметров до того, как выполнен фактический запрос. Это запрос до полета.

Просьба до полета в CORS

Пример: почему запрос перед полетом был добавлен?

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

Происхождение, как https://galodha.com используется сервером X для хостинга блогов на https://galodha.com/blogs Отказ Этот сервер X знает о той же политике происхождения и позволяет операции, как Удалить Сообщение в блоге из того же происхождения.

Теперь спецификация CORS запущена. Новый сервер Y настроен для управления проектами на URL https://galodha.com/projects Отказ Сервер Y поддерживает операции Get/Post/Delete на проектах на одном происхождении.

Проекты становятся популярными, а другие сайты заинтересованы в перечете проекты на своих сайтах. Итак, вам нужно будет разрешить операцию получить из происхождения https://galodha.com . Кроме того, есть вкладчики открытых источников, поэтому вам нужно также предложить операцию удаления из других веб-сайтов/происхождение. К счастью, спецификация CORS была запущена, и вы знаете, что, используя CORS Header-Control-Control-repute-Procente: https://anotherwebsite.com Мы можем разрешить запросы от другого веб-сайта/происхождения. Также, используя заголовок CORS, Access-Control-Management-методы: Get, Post, Delete, мы можем разрешить операции Get/Post/Delete с других веб-сайтов.

Пока что хорошо, все идет хорошо, и ваш сервер Y получил много трафика с других сайтов.

Далее, злонамеренный пользователь входит, и использует https://anotherwebsite.com и пытается выполнить Удалить Операция на URL https://galodha.com/blogs на сервере X. Происхождение https://galodha.com Уже разрешает запросы от других сайтов для сервера y на https://galodha.com/projects Отказ Обратите внимание, что та же политика происхождения считает Только Схема, имя хоста и номер порта, оно не учитывает полный путь URL. Итак, клиент может сделать запрос на обоих https://galodha.com/blogs. и https://galodha.com/projects Поскольку браузер считает, что оба относятся к тому же происхождению.

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

Должна ли это позволить удалить ресурс? Разве это не будет замечательно, если сервер X может сказать, что он не поддерживает CORS? Разве мы не можем сделать дополнительный запрос, чтобы проверить, если сервер поддерживает CORS?

Да, вы вдавливаете удачу, спецификация CORS определяет запрос прелета, который делает то же самое, что мы упоминали выше. Предварительный запрос делает дополнительный запрос, чтобы убедиться, что сервер понимает запрос или нет. Если сервер не понимает запрос, то клиент не сделает фактический запрос. Однако, если сервер понимает запрос, он вернет соответствующий ответ, упомянутый, что то, что он позволяет, а затем клиент может сделать фактический запрос.

Какие условия вызывают запрос прелета?

Запрос перед полетом не предназначен для всех запросов, но применимо только в определенных случаях. Ниже приведен список условий, которые регулируют, если предоставляется запрос перед полетом или нет.

• Когда фактический запрос – это любой метод HTTP, отличный от Get, Post или Head.
• Если тип содержимого почтового запроса является чем-то, кроме применения/X-www-формы-орленкадированных, мультипартатовых/форм-данных или текста/равнина.
• Кроме того, если запрос содержит любые пользовательские заголовки, то требуется предварительный запрос. Заголовки, такие как принимают, принимают язык, язык контента и т. Д. Не вызывает запрос на предварительную ставку.

Существуют определенные дополнительные условия, которые могут вызвать запрос предварительного полета. Для получения полного списка ссылка ссылка Отказ

Вывод

Мы получили лучшее понимание происхождения, что делает и происхождение (схема, хост и номер порта). Почему браузер принудил же политику происхождения и о том, как спецификация CORS позволяет взаимодействовать между различным происхождением. Мы посмотрели на различные заголовки CORS, которые необходимо отправить клиенту, чтобы позволить сообщению. Я надеюсь, что аналогия квартирного сообщества было полезно понять проблему безопасности и о том, как пропуск по безопасности помогает нам обойти его. Наконец, мы охватывали предварительные запросы, которые могут быть запутаны в первый раз, когда вы видите, что запрос выскочит в сетевой панели инструментов.

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

• Эта статья была первоначально опубликована здесь

использованная литература

• https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
• https://stackoverflow.com/questions/15381105/cors-what-is-the-motivation-behind-introducing-preflight-requests
• https://enable-cors.org/

Оригинал: “https://dev.to/abhinavgalodha/all-you-wanted-to-know-about-cors-2c4f”