Cross-domain AJAX (CORS/JSONP)

Om verzoeken tussen domeinen veilig toe te staan, heeft de webgemeenschap Cross-Origin Resource Sharing (CORS) ontwikkeld. Dit is de moderne, gestandaardiseerde manier om hiermee om te gaan.

CORS werkt doordat de server de browser expliciet laat weten dat bepaalde andere domeinen toegang tot zijn bronnen mogen hebben.

CORS wordt voornamelijk geconfigureerd op de server die de gegevens aanbiedt. De server stuurt speciale HTTP-headers mee in zijn antwoord om aan te geven welke origins zijn toegestaan.

De belangrijkste header is Access-Control-Allow-Origin. Deze geeft aan welke domeinen toegang tot de bron hebben.

• Access-Control-Allow-Origin: * (staat elk domein toe)
• Access-Control-Allow-Origin: https://yourdomain.com (staat slechts één specifiek domein toe)

Een CORS-verzoek doen aan de clientkant (met jQuery) verschilt vaak niet van een normaal AJAX-verzoek, zolang de server correct is geconfigureerd.

jQuery handelt de communicatie op browserniveau af. Je hoeft je aanroep van $.ajax() alleen naar de URL tussen domeinen te laten verwijzen.

Bij bepaalde "complexe" CORS-verzoeken voeren browsers een voorafgaand verzoek uit voordat ze het daadwerkelijke verzoek verzenden. Dit is een extra beveiligingsstap.

Een voorafgaand verzoek gebruikt de HTTP-methode OPTIONS om de server om toestemming te vragen. Als de server die verleent, verzendt de browser vervolgens het daadwerkelijke verzoek (bijvoorbeeld PUT, DELETE of verzoeken met aangepaste headers).

Voordat CORS breed werd toegepast, was JSONP (JSON with Padding) een veelgebruikte omweg voor verzoeken tussen domeinen, vooral voor oudere browsers of API's.

JSONP omzeilt het Same-Origin Policy door op creatieve wijze gebruik te maken van het feit dat browsers <script>-tags van elk domein mogen laden.

Zo werkt JSONP:

• Je maakt dynamisch een <script>-tag en stelt de src ervan in op de URL tussen domeinen.
• De server, die een JSONP-verzoek verwacht, verpakt zijn JSON-gegevens in een functieaanroep (de 'padding').
• De browser voert dit script uit en roept een globaal gedefinieerde functie op je pagina aan, met de gegevens als argument.

jQuery vereenvoudigt de implementatie van JSONP aanzienlijk. Je hoeft alleen dataType: "jsonp" op te geven in je aanroep van $.ajax().

jQuery handelt automatisch het maken van de dynamische <script>-tag, het genereren van een unieke callbackfunctienaam en het uitvoeren daarvan bij aankomst van het antwoord af.

Hoewel beide problemen met domeinoverschrijdende verzoeken aanpakken, hebben CORS en JSONP verschillende kenmerken:

• CORS: moderne standaard, gebruikt HTTP-headers, veilig, ondersteunt alle HTTP-methoden en vereist configuratie aan de serverkant.
• JSONP: oudere omweg, gebruikt <script>-tags, minder veilig, ondersteunt alleen GET-verzoeken, is een techniek aan de clientkant en vereist dat de server het antwoord inpakt.

Je hebt geleerd hoe je het Same-Origin Policy voor AJAX-verzoeken tussen domeinen kunt omzeilen!

• CORS is de moderne, veilige standaard en gebruikt HTTP-headers aan de serverkant voor toestemming.
• JSONP is een oudere, minder veilige omweg voor GET-verzoeken, waarbij dynamische <script>-tags worden gebruikt.

Geef waar mogelijk altijd de voorkeur aan CORS, omdat dit veiliger en flexibeler is. JSONP is voornamelijk bedoeld voor oudere systemen of specifieke situaties.