Niebieski Pomarańczowy Zielony Różowy Fioletowy

Cross-Domain JavaScript: CORS

Opublikowane 10 października 2011. Autor: Kamil Brenk. Wizyt: 24 861.

Kategorie: JavaScript
Tematyka: bezpieczeństwo stron www, Cross-domain requests, Cross-Origin Resource Sharing, JavaScript, JSONP, obiekt XMLHttpRequest, Same origin policy, Yahoo YQL

pa� 10

Ponad rok temu opisywałem na blogu różne techniki Cross-Domain JavaScript, czyli obejścia Same origin policy dla żądań XHR w języku JavaScript.

Czas powrócić do tematu i rozszerzyć zawartą tam wiedzę, bowiem konsorcjum W3C wyprowadziło nową specyfikację dla Cross-Origin Resource Sharing, a wszystkie nowoczesne przeglądarki zdążyły już ją zaimplementować, stąd mamy prostsze rozwiązanie problemu :)

Cross-Origin Resource Sharing, w często używanym skrócie CORS to technologia umożliwiająca wykonywanie asynchronicznych połączeń do każdego miejsca w Sieci, o ile owe miejsce na to pozwoliło. Znika więc bariera Same origin policy i nie musimy używać tricków typu JSONP – możemy wykonywać żądania przy użyciu XMLHttpRequest poza naszą domenę.

Wymagania CORS

Aby móc wykorzystywać Cross-Origin Resource Sharing w swoim serwisie musi zostać spełnionych kilka warunków:

przeglądarka musi obsługiwać CORS,
serwer, do którego się odwołujemy musi być odpowiednio skonfigurowany,
kilka razy zastanawiamy się czy naprawdę tego potrzebujemy :-) względy bezpieczeństwa.

Przejdźmy do omówienia każdego z tych podpunktów.

Obsługa CORS przez przeglądarki

Na dzień dzisiejszy technologia Cross-Origin Resource Sharing jest obsługiwana w następujących przeglądarkach:

Firefox 3.5
Safari 4
Internet Explorer 8 (XDomainRequest, o czym dalej)
Google Chrome 3
iOS Safari 3.2
Android Browser 2.1
SeaMonkey 2.0

Niestety na powyższej liście nie znajdziemy Opery, więc dla tej przeglądarki (jak i innych, nie obsługujących CORS) musimy skorzystać z Browser Polyfills.

Nigdy nie wykrywaj wersji przeglądarki – wykrywaj czy używana przez użytkownika przeglądarka obsługuje pożądaną technologię!

Żeby wykryć obsługę CORS wystarczy następująca składnia:

1
2
3
4

var request = new XMLHttpRequest();
if ('withCredentials' in request) {
// CORS supported (XHR)
}

lub:

1
2
3
4

var request = new XMLHttpRequest();
if (request.withCredentials !== undefined) {
// CORS supported (XHR)
}

To tyle jeśli chodzi o „normalne” przeglądarki. Do tych przeglądarek oczywiście nie zaliczka się Internet Explorer ze swoimi genialnymi pomysłami :-) W IE nie skorzystamy z obiektu XMLHttpRequest, zamiast tego mamy do dyspozycji XDomainRequest, z którym możemy nawiązywać połączenia poza domenę.

Czyli tak wygląda obsługa CORS dla Internet Explorer:

1
2
3

if (!'withCredentials' in new XMLHttpRequest() && XDomainRequest) {
// CORS supported (XHR)
}

Złączając powyższe techniki otrzymujemy następujący kod:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Dobra informacja dla korzystających z jQuery: jest już skrypt łatający ułomności Internet Explorer – iecors.js. Dzięki niemu możemy wykonywać żądania XHR poza domenę nie martwiąc się dodatkową obsługą IE/XDR (choć dalej musimy się martwić o przeglądarki nie obsługujące CORS).

Cross Browser Polyfills

Jak to bywa z nowymi technologiami, rzadko kiedy wszystkie przeglądarki je obsługują. Także i CORS nie jest wspierany przez wszystkie przeglądarki, w tym lubianą przeze mnie Operę. Rozwiązań problemu mamy kilka:

Użyć CORS polyfill
Najprostszym sposobem na brak natywnego wsparcia ze strony przeglądarki jest zastosowanie biblioteki, która dodaje owe funkcjonalności. W tym celu możemy skorzystać z pmxdr (wykorzystuje inną technologię – postMessage, który również nie wszędzie jest obsługiwana :)) czy flXHR (wykorzystuje brzydkiego Flasha).
Użyć JSONP, iframe lub inną technikę do Cross-Domain JavaScript
Wyświetlić informację o błędzie
Możemy próbować wymusić na użytkowniku konieczność zmiany lub aktualizacji przeglądarki, co rzadko kiedy jest dobrym wyjściem z sytuacji :-)

Konfiguracja serwera dla żądań XHR

Kolejnym wymogiem do obsługi CORS jest odpowiednie skonfigurowanie serwera, do którego odwołujemy się w naszych żądaniach XHR. Czyli mówiąc inaczej – nie możemy odwoływać się do wszystkich domen w Sieci :-) Administrator serwera / właściciel strony musi jasno określić, że z jego strony mogą być pobierane treści przez XHR.

