AJAX interdomaines (CORS/JSONP)

Lorsque votre site tente de récupérer des données depuis un autre site, on parle de requête AJAX inter-domaines. Cela peut souvent s’avérer délicat !

Par défaut, les navigateurs web appliquent une règle de sécurité qui empêche une page web d’envoyer des requêtes vers un domaine différent de celui dont elle est issue. Cette règle protège vos données.

La règle de sécurité que nous venons de mentionner s’appelle la politique de même origine (SOP). Il s’agit d’une fonctionnalité fondamentale de sécurité des navigateurs.

SOP indique qu’un navigateur web n’autorise les scripts contenus dans une première page web à accéder aux données d’une seconde page web que si les deux pages ont la même origine (domaine, protocole et port).

• Exemple : une page provenant de mywebsite.com ne peut pas récupérer directement des données depuis api.anotherdomain.com.

Pour autoriser les requêtes inter-domaines en toute sécurité, la communauté du Web a développé le partage de ressources entre origines (CORS). C’est désormais la méthode standard et moderne pour gérer ce cas.

CORS fonctionne en permettant au serveur d’indiquer explicitement au navigateur que certains autres domaines sont autorisés à accéder à ses ressources.

CORS se configure principalement sur le serveur qui fournit les données. Le serveur envoie des en-têtes HTTP spéciaux dans sa réponse afin d’indiquer quelles origines sont autorisées.

L’en-tête principal est Access-Control-Allow-Origin. Il précise quels domaines peuvent accéder à la ressource.

• Access-Control-Allow-Origin: * (autorise tous les domaines)
• Access-Control-Allow-Origin: https://yourdomain.com (n’autorise qu’un domaine précis)

Côté client, avec jQuery, effectuer une requête CORS ne diffère souvent pas d’une requête AJAX classique, à condition que le serveur soit correctement configuré.

jQuery gère les communications au niveau du navigateur. Il vous suffit de diriger votre appel $.ajax() vers l’URL inter-domaines.

Pour certaines requêtes CORS « complexes », les navigateurs effectuent une requête de pré-vérification avant d’envoyer la requête réelle. Il s’agit d’une étape de sécurité supplémentaire.

Une requête de pré-vérification utilise la méthode HTTP OPTIONS pour demander l’autorisation au serveur. Si celui-ci l’accorde, le navigateur envoie ensuite la requête réelle, par exemple PUT, DELETE ou une requête comportant des en-têtes personnalisés.

Avant l’adoption généralisée de CORS, JSONP (JSON avec remplissage) était une solution courante pour contourner les restrictions des requêtes inter-domaines, notamment avec les anciens navigateurs ou certaines API.

JSONP contourne la politique de même origine en exploitant ingénieusement l’autorisation accordée par les navigateurs pour charger des balises <script> depuis n’importe quel domaine.

Voici comment fonctionne JSONP :

• Vous créez dynamiquement une balise <script> et définissez son attribut src avec l’URL inter-domaines.
• Le serveur, qui s’attend à recevoir une requête JSONP, enveloppe ses données JSON dans un appel de fonction, appelé « remplissage ».
• Le navigateur exécute ce script et appelle une fonction définie globalement dans votre page, en lui transmettant les données comme argument.

jQuery simplifie considérablement l’implémentation de JSONP. Il vous suffit de spécifier dataType: "jsonp" dans votre appel $.ajax().

jQuery se charge automatiquement de créer la balise <script> dynamique, de générer un nom de fonction de rappel unique et de l’exécuter lorsque la réponse arrive.

Bien que ces deux mécanismes répondent aux problèmes inter-domaines, CORS et JSONP ont des caractéristiques distinctes :

• CORS : standard moderne, utilise des en-têtes HTTP, sécurisé, prend en charge toutes les méthodes HTTP et nécessite une configuration côté serveur.
• JSONP : ancienne solution de contournement, utilise des balises <script>, est moins sécurisé, accepte uniquement les requêtes GET, fonctionne côté client et nécessite que le serveur enveloppe la réponse.

Vous avez appris à contourner la politique de même origine pour les requêtes AJAX inter-domaines !

• CORS est le standard moderne et sécurisé : il s’appuie sur des en-têtes HTTP côté serveur pour accorder les autorisations.
• JSONP est une ancienne solution de contournement, moins sécurisée, destinée aux requêtes GET et utilisant des balises <script> dynamiques.

Privilégiez toujours CORS lorsque cela est possible, car cette solution est plus sécurisée et plus flexible. JSONP est principalement réservé aux systèmes anciens ou à certains cas particuliers.