Включить совместное использование ресурсов между источниками

Опубликовано: 2016-11-07

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

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

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

Почему CORS важен?

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

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

Включить общий доступ к ресурсам между источниками —

1. CORS на Apache

Чтобы добавить авторизацию CORS в заголовок с помощью Apache, просто добавьте следующую строку в разделы <Directory> , <Location> <Files> или <VirtualHost> конфигурации вашего сервера (обычно расположенные в файлах *.conf, таких как httpd.conf или apache.conf) или в файле .htaccess :

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

Чтобы убедиться, что ваши изменения верны, настоятельно рекомендуется использовать

 апачектл -т

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

 перезагрузка службы sudo apache2

или

 apachectl -k изящный

Изменение заголовков требует использования mod_headers. Mod_headers включен по умолчанию в Apache, однако вы можете убедиться, что он включен, запустив

 заголовки a2enmod

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

2. CORS в App Engine

Для приложений на основе Python в Google App Engine можно использовать метод self.response.headers.add_header() , например:

 класс CORSEnabledHandler (webapp.RequestHandler):
  деф получить(я):
    self.response.headers.add_header("Access-Control-Allow-Origin", "*")
    self.response.headers['Content-Type'] = 'текст/csv'
    self.response.out.write(self.dump_csv())

Для приложений на основе Java используйте resp.addHeader() :

 public void doGet (запрос HttpServletRequest, ответ HttpServletResponse) {
  resp.addHeader("Access-Control-Allow-Origin", "*");
  resp.addHeader("Тип контента", "текст/csv");
  resp.getWriter().append(csvString);
}

А для приложений на основе Go используйте w.Header().Add() :

 func doGet(w http.ResponseWriter, r *http.Request) {
  w.Header().Add("Access-Control-Allow-Origin", "*")
  w.Header().Добавить("Тип контента", "текст/csv")
  fmt.Fprintf(w, csvData)
}

3. КОРС на ASP.NET

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

 Response.AppendHeader("Access-Control-Allow-Origin", "*");

Веб-API ASP.NET

Веб-API ASP.NET 2 поддерживает CORS.

Чтобы включить поддержку CORS, добавьте в проект пакеты Microsoft.AspNet.WebApi.Cors NuGet.

Добавьте этот код в свою конфигурацию:

 public static void Register (конфигурация HttpConfiguration)
{
    // Новый код
    config.EnableCors();
}

Чтобы включить запросы между источниками, добавьте атрибут [EnableCors] в свой контроллер или метод контроллера веб-API:

 [EnableCors (происхождение: "http://example.com", заголовки: "*", методы: "*")]
открытый класс TestController: ApiController
{
    // Методы контроллера не показаны...
}

Включение глобально

Описанный выше метод также можно использовать для включения CORS через API без аннотирования каждого контроллера:

 public static void Register (конфигурация HttpConfiguration)
{
    var corsAttr = new EnableCorsAttribute("http://example.com", "*", "*");
    config.EnableCors(corsAttr);
}

4. CORS на шлюзе API AWS

В Amazon API Gateway добавлена ​​поддержка включения CORS с помощью простой кнопки в консоли API Gateway. К сожалению, эта кнопка имеет частичное поведение, поэтому правильно настраивает CORS только для 200 ответов (а не для других кодов состояния HTTP) и игнорирует поддержку заголовка Jquery. Лучшее решение, которое рассматривалось до сих пор, — это избегать использования кнопки CORS и задавать конфигурации вручную.

Этого можно достичь за пару шагов:

1. Войдите в консоль шлюза API.

2. Перед настройкой CORS создайте все ресурсы REST, которые необходимо предоставить с их методами (если новые ресурсы/методы создаются после включения CORS, эти шаги необходимо повторить).

3. Выберите ресурс

4. Добавьте метод OPTIONS, выберите тип интеграции «mock»

5. Для каждого Метода ресурса

6. Перейти к методу ответа

7. Добавьте все методы ответа, которые должны поддерживаться (например, 200, 500 и т. д.)

8. Для каждого кода ответа установите для заголовков ответа значение
X-запрошено-с
Access-Control-Allow-Headers
Access-Control-Allow-Origin
Access-Control-Allow-Methods

9. Перейдите к ответу интеграции, выберите один из созданных кодов ответа, затем сопоставления заголовков.

