Włącz udostępnianie zasobów między źródłami

Opublikowany: 2016-11-07

Co to jest współużytkowanie zasobów między źródłami (CORS) —

Udostępnianie zasobów między źródłami ma fundamentalne znaczenie, ponieważ może uwidocznić ukryte zasoby. Udostępnianie zasobów między źródłami (CORS) to specyfikacja, która umożliwia prawdziwie otwarty dostęp poza granicami domeny. CORS pozwala skryptom internetowym na bardziej otwartą interakcję z treścią poza oryginalną domeną, co prowadzi do lepszej integracji między usługami internetowymi. Udostępnianie zasobów między źródłami umożliwia żądanie zablokowanych zasobów, takich jak czcionki na stronie internetowej, z innej domeny spoza domeny, z której pochodzi zasób.

CORS definiuje sposób, w jaki przeglądarka i serwer mogą współdziałać w celu określenia, czy zezwalanie na żądanie cross-origin jest bezpieczne. Pozwala na większą swobodę i funkcjonalność niż żądania czysto tego samego pochodzenia, ale jest bezpieczniejszy niż po prostu zezwalanie na wszystkie żądania z różnych źródeł.

Dlaczego CORS jest ważny?

JavaScript i programowanie internetowe rosły skokowo przez lata, ale polityka tego samego pochodzenia nadal pozostaje. Uniemożliwia to JavaScriptowi wysyłanie żądań przez granice domen i zrodziło różne hacki do wysyłania żądań między domenami.

CORS wprowadza standardowy mechanizm, który może być używany przez wszystkie przeglądarki do implementacji żądań międzydomenowych. Specyfikacja definiuje zestaw nagłówków, które pozwalają przeglądarce i serwerowi komunikować się o tym, które żądania są (i nie są) dozwolone. CORS kontynuuje ducha otwartej sieci, zapewniając wszystkim dostęp do API.

Włącz udostępnianie zasobów między źródłami —

1. CORS na Apache

Aby dodać autoryzację CORS do nagłówka za pomocą Apache, po prostu dodaj następujący wiersz w sekcjach <Directory> , <Location> <Files> lub <VirtualHost> konfiguracji serwera (zwykle znajduje się w plikach *.conf, takich jak httpd.conf lub apache.conf) lub w pliku .htaccess :

 Zestaw nagłówków Access-Control-Allow-Origin "*"

Aby upewnić się, że zmiany są poprawne, zdecydowanie zaleca się użycie

 Apachectl -t

aby sprawdzić zmiany konfiguracji pod kątem błędów. Po tym przejściu może być konieczne ponowne załadowanie Apache, aby upewnić się, że zmiany zostały zastosowane, uruchamiając polecenie

 usługa sudo apache2 przeładuj

lub

 apachectl -k pełen wdzięku

Zmiana nagłówków wymaga użycia mod_headers. Mod_headers jest domyślnie włączony w Apache, jednak możesz chcieć upewnić się, że jest włączony przez run

 nagłówki a2enmod

Uwaga : możesz również użyć add zamiast set , ale pamiętaj, że add może dodać nagłówek wiele razy, więc prawdopodobnie bezpieczniej jest użyć set.

2. CORS w App Engine

W przypadku aplikacji opartych na języku Python w Google App Engine można użyć metody self.response.headers.add_header() , na przykład:

 klasa CORSEnabledHandler(webapp.RequestHandler):
  def get(self):
    self.response.headers.add_header("Kontrola dostępu-Allow-Origin", "*")
    self.response.headers['Content-Type'] = 'text/csv'
    self.response.out.write(self.dump_csv())

W przypadku aplikacji opartych na Javie użyj resp.addHeader() :

 public void doGet(HttpServletRequest żądanie, HttpServletResponse odp) {
  resp.addHeader("Kontrola dostępu-Allow-Origin", "*");
  resp.addHeader("Typ-treści", "text/csv");
  odp.getWriter().append(csvString);
}

A dla aplikacji opartych na Go użyj w.Header().Add() :

 func doGet(w http.ResponseWriter, r *http.Request) {
  w.Header().Add("Kontrola dostępu-Allow-Origin", "*")
  w.Header().Add("Typ-treści", "tekst/csv")
  fmt.Fprintf(w, csvData)
}

3. CORS na ASP.NET

Jeśli nie masz dostępu do konfigurowania usług IIS, nadal możesz dodać nagłówek za pośrednictwem ASP.NET, dodając następujący wiersz do stron źródłowych:

 Response.AppendHeader("Kontrola dostępu-Allow-Origin", "*");

