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

Современные веб-страницы используют больше внешних скриптов и ресурсов, чем когда-либо прежде. По умолчанию JavaScript следует политике одного и того же происхождения и может вызывать только URL-адреса в том же домене, что и запущенный скрипт. Итак, как мы можем заставить наши страницы на JavaScript использовать внешние скрипты?

CORS — это ответ.

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

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

Что такое CORS?

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

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

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

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

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

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

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

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

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

Самый распространенный пример CORS — это реклама на неродных сайтах.

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

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

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

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

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

• Запросы на получение или 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

Когда веб-браузер хочет получить доступ к сайту, он отправляет серверу сайта GETзапрос CORS. Если разрешено, 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.1
Host: foo.example.com
Content-Type: application/x-www-form-urlencoded
Content-Length: 27
field1=value1&field2=value2

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

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

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

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

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

Самый распространенный метод DELETEс предварительным запуском — это удаление выбранного файла или ресурса с сервера.

Фоновый процесс предполетного запроса

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

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

В противном случае исходный запрос игнорируется.

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

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

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

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

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

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

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "YOUR-DOMAIN.TLD"); // update to match the domain you will make the request from
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});
app.get('/', function(req, res, next) {
  // Handle the get for this route
});
app.post('/', function(req, res, next) {
 // Handle the post for this route
});

Flask

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

$ pip install -U flask-cors

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

# app.py
from flask import Flask
from flask_cors import CORS
app = Flask(__name__)
cors = CORS(app)

Apache

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

Header set Access-Control-Allow-Origin "*"

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

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

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

import org.springframework.http.HttpMethod
import org.springframework.http.HttpStatus
import org.springframework.stereotype.Component
import org.springframework.web.server.ServerWebExchange
import org.springframework.web.server.WebFilter
import org.springframework.web.server.WebFilterChain
import reactor.core.publisher.Mono
@Component
class CorsFilter : WebFilter {
    override fun filter(ctx: ServerWebExchange?, chain: WebFilterChain?): Mono<Void> {
        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")
                return chain?.filter(ctx) ?: Mono.empty()
            }
        } else {
            return chain?.filter(ctx) ?: Mono.empty()
        }
    }
}

Nginx

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

#
# Wide-open CORS config for nginx
#
location / {
     if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        #
        # Custom headers and headers various browsers *should* be OK with but aren't
        #
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
        #
        # Tell the client that this pre-flight info is valid for 20 days
        #
        add_header 'Access-Control-Max-Age' 1728000;
        add_header 'Content-Type' 'text/plain; charset=utf-8';
        add_header 'Content-Length' 0;
        return 204;
     }
     if ($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';
     }
     if ($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';
     }
}