10. Вставьте значения по умолчанию для заголовков
пример:
X-запрошено-с: '*'
Access-Control-Allow-Headers: 'Content-Type, X-Amz-Date, Authorization, X-API-Key, x-requested-with'
Access-Control-Allow-Origin: '*'
Access-Control-Allow-Methods: 'POST,GET,OPTIONS'
Эту операцию необходимо повторить для каждого метода, включая только что созданные ОПЦИИ.

11. Разверните API на этапе

12. С помощью http://client.cors-api.appspot.com/client проверьте, успешно ли включены запросы CORS.

5. CORS на Caddyserver

Чтобы добавить авторизацию CORS в заголовок с помощью Caddy, просто добавьте следующую строку в свой caddyfile:

 кор

Это позволит получить доступ ко всем ресурсам из каждого домена.

Вы также можете быть более конкретным, то есть разрешить определенные ресурсы для определенных доменов:

 корс /foo http://mysite.com http://anothertrustedsite.com

Есть много других опций, которые вы можете использовать, вот полный пример, как показано в документации caddyserver:

 кор / {
  источник http://allowedSite.com
  источник http://anotherSite.org https://anotherSite.org
  методы POST,PUT
  allow_credentials ложь
  max_age 3600
  allow_headers X-Custom-Header, X-Foobar
  экспонированные_заголовки X-Something-Special,SomethingElse
}

6. CORS в сценариях CGI

Просто выведите строку:

 Доступ-Контроль-Разрешить-Происхождение: *

.. как часть заголовков вашего CGI-скрипта, например, в Perl (используя CGI.pm):

 печатать заголовок(
  -type => 'текст/черепаха',
  -content_location => 'mydata.ttl',
  -access_control_allow_origin => '*',
);

7. CORS в скриптах Perl PSGI

Модуль Plack::Middleware::CrossOrigin обеспечивает полную реализацию на стороне сервера CORS. Чтобы разрешить любой запрос из любого места, просто добавьте это в свой конструктор:

 включить 'CrossOrigin', origins => '*';

8. CORS в Python

 print "Тип содержимого: текст/черепаха"
распечатать «Расположение содержимого: mydata.ttl»
напечатать «Access-Control-Allow-Origin: *»

9. CORS на ExpressJS

В своем приложении ExpressJS на node.js выполните следующие действия со своими маршрутами:

 app.use (функция (требование, разрешение, следующий) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Происхождение, X-Requested-With, Content-Type, Accept");
  следующий();
});

app.get('/', function(req, res, next) {
  // Обработка получения для этого маршрута
});

app.post('/', function(req, res, next) {
 // Обработка сообщения для этого маршрута
});

10. CORS на IIS6

Чтобы включить CORS для Microsoft IIS6, выполните следующие действия:

  1. Откройте диспетчер информационной службы Интернета (IIS)
  2. Щелкните правой кнопкой мыши сайт, для которого вы хотите включить CORS, и перейдите в « Свойства» .
  3. Перейдите на вкладку « Заголовки HTTP ».
  4. В разделе « Пользовательские заголовки HTTP » нажмите « Добавить ».
  5. Введите Access-Control-Allow-Origin в качестве имени заголовка.
  6. Введите * в качестве значения заголовка
  7. Дважды нажмите "ОК "

11. CORS на IIS7

Для Microsoft IIS7 объедините это с файлом web.config в корне вашего приложения или сайта:

 <?xml версия="1.0" кодировка="utf-8"?>
<конфигурация>
 <системный.веб-сервер>
   <httpПротокол>
     <пользовательские заголовки>
       <add name="Access-Control-Allow-Origin" value="*" />
     </ пользовательские заголовки>
   </httpПротокол>
 </system.веб-сервер>
</конфигурация>

Если у вас еще нет файла web.config или вы не знаете, что это такое, просто создайте новый файл с именем web.config содержащий приведенный выше фрагмент.

12. CORS на Метеоре

Чтобы добавить авторизацию CORS в приложение Meteor, используйте WebApp.connectHandlers пакета webapp для настройки заголовков HTTP.

 // Слушаем входящие HTTP-запросы, можно использовать только на сервере
WebApp.rawConnectHandlers.use(function(req, res, next) {
  res.setHeader("Access-Control-Allow-Origin", "*");
  вернуть следующий();
});

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

 // Слушаем входящие HTTP-запросы, можно использовать только на сервере
WebApp.rawConnectHandlers.use("/public", function(req, res, next) {
  res.setHeader("Access-Control-Allow-Origin", "*");
  вернуть следующий();
});

13. CORS на Nginx

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

 #