ASP.NET Web API

ASP.NET Web API 2 obsługuje mechanizm CORS.

Aby włączyć obsługę CORS, dodaj do projektu pakiety Microsoft.AspNet.WebApi.Cors NuGet.

Dodaj ten kod do swojej konfiguracji:

 public static void Register (konfiguracja HttpConfiguration)
{
    // Nowy kod
    config.EnableCors();
}

Aby włączyć żądania cross-origin, dodaj atrybut [EnableCors] do kontrolera lub metody kontrolera internetowego interfejsu API:

 [EnableCors(origins: "http://example.com", nagłówki: "*", metody: "*")]
public class TestController : ApiController
{
    // Nie pokazano metod kontrolera...
}

Włączanie globalnie

Opisanej powyżej metody można również użyć do włączenia mechanizmu CORS w interfejsie API bez dodawania adnotacji do każdego kontrolera:

 public static void Register (konfiguracja HttpConfiguration)
{
    var corsAttr = new EnableCorsAttribute("http://example.com", "*", "*");
    config.EnableCors(corsAttr);
}

4. CORS na AWS API Gateway

Amazon API Gateway dodaje obsługę CORS umożliwiającą za pomocą prostego przycisku w konsoli API Gateway. Niestety, ten przycisk działa częściowo, dlatego ustawia poprawnie CORS tylko dla 200 odpowiedzi (a więc nie dla innych kodów stanu HTTP) i ignoruje obsługę nagłówków Jquery. Najlepszym rozwiązaniem rozważanym do tej pory jest unikanie używania przycisku CORS i ręczne ustawianie konfiguracji.

Można to osiągnąć w kilku krokach:

1. Zaloguj się do konsoli API Gateway

2. Utwórz wszystkie zasoby REST, które muszą zostać ujawnione za pomocą ich metod przed skonfigurowaniem CORS (jeśli nowe zasoby/metody zostaną utworzone po włączeniu CORS, te kroki należy powtórzyć)

3. Wybierz zasób

4. Dodaj metodę OPTIONS, jako typ integracji wybierz „mock”

5. Dla każdej metody zasobu

6. Przejdź do metody odpowiedzi

7. Dodaj wszystkie metody odpowiedzi, które powinny być obsługiwane (tj. 200, 500 itd.)

8. Dla każdego kodu odpowiedzi ustaw nagłówki odpowiedzi na
X-Prośba-Z
Kontrola dostępu-Zezwól-Nagłówki
Kontrola dostępu-Zezwól-Pochodzenie
Metody kontroli dostępu

9. Przejdź do Integration Response, wybierz jeden z utworzonych kodów odpowiedzi, a następnie Header Mappings

10. Wstaw wartości domyślne dla nagłówków
przykład:
X-Żądany-Z: '*'
Access-Control-Allow-Headers: „Typ treści, data X-Amz, autoryzacja, klucz X-API, x-requested-with”
Access-Control-Allow-Origin: '*'
Metody kontroli dostępu i zezwalania: 'POST,GET,OPTIONS'
Operację tę należy powtórzyć dla każdej metody, w tym nowo utworzonych OPCJI

11. Wdróż API na scenę

12. Sprawdź za pomocą http://client.cors-api.appspot.com/client, czy żądania CORS zostały pomyślnie włączone

5. CORS na Caddyserver

Aby dodać autoryzację CORS do nagłówka za pomocą Caddy, po prostu dodaj następujący wiersz w swoim pliku caddy:

 korsa

Umożliwi to dostęp do wszystkich zasobów z każdej domeny.

Możesz też być bardziej szczegółowy, tzn. zezwolić na określone zasoby w określonych domenach:

 cors /foo http://mojastrona.com http://innazaufanawitryna.com

Istnieje wiele innych opcji, z których możesz skorzystać, oto pełny przykład, jak pokazano w dokumentacji caddyserver:

 korki / {
  pochodzenie http://allowedSite.com
  pochodzenie http://anotherSite.org https://anotherSite.org
  metody POST,PUT
  allow_credentials fałszywe
  max_wiek 3600
  allow_headers X-Custom-Header,X-Foobar
  narażone_nagłówki X-Coś-Specjalne,Coś jeszcze
}

6. CORS w skryptach CGI

Po prostu wypisz linię:

 Kontrola dostępu-Zezwól-Pochodzenie: *

.. jako część nagłówków twojego skryptu CGI, na przykład w Perlu (przy użyciu CGI.pm):

 wydrukuj nagłówek (
  -type => 'tekst/żółw',
  -content_location => 'mojedane.ttl',
  -access_control_allow_origin => '*',
);

