Что такое CORS (совместное использование ресурсов между источниками)?

Расширьте свой набор навыков внешнего интерфейса

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

Станьте Front End разработчиком

Что такое CORS?

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

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

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

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

Что такое источник?

Происхождение относится к 3 частям: протоколу, хосту и номеру порта. Протокол относится к протоколу прикладного уровня, часто HTTP. Хост — это основной домен сайта, к которому относятся все страницы, например, Educative.io. Наконец, номер порта — это конечная точка связи для запроса, по умолчанию это порт 80..

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

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

Живой пример CORS

Наиболее распространенным примером CORS является реклама на неродных сайтах.

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

Вместо этого все объявления хранятся на серверах рекламной компании. Рекламная компания предоставила доступ для просмотра к YouTube, чтобы веб-страница YouTube могла воспроизводить сохраненное рекламное видео Android.

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

Какие ресурсы могут запрашивать CORS?

Сайты используют запросы CORS для загрузки:

• Fetch-запросы или HTTP-запросы, такие как XMLHTTPRequests
• Веб-шрифты и шрифты TrueType доступны только для межсайтовой загрузки
• Текстуры Web GL
• Изображения и видео
• CSS-формы

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

Нравится статья? Прокрутите вниз, чтобы подписаться на нашу бесплатную рассылку новостей раз в два месяца.

Как работает CORS?

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

Все запросы от этих источников удовлетворяются, и им разрешается использовать ограниченные ресурсы. Заголовок, который нужно добавить в список приемлемых источников: Access-Control-Allow-Origin .

Есть много разных типов заголовков ответов, которые обеспечивают разные уровни доступа. Вот еще несколько дополнительных примеров заголовков CORS HTTP:

• Access-Control-Allow-Credentials
• Access-Control-Allow-Headers
• Access-Control-Allow-Methods
• Access-Control-Expose-Headers
• Access-Control-Max-Age
• Access-Control-Request-Headers
• Access-Control-Request-Method
• Origin

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

Большинство серверов позволяют GET запросы из любого источника, но будут блокировать другие типы запросов.

Сервер либо отправит обратно значение подстановочного знака, * , что означает неограниченный доступ к запрошенным данным, либо сервер проверит список разрешенных источников.

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

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

Типы запросов CORS

Указанный выше запрос GET — это простейшая форма запроса, разрешающая только просмотр. Существуют различные типы запросов, которые допускают более сложное поведение, например, запросы на изменение или удаление данных из разных источников.

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

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

Большинство запросов делятся на две основные категории:

• Простые запросы : эти запросы не запускают предпечатную проверку и используют только «безопасные» заголовки CORS.
• Предварительные запросы : эти запросы отправляют «предпечатное» сообщение, в котором излагается, что запрашивающая сторона хотела бы сделать перед исходным запросом. Запрошенный сервер просматривает это предполетное сообщение, чтобы убедиться, что запрос безопасен, чтобы разрешить.

Простые запросы

Простые запросы не требуют предварительной проверки и используют один из трех методов: GET , POST и HEAD . Эти запросы поступают до того, как был изобретен CORS, и поэтому им разрешено пропустить предварительную проверку CORS.

GET

Запрос GET просит просмотреть представление общего файла данных с определенного URL-адреса. Его также можно использовать для запуска загрузки файлов.

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

  GET/index.html  

HEAD

Запрос HEAD предварительно просматривает заголовки, которые будут отправлены с запросом GET . Он используется для выборки того, какой контент существует по определенному URL-адресу без доступа к нему.

Например, вы можете HEAD загрузить URL-адрес для получения его Заголовок Content-Length . Это позволит вам узнать размер загружаемого файла, прежде чем вы согласитесь загрузить его.

  HEAD/index.html  

POST

Запрос POST просит передать данные на запрошенный сервер, что может привести к смене сервера. Если запрос POST запускается несколько раз, он может иметь неожиданное поведение.

Примером этого является добавление комментария в ветку форума.

Браузер отправляет запрос на добавление вашего входного комментария на сервер. После принятия сервер форума берет недавно полученные данные (комментарий) и сохраняет их для просмотра другими.

  POST/test HTTP/1.1Host: foo.example.comContent  -Type: application/x-www-form-urlencodedContent-Length: 27field1 = value1 & field2 = value2  

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

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

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

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

Вам не нужно вручную вызывать метод OPTIONS . Запросы предварительной проверки автоматически отправляются из браузера, когда вы пытаетесь запросить метод, помеченный как «для предварительной проверки».

Наиболее распространенным методом предварительной проверки является DELETE , который удаляет выбранный файл или актив с сервера.

Предварительный запрос включает источник запроса и желаемый метод, указанный с помощью Access-Control-Request-Method . Сервер анализирует предварительный запрос, чтобы проверить, есть ли у этого источника доступ для выполнения такой метод.

Если да, сервер возвращает все методы, которые разрешено использовать источнику, и указывает, что вы можете отправить исходный запрос.

Если нет, то исходный запрос игнорируется.

Запрос Затем браузер может кэшировать это предварительное одобрение, пока оно действительно.