Aby móc pobierać treści z zewnętrznych serwerów, muszą one w odpowiedzi wysyłać nagłówek Access-Control-Allow-Origin wskazujący na naszą domenę:

1	Header set Access-Control-Allow-Origin http://moja-domena.pl/

lub dowolną domenę:

1	Header set Access-Control-Allow-Origin *

Powyższe ustawienia dotyczą oczywiście serwera Apache. Analogicznie, ten sam efekt możemy osiągnąć z PHP:

1	header("Access-Control-Allow-Origin: *");

czy serwerem IIS7:

1
2
3
4
5
6
7
8
9
10

<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.webServer>
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
</customHeaders>
</httpProtocol>
</system.webServer>
</configuration>

Credentialed requests

Nagłówek Access-Control-Allow-Credentials pozwala określić czy wraz z odpowiedzią mają być wysyłane także cookies w nagłówku. Aby z kolei określić czy wraz z żądaniem mają być przesyłane ciasteczka, musimy nasz obiekt XMLHttpRequest uzupełnić o pole withCredentials:

1
2
3
4
5
6
7
8
9
10

var url = "http://other.domain.com/";
if (XMLHttpRequest) {
var request = new XMLHttpRequest();
if ('withCredentials' in request) {
request.open('GET', url, true);
request.withCredentials = 'true';
request.onreadystatechange = handler;
request.send();
}
}

Niestety obiekt XDomainRequest nie obsługuje możliwości przesyłania ciasteczek między domenami.

Przykład działania: Simple use of Cross-Site XMLHttpRequest (with Credentials) (można testować w Chrome lub Firefoxie).

Preflight requests

Preflight requests to dość nietypowy sposób komunikacji dla żądań wykonywanych przy pomocy XHR (i tylko XHR, bowiem obiekt XDomainRequest tego nie obsługuje). W największym skrócie – żądania z niestandardowymi nagłówkami (nie znajdującymi się w specyfikacji HTTP 1.1) lub o niestandardowym typie MIME (innym niż text/plain, multipart/form-data lub application/x-www-form-urlencoded) to żądania preflighted (nie znam polskiego odpowiednika tego słowa).

Czym różni się preflight requests od zwykłego żądania? Najłatwiej będzie to przedstawić na przykładzie:

Wysyłamy żądanie XHR do obcego serwera – zapytanie zawiera niestandardowy nagłówek App-Token oraz niestandardowy typ MIME – application/xml (choć wystarczyło spełnić jeden warunek, by żądanie było preflighted):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

var request = new XMLHttpRequest(),
post = ['<?xml version="1.0"?>',
'<post>',
'<title>Tytuł</title>',
'<body>Treść</body>',
'</post>'
].join('');

if (request) {
request.open('GET', 'http://my-app.pl/post.php', true);
request.setRequestHeader('App-Token', '^#$%Fgvgdf%^#$&%^TGbV');
request.setRequestHeader('Content-Type', 'application/xml');
request.onreadystatechange = handler;
request.send(post);
}

Teraz następuje nietypowe zjawisko – nasz serwer wysyła zapytanie HTTP (Request) z użyciem metody OPTIONS do pożądanego adresu URL, w tym przypadku http://my-app.pl/post.php. Tak może wyglądać owe zapytanie (pominąłem tutaj nieinteresujące nas nagłówki):
1
2
3
4
5
OPTIONS /public/ HTTP/1.1
Host: my-app.pl
Origin: http://blog.kamilbrenk.pl/
Access-Control-Request-Method: POST
Access-Control-Request-Headers: App-Token

Jak widać, w naszym zapytaniu mamy nietypowe nagłówki:
- Access-Control-Request-Method – metoda, której chcemy użyć żądaniu,
- Access-Control-Request-Headers – lista niestandardowych nagłówków, które chcemy użyć (opcjonalnie).

Dostajemy odpowiedź od serwera:

1
2
3
4
5
6
7
8
9

HTTP/1.1 200 OK
Date: Mon, 12 Oct 2011 01:15:39 GMT
Server: Apache/2.0.61 (Unix)
Access-Control-Allow-Origin: http://blog.kamilbrenk.pl/
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: App-Token
Access-Control-Max-Age: 1728000
Content-Length: 0
Content-Type: text/plain

Serwer przesyła kilka interesujących nas nagłówków, w tym:

Access-Control-Allow-Origin – informuje, że z podanej domeny można wykonać żądanie XHR,
Access-Control-Allow-Methods – dozwolone metody przesyłu, w tym POST, której użyliśmy w naszym żądaniu,
Access-Control-Allow-Headers – lista niestandardowych nagłówków, których możemy użyć,
Access-Control-Max-Age – czas trzymania w cache informacji o „rzetelności” wykonywanego żądania; oznacza to, że przez 1 728 000 sekund (20 dni) serwer nie będzie wykonywał preflight requests – każde dodatkowe żądanie do dodatkowe bajty, więc buforowanie wyniku to zwykła optymalizacja.