7. CORS w skryptach Perl PSGI

Moduł Plack::Middleware::CrossOrigin zapewnia kompletną implementację CORS po stronie serwera. Aby zezwolić na dowolne żądanie z dowolnej lokalizacji, po prostu dodaj to do swojego kreatora:

 włącz 'CrossOrigin', pochodzenie => '*';

8. CORS w Pythonie

 print "Typ treści: tekst/żółw"
print "Lokalizacja zawartości: mydata.ttl"
print "Kontrola dostępu-Allow-Origin: *"

9. CORS na ExpressJS

W swojej aplikacji ExpressJS na node.js wykonaj następujące czynności ze swoimi trasami:

 app.use(function(req, res, next) {
  res.header("Kontrola dostępu-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Pochodzenie, X-Requested-With, Content-Type, Accept");
  następny();
});

app.get('/', function(req, res, next) {
  // Obsłuż get dla tej trasy
});

app.post('/', function(req, res, next) {
 // Obsługuj post dla tej trasy
});

10. CORS na IIS6

Aby włączyć CORS w Microsoft IIS6, wykonaj następujące kroki:

  1. Otwórz Menedżera internetowych usług informacyjnych (IIS)
  2. Kliknij prawym przyciskiem myszy witrynę, dla której chcesz włączyć CORS, i przejdź do Właściwości
  3. Przejdź do zakładki Nagłówki HTTP
  4. W sekcji Niestandardowe nagłówki HTTP kliknij Dodaj
  5. Wpisz Access-Control-Allow-Origin jako nazwę nagłówka
  6. Wpisz * jako wartość nagłówka
  7. Kliknij OK dwa razy

11. CORS na IIS7

W przypadku Microsoft IIS7 połącz to z plikiem web.config w katalogu głównym aplikacji lub witryny:

 <?xml version="1.0" kodowanie="utf-8"?>
<konfiguracja>
 <system.serwer WWW>
   <httpProtokół>
     <niestandardowe nagłówki>
       <add name="Access-Control-Allow-Origin" value="*" />
     </customHeaders>
   </httpProtokół>
 </system.webServer>
</configuration>

Jeśli nie masz jeszcze pliku web.config lub nie wiesz, co to jest, po prostu utwórz nowy plik o nazwie web.config zawierający powyższy fragment.

12. CORS na Meteorze

Aby dodać autoryzację CORS do aplikacji Meteor, użyj WebApp.connectHandlers pakietu aplikacji internetowej, aby dostosować nagłówki HTTP.

 // Słuchaj przychodzących żądań HTTP, może być używany tylko na serwerze
WebApp.rawConnectHandlers.use(function(req, res, next) {
  res.setHeader("Kontrola dostępu-Allow-Origin", "*");
  zwróć następne();
});

Użyj opcjonalnego argumentu path , aby wywołać procedurę obsługi tylko dla ścieżek, które pasują do określonego ciągu.

 // Słuchaj przychodzących żądań HTTP, może być używany tylko na serwerze
WebApp.rawConnectHandlers.use("/public", function(req, res, next) {
  res.setHeader("Kontrola dostępu-Allow-Origin", "*");
  zwróć następne();
});

13. CORS na Nginx

Następująca konfiguracja Nginx włącza mechanizm CORS z obsługą żądań inspekcji wstępnej.

 #
# Szeroko otwarta konfiguracja CORS dla nginx
#
Lokalizacja / {
     if ($request_method = 'OPCJE') {
        add_header 'Kontrola dostępu-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        #
        # Niestandardowe nagłówki i nagłówki różne przeglądarki *powinny* być w porządku, ale nie są
        #
        add_header 'Kontrola dostępu-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
        #
        # Powiedz klientowi, że te informacje przed lotem są ważne przez 20 dni
        #
        add_header 'Kontrola dostępu-Max-Wiek' 1728000;
        add_header 'Typ treści' 'tekst/zwykły zestaw znaków=UTF-8';
        add_header 'Długość treści' 0;
        powrót 204;
     }
     if ($request_method = 'POST') {
        add_header 'Kontrola dostępu-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Kontrola dostępu-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
     }
     if ($request_method = 'POBIERZ') {
        add_header 'Kontrola dostępu-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Kontrola dostępu-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
     }
}

14. CORS w skryptach Perl PSGI

