Origins, JSONs and Policies

Cześć!

W tym wpisie postaram się przybliżyć wam czym jest JSONP (JavaScript Object Notation with Padding), jak go używać i w jakich sytuacjach może się przydać.
Wyobraźmy sobie sytuację, w której aplikacja stojąca w domenie A próbuje skomunikować się z zasobem znajdującym się w domenie B, korzystając z dobrodziejstw AJAX (asynchronicznych zapytań do zasobu).

Normalnie, zapytanie z domeny A do domeny B zostanie odrzucone, a my otrzymamy komunikat podobny do: XMLHttpRequest cannot load http://XXXXXXX.com. Origin http://localhost:8080 is not allowed by Access-Control-Allow-Origin. Jednym ze sposobów na umożliwienie takiej komunikacji byłaby zmiana ustawień po stronie serwera w domenie B, w taki sposób, żeby dopuszczał on komunikację z domeny A.
Co jednak w przypadku kiedy nie mamy możliwości zmiany konfiguracji serwera?

JSON na ratunek!

JSONP to metoda przesyłania danych bez martwienia się o problemy związane z CORS (Cross-origin resource sharing).
W związku z tym, że tagi script nie są objęte działaniem polityki wspólnego źródła (ang. same-origin policy), możemy je wykorzystać do pobrania zasobów z innej domeny.
Aby to zrobić należy opakować adres, pod który chcemy wykonać zapytanie w tag script i podać nazwę funkcji wywołania zwrotnego. Zostanie ona uruchomiona z jednym parametrem, którym będzie odpowiedź na zadane zapytanie.
W praktyce może to wyglądać np. tak: <script src="http://XXXXXXX.com/resource?callback=test"></script> Taki fragment należałoby osadzić w kodzie HTML aplikacji, upewniając się jednocześnie, że funkcja test została wcześniej zdefiniowana.

A w prawdziwym świecie?

Ano w prawdziwym świecie, ręczne wtłaczanie tagów script do kodu aplikacji i pilnowanie, czy funkcja wywołania zwrotnego jest już zdefiniowana byłoby dość uciążliwe.
Oczywiście napisanie funkcji, która robiłaby to wszystko za nas nie byłoby aż tak skomplikowane i czasochłonne jak mogłoby się z początku wydawać, ale… ktoś to już zrobił.
Całe szczęście, że twórcy bibliotek i frameworków nie zapominają o tej technice. I tak użycie JSONP z jQuery wyglądałoby następująco: $.ajax({ url: 'https://finance.google.com/finance/info?client=ig&q=NASDAQ:GOOGL', jsonp: "callback", dataType: "jsonp", data: {}, // Work with the response success: function( response ) { console.log( response ); // server response } }); * fragment bezczelnie zerżnięty z tego posta na stacku.
W tym fiddlu możecie porównać jak zadziała zapytanie gdy jako “dataType” raz ustawimy “jsonp” a za drugim razem “json”.

JSONP nie jest jednak lekiem na całe zło. Ta technika ma swoje wady, które zawsze należy mieć z tyłu głowy.
Po pierwsze, w związku z brakiem klasycznej odpowiedzi serwera, ciężej jest napisać sensowną obsługę ewentualnych błędów.
Ponadto powinniśmy pamiętać o bezpieczeństwie. Zasób do którego sięgamy, może zwrócić dowolny kod JS. Nie możemy w związku z tym mieć pewności, czy to co wróci będzie bezpieczne dla naszej aplikacji.
Tym nie mniej, polecam zapoznać się z tą techniką. Może któregoś dnia skrócić nieco wasze męki podczas wali z polityką wspólnego źródła
a na dzisiaj to tyle!
Podziel się:

Leave a Reply

Your email address will not be published. Required fields are marked *