Logo_jQuery

Utiliser JSONP avec jQuery

Flattr this!

Une réalité du travail dans le monde du commerce, que ce soit "B2B" ou "B2C" (skills bullshit bingo et anglicismes de merde + 1), c'est que vous vous retrouvez en général vite à lier des partenariats et avoir besoin de collecter des infos depuis leurs média à eux. Dans mon cas, j'avais besoin d'échanger des données depuis d'autres sites, notamment pour prendre des demandes clients (affiliation). Hors nous connaissons tous la règle dite de

Same Origin Policy

Cette règle interdit tout échange via XHR sur un autre domaine que celui où est exécuté le script. Pour contrer ça, il existe JSONP, jQuery propose évidemment son exploitation. Tout comme ExtJS, Mootools, qooxdoo, ...

JSONP

JSONP, ça veut dire tout simplement JSON Padding. Ou encore tout simplement, du JSON encapsulé.

Comment ça marche ?

C'est très simple. Au lieu d'aller charger du JSON, on va demander à charger un script. Aussi bêtement que ça oui. Les scripts ne sont pas concernés par la same origin policy, c'est pour ça que vous pouvez d'ailleurs utiliser des CDN.

L'astuce suivante permet ensuite d'exploiter les données transférées via JSONP. Vu que vous chargez un script et non pas un JSON, vos donnes récupérées seront vues comme une déclaration d'un objet JSON non affectée.

Pour savoir comment parer à ce problème, regardons les en-têtes de la requête émise par jQuery :

http://unautredomaine/fichier?callback=jQuery18307094323269557208_1386924517789

Vous voyez ce paramètre bonus que vous n'avez pas demandé vous même ?

Il est là pour indiquer au serveur qu'elle fonction appeler dans sa réponse. Du coup votre réponse sera :

jQuery18307094323269557208_1386924517789({"status":"success", "message", "Trop cool, la same origin policy contournée !", "runtime":0.086877822875977});

Hein ?

Oui. En JSONP, vous ne renvoyez pas du juste JSON mais un appel de fonction avec du JSON comme seul et unique paramètre.
A la fin de son chargement, le script sera interprétée, la fonction en question exécutée et jQuery se chargera comme d'habitude d'appeler vos callbacks en leur transmettant les données reçues.

C'est aussi bête que ça mais particulièrement efficace. Je vous incite à lire la doc de jQuery sur le sujet. Elle n'est pas très longue et vous donnera quelques informations sur les capacités de cette méthode non évoquées ici. Comme par exemple, pouvoir choisir le nom de la fonction transmise.

Flattr this!

A propos de Mathieu

Ingénieur développeur web dans la vente par correspondance B2B, adepte de nouvelles technologies et d'innovation. Vous pouvez aussi me retrouver sur Twitter @mathrobin
Cette entrée a été publiée dans jQuery, avec comme mot(s)-clef(s) , , , , . Vous pouvez la mettre en favoris avec ce permalien.
  • http://www.geek-directeur-technique.com Amaury

    La technique du JSONP est pratique, mais il est aussi possible de gérer les choses côté serveur, en utilisant les bons en-têtes HTTP.

    Exemple de code PHP :
    header('Access-Control-Allow-Origin: *');
    header('XDomainRequestAllowed: 1');

    • http://www.mathieurobin.com/ Mathieu

      Pas faux, c’est une des x façons de régler le problème :)

  • http://www.yrezgui.com Yacine Rezgui

    Je pense que le JSONP est limité et a quelques soucis de sécurité (http://security.stackexchange.com/a/23439). Pourquoi pas du Access-Control-Allow-Origin si disponible sinon un proxy à l’ancienne ?

    • http://www.mathieurobin.com/ Mathieu

      Parfois tu as besoin de beaucoup de souplesse. Soit comme l’a suggéré Amaury, tu utilises Access-Control-Origin, mais ça t’imposes d’ouvrir à tous, donc pas de gain réel, soit tu ne l’ouvres pas à tous mais dans ce cas, tu dois avoir un contrôle total et temps réel de tous les sites autorisés à utiliser ton API. Et c’est là que le bas blesse, c’est que nous, c’est un script à dispo plus ou moins de n’importe qui, donc peu de contrôle dessus. Les gens achètent une clé d’API auprès de nos commerciaux et installent leurs scripts. Finalement, c’était plus simple techniquement de passer par un truc hyper ouvert.

  • Emmanuel

    La méthode via le header est efficace, et encore mieux quand c’est gérée via htaccess plutôt qu’en php.
    Et pour être complet, utiliser la specs CORS http://www.html5rocks.com/en/tutorials/cors/.

    • http://www.mathieurobin.com/ Mathieu

      Ouep, ça on est d’accord, mais ça sera l’occasion d’un autre billet de blog. Je voulais présenter une technique simple que j’ai beaucoup utilisé. Après le htaccess n’est pas vraiment la meilleure des solutions. Ne serait-ce que pour une question de performances

Articles liés