Moduł Plack::Middleware::CrossOrigin zapewnia kompletną implementację CORS po stronie serwera. Aby zezwolić na dowolne żądanie z dowolnej lokalizacji, po prostu dodaj to do swojego kreatora:

 włącz 'CrossOrigin', pochodzenie => '*';

Ten moduł jest również dostępny w Debianie i Ubuntu jako libplack-middleware-crossorigin-perl.

15. CORS na PHP

Jeśli nie masz dostępu do konfiguracji Apache, nadal możesz wysłać nagłówek ze skryptu PHP. Jest to przypadek dodania następujących elementów do skryptów PHP:

 <?php
 header("Kontrola dostępu-Allow-Origin: *");

Uwaga: tak jak w przypadku wszystkich zastosowań funkcji nagłówka PHP, musi to nastąpić przed wysłaniem jakichkolwiek danych wyjściowych z serwera.

16. CORS na ColdFusion

Jeśli nie masz dostępu do konfiguracji serwera WWW, nadal możesz wysłać nagłówek ze skryptu Coldfusion. Chodzi o dodanie następujących elementów do skryptów Coldfusion:

Plik oparty na znacznikach

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

Plik oparty na skrypcie

 zmienna odpowiedź = getPageContext().getResponse();
response.setHeader("Kontrola dostępu-Allow-Origin","*");

Uwaga: należy to ustawić przed wysłaniem jakichkolwiek danych wyjściowych z serwera.

17. CORS na Tomcat

Apache Tomcat zawiera obsługę CORS (począwszy od wersji Tomcat 7.0.41).

Oto przykład z tych dokumentów, który demonstruje minimalną konfigurację CORS:

 <filtr>
  <filter-name>CorsFilter</filter-name>
  <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