# Широко открытая конфигурация CORS для nginx
#
место нахождения / {
     если ($ request_method = 'ВАРИАНТЫ') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        #
        # Пользовательские заголовки и заголовки, с которыми различные браузеры *должны* работать, но не
        #
        add_header 'Access-Control-Allow-Headers' 'DNT, X-CustomHeader, Keep-Alive, User-Agent, X-Requested-With, If-Modified-Since, Cache-Control, Content-Type';
        #
        # Сообщите клиенту, что эта предварительная информация действительна в течение 20 дней.
        #
        add_header 'Access-Control-Max-Age' 1728000;
        add_header 'Content-Type' 'текст/обычная кодировка = UTF-8';
        add_header 'Длина контента' 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, X-CustomHeader, Keep-Alive, User-Agent, X-Requested-With, If-Modified-Since, Cache-Control, Content-Type';
     }
     если ($ request_method = 'ПОЛУЧИТЬ') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT, X-CustomHeader, Keep-Alive, User-Agent, X-Requested-With, If-Modified-Since, Cache-Control, Content-Type';
     }
}

14. CORS в скриптах Perl PSGI

Модуль Plack::Middleware::CrossOrigin обеспечивает полную реализацию на стороне сервера CORS. Чтобы разрешить любой запрос из любого места, просто добавьте это в свой конструктор:

 включить 'CrossOrigin', origins => '*';

Этот модуль также доступен в Debian и Ubuntu как libplack-middleware-crossorigin-perl.

15. КОРС на PHP

Если у вас нет доступа для настройки Apache, вы все равно можете отправить заголовок из PHP-скрипта. Это случай добавления следующего в ваши PHP-скрипты:

 <?php
 header("Access-Control-Allow-Origin: *");

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

16. CORS на ColdFusion

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

Файл на основе тегов

 <cfheader name="Access-Control-Allow-Origin" value="*">

Файл на основе сценария

 ответ var = getPageContext().getResponse();
response.setHeader("Access-Control-Allow-Origin","*");

Примечание. Это необходимо установить до отправки каких-либо выходных данных с сервера.

17. CORS на Tomcat

Apache Tomcat включает поддержку CORS (начиная с Tomcat версии 7.0.41).

Вот пример из этих документов, демонстрирующий минимальную конфигурацию CORS:

 <фильтр>
  <filter-name>CorsFilter</filter-name>
  <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
