Definicija

Cross Domain Data Request predstavlja specifičan zahtev za podacima, jer se podaci ne nalaze na domenu (protokolu ili portu) odakle potiče i sam zahtev.

cors

Podrazumevano ponašanje servera je da ne dozvoljavaju pristup podacima sa drugih servera, a glavni razlog ove zabrane je mogućnosti da se vrše napredni zahtevi (POST, PUT i DELETE itd.) koji mogu dovesti do raznih bezbednosnih problema. Stoga su i AJAX zahtevi podrazumevano zabranjeni, a to ogranicenje je poznato pod nazivom the same origin policy (srp. polisa zajedničkog porekla).
Medjutim neke vrste resursa ipak ne podležu ovoj zabrani, jer im pregledači podrazumevano dozvoljavaju pristup. Resurse koji se ne nalaze na domenu odakle potiče i sam zahtev je dozvoljeno pozvati jedino kroz “src” ili “href” atribute sledećih HTML elemenata: <script>, <img>, <video>, <iframe>.

Postoje rešenja i za zahteve kod kojih važi zabrana “the same origin policy“, ali to podrazumeva korišćenje specifičnih mehanizama. Upravo o tim mehanizmima je reč u ovom članku.

Prevazilaženje zabrane “the same origin policy”

a) Cross-Origin Resource Sharing (CORS)

Jedan od načina da se prevazidje zabrana “the same origin policy” je taj da server kome je poslat zahtev dozvoli Cross Domain DATA Request. U narednom delu je opisana komunikacija izmedju servera, a samim tim i postupak dobijanja dozvole za pristup podacima.

Cela komuikacija kreće od browser-a koji generiše i šalje zahtev. U zaglavlju zahteva postoji deo pod nazivom “Origin”. Ovo svojstvo definiše url adresu domena sa kojeg stiže zahtev:

Ovaj podatak je bitan jer na osnovu nje server ima informaciju odakle dolazi poziv i da li ima pristup serveru. Praktično se cela komunikacija izmedju servera zasniva na razmeni specifičnih zaglavlja u zahtevima (eng. request header). Dozvola za pristup podacima sa drugog servera stiže u zglavlju odgovora kroz deo pod nazivom “Access-Control-Allow-Origin”. Ovo svojstvo može da sadrži dva tipa dozvole:

  1. Dozvola pristupa samo za specifični izvor (domen).
  2. Dozvola pristupa za sve izvore korišćenjem wildcard *.
    Ova dozvola se koristi kod javnih resursa kojima mogu svi da pristupe npr. fontovi, biblioteke…).

NAPOMENA
Ako se vrednosti u Access-Control-Allow-Origin ne poklapaju sa vrednosti Origin-a ili server ne odgovori sa ovim zaglavljem, pregledač obustavlja poziv i vraća grešku.

Primer

Ovde je prikazan deo serverskog koda koji omogućava svim izvorima pristup podacima korišćenjem wildcard *

b) JSONP

JSONP je drugi način da se dobiju podaci sa servera koji nije isti kao server odakle potiče zahtev. Ovaj mehanizam se zasniva na činjenici da je pristup eksternom serveru dozvoljen kroz “src” atribut <script> taga. Objašnjenje JSONP koncepta je najlakše kroz primere koda, pa ćemo početi od jednostavnog koda koji se sastoji iz dva script taga. U prvom delu se nalazi funkcija dataHandler() koja štampa ono što joj se prosledi kroz parametar, dok u drugom delu pozivamo dataHandler()

Uvek postoji mogućnost da deo sa pozivanjem funcije izvučemo u odvojeni fajl npr. datahandler.js pa ga naknadno ubacimo kroz link.

Da bi ovaj fajl bio dostupan potrebno ubacimo link do tog fajla u src atribut. Pošto je dozvoljeno da se kroz “src” atribut poziva fajl i sa nekog drugog servera, taj link praktično postaje REST endpoint.

Ako ceo script tag koji poziva funkciju sa JSON parametrom generišemo dinamičiki, onda bi kod ovako izgledao:

Zatim u src atributu možemo da definišemo koja je callback funkcija zadužena za ovaj fajl, tako što u nastavku linka prosledimo ?callback=”dataHandler”:

Iz prethodnog zaključujemo da je potrebno JSON objekat staviti da bude parametar neke callback funkcije. Za ovo potrebu možemo da koristimo online servis https://json2jsonp.com koji prebacuje JSON objekat u funkciju čiji parametar je taj JSON objekat.

Primer

U ovome primeru želimo da “dohvatimo” JSON objekat sa url adrese čiji domen nije isti kao domen odakle šaljemo AJAX zahtev. Za potrebe ovog primera JSON objekat je generisan koristeći online resurs myjson.com. REST API endpoint koji dobijamo preko ovog online servisa je: “https://api.myjson.com/bins/amz5t”. Medjutim ova se adresa ne nalazi na istom domenu sa koga ćemo da pošaljemo zahtev. Stoga je potrebno da koristimo JSONP mehanizam.
To podrazumeva da ovaj JSON objekat predstavimo kao parametar neke callback funkcije. Za prebacivanje JSON objekta u parametra funkcije koristimo sledeći online servis: “https://json2jsonp.com”. Ovaj servis nakon obrade našeg JSON objekta generiše URL adresu: “https://json2jsonp.com/?url=https://api.myjson.com/bins/amz5t&callback=dataHandler”. Sada kada imamo sve neophodne podatke, deo vezan za JSONP mehanizam bi izgledao ovako:

A ceo kod primera možete da vidite ovde:

See the Pen JSONP by Web programiranje (@chos) on CodePen.

Podelite:

Ostavite komentar