</filter>
<mapowanie filtrów>
  <filter-name>CorsFilter</filter-name>
  <url-pattern>/*</url-pattern>
</filter-mapping>

18. CORS na Wirtuoz

Te ustawienia na poziomie instancji/serwera wymagają oprogramowania OpenLink Virtuoso Open Source (VOS) 6.1.3 lub nowszego albo Virtuoso Commercial Edition 06.02.3129

  1. W Virtuoso Conductor przejdź do Web Application Server → Virtual Domains & Directorys .
  2. Rozwiń domyślny magazyn interfejsu .
  3. Kliknij Nowy katalog .
  4. Określ żądany typ katalogu wirtualnego lub wybierz istniejący katalog wirtualny do użycia jako szablon.
  5. Kliknij Dalej .
  6. Określ wartość ścieżki katalogu .
  7. Ustaw opcje CORS .
    • Udostępnianie zasobów między źródłami — zawiera pojedynczą gwiazdkę z symbolem wieloznacznym, tj. * lub źródło, takie jak http://example.com:8080 lub http://foo.example.com . Skrypty są autoryzowane do pobierania zasobu, jeśli ten zasób używa symbolu wieloznacznego lub wyświetla źródło skryptu. W tym przykładzie wprowadź następujący pojedynczy identyfikator URI: http://demo.openlinksw.com
    • Pole wyboru Odrzuć niezamierzony CORS – gdy zaznaczone, a aplikacja nie nadpisuje nagłówków, niedopasowane źródła zostaną odrzucone poprzez wysłanie pustej odpowiedzi.
  8. Kliknij Zapisz zmiany .

W przypadku starszych wersji Virtuoso można użyć dowolnej z poniższych instrukcji na poziomie aplikacji internetowych. Każda aplikacja oparta na Virtuoso może zaimplementować sprawdzanie CORS za pomocą dobrze znanych funkcji HTTP http_request_header() i http_header(), na przykład:

 <?vsp
JEŻELI (http_request_header (linie, „Pochodzenie”, NULL) = „http://host.org”)
{
  http_header ('Kontrola dostępu-Allow-Origin: http://host.org\r\n');
}
W PRZECIWNYM RAZIE
{
  ZWRÓCIĆ;
}
-- Dodatkowy kod tutaj ---
?>

19. CORS na WCF

W przypadku usługi WCF musisz opracować nowe zachowanie i uwzględnić je w konfiguracji punktu końcowego:

Utwórz inspektora wiadomości
 public class CustomHeaderMessageInspector : IDispatchMessageInspector
            {
                Dictionary<string, string> requiredHeaders;
                public CustomHeaderMessageInspector (Dictionary<ciąg, ciąg> nagłówki)
                {
                    wymaganeNagłówki = nagłówki ?? nowy słownik<ciąg, ciąg>();
                }

                obiekt publiczny AfterReceiveRequest (ref System.ServiceModel.Channels.Message żądanie, System.ServiceModel.IClientChannel kanał, System.ServiceModel.InstanceContext instanceContext)
                {
                    zwróć null;
                }

                public void BeforeSendReply (ref System.ServiceModel.Channels.Message odpowiedź, obiekt korelacjiState)
                {
                    var httpHeader = odpowiedź.Właściwości["httpResponse"] jako HttpResponseMessageProperty;
                    foreach (var element w requiredHeaders)
                    {
                        httpHeader.Headers.Add(item.Key, item.Value);
                    }           
                }
            }

Utwórz zachowanie punktu końcowego i użyj Inspektora wiadomości, aby dodać nagłówki

 klasa public EnableCrossOriginResourceSharingBehavior : BehaviorExtensionElement, IEndpointBehavior
            {
                public void AddBindingParameters (punkt końcowy ServiceEndpoint, System.ServiceModel.Channels.BindingParameterCollection bindingParameters)
                {
           
                }

                public void ApplyClientBehavior (punkt końcowy ServiceEndpoint, System.ServiceModel.Dispatcher.ClientRuntime clientRuntime)
                {
            
                }

                public void ApplyDispatchBehavior (punkt końcowy ServiceEndpoint, System.ServiceModel.Dispatcher.EndpointDispatcher endpointDispatcher)
                {
                    var requiredHeaders = new Dictionary<string, string>();

                    requiredHeaders.Add("Kontrola dostępu-Allow-Origin", "*");
                    requiredHeaders.Add("Access-Control-Request-Method", "POST,GET,PUT,DELETE,OPTIONS");
                    requiredHeaders.Add("Kontrola dostępu-Allow-Headers", "X-Requested-With,Content-Type");

                    endpointDispatcher.DispatchRuntime.MessageInspectors.Add (nowy CustomHeaderMessageInspector (wymagane nagłówki));
                }

                public void Validate (punkt końcowy usługi ServiceEndpoint)
                {
            
                }

                publiczne nadpisanie Typ BehaviorType
                {
                    get { return typeof(EnableCrossOriginResourceSharingBehavior); }
                }

                chroniony obiekt nadpisania CreateBehavior()
                {
                    zwróć nowe EnableCrossOriginResourceSharingBehavior();
                }
            }

Zarejestruj nowe zachowanie w web.config

 <rozszerzenia>
              <behaviorExtensions>        
                <add name="crossOriginResourceSharingBehavior" type="Services.Behaviours.EnableCrossOriginResourceSharingBehavior, Services, Version=1.0.0.0, Culture=neutral" />        
              </behaviorExtensions>      
            </rozszerzenia>

Dodaj nowe zachowanie do konfiguracji zachowania punktu końcowego

 <endpointBehaviors>      
            <nazwa zachowania="jsonBehavior">
                <webHttp />
                <crossOriginResourceSharingBehavior />
            </zachowanie>
            </endpointBehaviors>

Skonfiguruj punkt końcowy

 <adres punktu końcowego="api" bind="webHttpBinding"Behaviration="jsonBehavior" contract="Service.IServiceContract" />

Interfejsy API obsługujące CORS

  • Amazonka S3
  • Wyróżnione DBpedia
  • API Dropbox
  • Interfejs API wykresów na Facebooku
  • Flickr API
  • Interfejs API FourSquare
  • Interfejsy API Google
  • Przechowywanie w chmurze Google
  • Interfejs API GitHub v3
  • MediaWiki API
  • prefiks.cc
  • OpublikujMojeDane
  • taki sam jak
  • Interfejs API SoundCloud
  • API wyszukiwania Spotify
  • Sunlight Congress API
  • URIburner
  • YouTube API (wpis na blogu)
  • API doctape

Biblioteki do wdrażania CORS

  • Filtr CORS, dla aplikacji internetowych Java
  • cors-python, dla aplikacji internetowych w Pythonie
  • Włącz CORS w treści statycznej w Google AppEngine.
  • RDF::LinkedData w wersji 0.16 i nowszych
  • cors-filter: Implementacja Java Servlet Filter CORS po stronie serwera dla kontenerów internetowych, opracowana przez eBay Software Foundation
  • add-cors-to-couchdb: CLI, aby dodać obsługę CORS do CouchDB, do użytku w bibliotekach klienckich, takich jak PouchDB.

Dzięki za przeczytanie tego Poczta. Mam nadzieję, że ten samouczek pomoże ci włączyć udostępnianie zasobów między źródłami .

Proszę podać swoje uwagi i uwagi poniżej.