</фильтр>
<фильтр-отображение>
  <filter-name>CorsFilter</filter-name>
  <url-шаблон>/*</url-шаблон>
</фильтр-отображение>

18. CORS на Виртуозе

Для этих настроек на уровне экземпляра/сервера требуется OpenLink Virtuoso Open Source (VOS) 6.1.3 или более поздней версии или Virtuoso Commercial Edition 06.02.3129.

  1. В Virtuoso Conductor выберите Сервер веб-приложений → Виртуальные домены и каталоги .
  2. Разверните хранилище интерфейсов по умолчанию.
  3. Щелкните Новый каталог .
  4. Укажите желаемый тип виртуального каталога или выберите существующий виртуальный каталог для использования в качестве шаблона.
  5. Нажмите «Далее» .
  6. Укажите значение пути к каталогу.
  7. Задайте параметры CORS .
    • Совместное использование ресурсов между источниками — содержит одну звездочку с подстановочным знаком, т. е. * или источник, например http://example.com:8080 или http://foo.example.com . Сценарии имеют право извлекать ресурс, если этот ресурс либо использует подстановочный знак, либо указывает источник сценария. В этом примере введите следующий единый URI: http://demo.openlinksw.com .
    • Флажок Reject Unintended CORS — если установлен флажок и приложение не перезаписывает заголовки, несопоставленные Origins будут отклонены путем отправки пустого ответа.
  8. Щелкните Сохранить изменения .

Для более старых версий Virtuoso можно использовать любую из приведенных ниже инструкций уровня веб-приложения. Любое приложение на базе Virtuoso может реализовать проверку CORS через известные HTTP-функции http_request_header() и http_header(), например:

 <?vsp
ЕСЛИ (http_request_header (строки, 'Происхождение', NULL) = 'http://host.org')
{
  http_header('Access-Control-Allow-Origin: http://host.org\r\n');
}
ЕЩЕ
{
  ВОЗВРАТ;
}
-- Дополнительный код здесь ---
?>

19. КОРС на WCF

Для службы WCF вам необходимо разработать новое поведение и включить его в конфигурацию конечной точки:

Создать инспектор сообщений
 открытый класс CustomHeaderMessageInspector: IDispatchMessageInspector
            {
                Dictionary<string, string> requiredHeaders;
                public CustomHeaderMessageInspector (заголовки Dictionary<string, string>)
                {
                    обязательные заголовки = заголовки ?? новый словарь<строка, строка>();
                }

                общедоступный объект AfterReceiveRequest (запрос ссылки System.ServiceModel.Channels.Message, канал System.ServiceModel.IClientChannel, System.ServiceModel.InstanceContext instanceContext)
                {
                    вернуть ноль;
                }

                public void BeforeSendReply (ссылка на ответ System.ServiceModel.Channels.Message, состояние корреляции объекта)
                {
                    var httpHeader = response.Properties["httpResponse"] as HttpResponseMessageProperty;
                    foreach (элемент var в requiredHeaders)
                    {
                        httpHeader.Headers.Add(item.Key, item.Value);
                    }           
                }
            }

Создайте поведение конечной точки и используйте инспектор сообщений для добавления заголовков

 открытый класс EnableCrossOriginResourceSharingBehavior: BehaviorExtensionElement, IEndpointBehavior
            {
                public void AddBindingParameters (конечная точка ServiceEndpoint, System.ServiceModel.Channels.BindingParameterCollection bindingParameters)
                {
           
                }

                public void ApplyClientBehavior (конечная точка ServiceEndpoint, System.ServiceModel.Dispatcher.ClientRuntime clientRuntime)
                {
            
                }

                public void ApplyDispatchBehavior (конечная точка ServiceEndpoint, System.ServiceModel.Dispatcher.EndpointDispatcher endpointDispatcher)
                {
                    var requiredHeaders = new Dictionary<string, string>();

                    requiredHeaders.Add("Access-Control-Allow-Origin", "*");
                    requiredHeaders.Add("Метод-запрос-управления-доступом", "POST,GET,PUT,DELETE,OPTIONS");
                    requiredHeaders.Add("Access-Control-Allow-Headers", "X-Requested-With,Content-Type");

                    endpointDispatcher.DispatchRuntime.MessageInspectors.Add(новый CustomHeaderMessageInspector(requiredHeaders));
                }

                public void Validate (конечная точка ServiceEndpoint)
                {
            
                }

                общественное переопределение типа BehaviorType
                {
                    получить { return typeof (EnableCrossOriginResourceSharingBehavior); }
                }

                защищенный объект переопределения CreateBehavior()
                {
                    вернуть новый EnableCrossOriginResourceSharingBehavior();
                }
            }

Зарегистрируйте новое поведение в web.config

 <расширения>
              <behaviorExtensions>        
                <add name="crossOriginResourceSharingBehavior" type="Services.Behaviours.EnableCrossOriginResourceSharingBehavior, Services, Version=1.0.0.0, Culture=neutral" />        
              </behaviorExtensions>      
            </расширения>

Добавить новое поведение в конфигурацию поведения конечной точки

 <поведение конечной точки>      
            <поведение имя="jsonBehavior">
                <веб-HTTP/>
                <crossOriginResourceSharingBehavior />
            </поведение>
            </endpointBehaviors>

Настроить конечную точку

 <endpoint address="api" binding="webHttpBinding" behaviorConfiguration="jsonBehavior" contract="Service.IServiceContract" />

API, поддерживающие CORS

  • Амазонка S3
  • В центре внимания DBpedia
  • API Dropbox
  • Графический API Facebook
  • Flickr API
  • API-интерфейс FourSquare
  • API Google
  • Облачное хранилище Google
  • API-интерфейс GitHub v3
  • API МедиаВики
  • префикс.cc
  • ОпубликоватьМоиДанные
  • такой же как
  • API-интерфейс SoundCloud
  • API поиска Spotify
  • API Конгресса солнечного света
  • URIBurner
  • API YouTube (сообщение в блоге)
  • API документации

Библиотеки для реализации CORS

  • Фильтр CORS для веб-приложений Java
  • cors-python для веб-приложений Python
  • Включите CORS для статического контента в Google AppEngine.
  • RDF::LinkedData версии 0.16 и выше
  • cors-filter: реализация Java Servlet Filter серверной CORS для веб-контейнеров, разработанная eBay Software Foundation.
  • add-cors-to-couchdb: интерфейс командной строки для добавления поддержки CORS в CouchDB для использования в клиентских библиотеках, таких как PouchDB.

Спасибо, что прочитали это сообщение. Надеемся, что это руководство поможет вам включить общий доступ к ресурсам между источниками .

Пожалуйста, дайте свои комментарии и замечания ниже.