Вы можете увидеть дату истечения срока одобрения, проверив значение Access-Control-Max- Возраст .

Браузер запрашивающего может затем кешируйте это предполетное одобрение до тех пор, пока оно действительно. Вы можете увидеть дату истечения срока действия разрешения, проверив значение Access-Control-Max-Age.

Краткое руководство по внедрению CORS

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

Приложение Nodejs Express

  app.use (function (req, res, next) {res.header ("Access-Control-Allow-Origin", "YOUR-DOMAIN.TLD");//обновляем в соответствии с доменом  вы сделаете запрос из res.header ("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); next ();}); app.get ('/ ', function (req, res, next) {//Обработка получения для этого маршрута}); app.post ('/', function (req, res, next) {//Обработка публикации для этого маршрута});  

Установите пакет:

   $ pip install -U flask-cors  

Затем добавьте его в свое приложение Flask:

  # app. pyfrom flask import Flaskfrom flask_cors import CORSapp = Flask (__ name __) cors = CORS (app)  

Apache

Добавьте следующую строку внутри , , или Разделы конфигурации вашего сервера.

  Набор заголовков Access-Control-Allow-Origin "*"  

Чтобы изменения были применены правильно, запустите apachectl -t , затем перезагрузите Apache, используя sudo service apache2 reload .

Приложения Spring Boot в Kotlin

Следующий блок кода Kotlin включает CORS в приложениях Spring Boot.

  import org.springframework.http.HttpMethodimport org.springframework.http.HttpStatusimport org.springframework.stereotype.Componentimport org.springframework.web.server.  .springframework.web.server.WebFilterC  hainimport response.core.publisher.Mono@Componentclass CorsFilter: WebFilter {переопределить забавный фильтр (ctx: ServerWebExchange ?, цепочка: WebFilterChain?): Mono  {if (ctx! = null) {ctx.response.headers.add (  «Access-Control-Allow-Origin», «*») ctx.response.headers.add («Access-Control-Allow-Methods», «GET, PUT, POST, DELETE, OPTIONS») ctx.response.headers.  add ("Access-Control-Allow-Headers", "DNT, X-CustomHeader, Keep-Alive, User-Agent, X-Requested-With, If-Modified-Since, Cache-Control, Content-Type, Content-Range  , Range ") if (ctx.request.method == HttpMethod.OPTIONS) {ctx.response.headers.add (" Access-Control-Max-Age "," 1728000 ") ctx.response.statusCode = HttpStatus.NO_CONTENT return  Mono.empty ()} else {ctx.response.headers.add ("Access-Control-Expose-Headers", "DNT, X-CustomHeader, Keep-Alive, User-Agent, X-Requested-With, If-Modified  -Since, Cache-Control, Content-Type, Content-Range, Range ") цепочка возврата? .Filter (ctx)?: Mono.empty ()}} else {  цепочка возврата? .filter (ctx)?: Mono.empty ()}}}  

Nginx

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

  ## Широко открытая конфигурация CORS для nginx # location/{if ($ request_method = 'OPTIONS') {add_header 'Access-Control-Allow-Origin' '*'  ;  add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';  # # Пользовательские заголовки и заголовки в различных браузерах * должны * быть в порядке, но не # add_header 'Access-Control-Allow-Headers' DNT, User-Agent, X-Requested-With, If-Modified-Since, Cache-  Control, Content-Type, Range ';  # # Сообщите клиенту, что эта предполетная информация действительна в течение 20 дней # add_header 'Access-Control-Max-Age' 1728000;  add_header 'Content-Type' текст/простой;  charset = utf-8 ';  add_header 'Content-Length' 0;  возврат 204;  } если ($ request_method = 'POST') {add_header 'Access-Control-Allow-Origin' '*';  add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';  add_header 'Access-Control-Allow-Headers' DNT, User-Agent, X-Requested-With, If-Modified-Since, Cache-Control, Content-Type, Range ';  add_header 'Access-Control-Expose-Headers' Content-Length, Content-Range ';  } если ($ request_method = 'GET') {add_header 'Access-Control-Allow-Origin' '*';  add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';  add_header 'Access-Control-Allow-Headers' DNT, User-Agent, X-Requested-With, If-Modified-Since, Cache-Control, Content-Type, Range ';  add_header 'Access-Control-Expose-Headers' Content-Length, Content-Range ';  }}  

Чему научиться дальше

Поздравляем, вы сделали первые шаги к мастерству CORS. Этот мощный интерфейсный инструмент необходим для найма ведущими работодателями в области веб-разработки, такими как Google и Amazon.

Чтобы продолжить свое путешествие по CORS, следует изучить следующие темы:

• Запросить аутентификацию с учетными данными
• Запросы Ajax с CORS
• CORS в PHP
• Сторонние файлы cookie в CORS

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

Удачного обучения!

Продолжить изучение интерфейсного JavaScript

• Начало работы с React и TypeScript
• Введение в разработку полнофункционального JavaScript
• Что такое Node.js? Введение в среду выполнения JavaScript для новичков.