Serwer, do którego wysyłamy nasze żądanie POST zgodził się na odbiór przesyłki. Czas więc na właściwe żądanie:

1
2
3
4
5
6
7
8
9
10

POST /public/ HTTP/1.1
Host: my-app.pl
App-Token: ^#$%Fgvgdf%^#$&%^TGbV
Content-Type: application/xml; charset=UTF-8
Content-Length: 72
Origin: http://blog.kamilbrenk.pl/
Pragma: no-cache
Cache-Control: no-cache

<?xml version="1.0"?><post><title>Tytuł</title><body>Treść</body></post>

Odpowiedź jest już standardowa i nie powinna być zaskoczeniem:

1
2
3
4
5
6
7
8
9

HTTP/1.1 200 OK
Date: Mon, 12 Oct 2011 01:15:40 GMT
Server: Apache/2.0.61 (Unix)
Access-Control-Allow-Origin: http://blog.kamilbrenk.pl/
Content-Encoding: gzip
Content-Length: 138
Content-Type: text/plain

[Some GZIP'd payload]

Mam nadzieję, że powyższy przykład nie jest zbyt zagmatwany i wszystko wyjaśnia :) Preflight requests mają za zadanie sprawdzenie czy wysłanie naszego nietypowego żądania ma jakikolwiek sens oraz zwiększa bezpieczeństwo (sprawdza czy serwer, do którego wysyłamy obsłuży nasze zapytanie).

Kilka słów podsumowania

Jak już zauważyłeś, wykorzystywanie CORS jest banalnie proste – wystarczy nowoczesna przeglądarka obsługująca obiekt XMLHttpRequest2 oraz odpowiednia konfiguracja serwera, ewentualnie wsparcie dla IE (XDR), co załatwia wspomniana biblioteka do jQuery.

Gorzej jeśli zależy nam także na użytkownikach Opery – wtedy musimy użyć JSONP lub innej techniki. Doskonale sprawdzi się także plugin Cross-Domain Ajax mod omawiany tutaj.

Na sam koniec warto też wspomnieć o bezpieczeństwie – „otworzenie” serwisu na zewnętrzne żądania XHR może mieć swoje negatywne skutki i zostać wykorzystane w nieczystych celach :-) Warto więc poznać niebezpieczeństwa związane z Cross Origin Request.

Komentarze (5)

Piotrek Reinmar Koszuliński 10 października 2011

O! Mogę wykreślić jeden temat z http://code42.pl/2011/08/05/javascript-po-polsku/ Dobra robota :)
Piotrek Reinmar Koszuliński 10 października 2011

Hym… Chociaż brakuje trochę informacji o preflight requests :). To dziwaczna i zaskakująca konstrukcja, którą warto opisać w tym temacie. Sam straciłem z godzinę nim się skapnąłem czemu Fx wysyła request z metodą OPTIONS kiedy ja chcę POST :)
Kamil Brenk 11 października 2011

Dzięki Piotrek ;) Racja, czytałem w dokumentacji o preflight requests i trochę to zagmatwane :) później uzupełnię wpis, żeby był kompletny.

Edit: done!
arhiman 29 grudnia 2011

Świetny opis! Co ciekawe jQuery w wersji > 1.5 (na pewno w wersji 1.7) już nie wysyła nagłówków OPTIONS. W wersji 1.3 biblioteki miałem problem z parami zapytań OPTIONS + POST/GET, a w wersji 1.7 już mam tylko jeden request.
Dodatkowo wystarczy nagłówek Access-Control-Allow-Origin po stronie serwera, do którego leci żądanie.
Nie do końca rozumiem, dlaczego nie ma teraz nagłówka OPTIONS, ale zapewne nowsza wersja biblioteki inaczej konstruuje zapytania XHR… ;)
Kamil Brenk 30 grudnia 2011

@arhiman: dzięki za komentarz :)

A to dziwne co piszesz, bo z tego co widzę dokumentacja CORS się nie zmieniła i przy Preflight requests dalej musimy pytać serwer o możliwość przyjęcia żądania (z wykorzystaniem żądania OPTIONS). W wolnej chwili muszę to przetestować.

Kamil Brenk Blog

PHP, JavaScript, SQL, HTML

Informacje o blogu

Blog o tworzeniu aplikacji na potrzeby sieci Web.

Praktyczne przykłady, porady i sztuczki. PHP, SQL, AJAX, JavaScript, HTML i pochodne.
Szukajka

Wpisz co chcesz wyszukać na stronie…
Kategorie
Moje serwisy
- Testy zawodowe
- Miłość, uczucia i seks
Czytane blogi

Cross-Domain JavaScript: CORS

Wymagania CORS

Obsługa CORS przez przeglądarki

Cross Browser Polyfills

Konfiguracja serwera dla żądań XHR

Credentialed requests

Preflight requests

Kilka słów podsumowania

Komentarze (5)

Kamil Brenk Blog

PHP, JavaScript, SQL, HTML

Informacje o blogu

Szukajka

Kategorie

Moje serwisy

Czytane blogi