JSONP : Scripts pour les requêtes de données inter-domaines
Les navigateurs et les applications Web disposent de nombreuses fonctionnalités et concepts pour protéger les utilisateurs et leurs données des cyberattaques. L'un d'entre eux est la Same-Origin-Policy (SOP) que l’ancien navigateur Netscape a introduit en 1996 avec l'implémentation du JavaScript. Cette charte empêche les langages de script côté client tels que JavaScript et ActionScript, ainsi que les langages de feuilles de style tels que CSS d'accéder aux objets (graphiques, vidéos, etc.) provenant d'un autre site ou URL.
Cependant, les limites fixées par la Same-Origin-Policy ne sont pas avantageuses pour tous les types de projets Web, et peuvent même dans certains cas être gênantes – notamment dans les applications Web qui reposent sur une transmission de données asynchrone entre navigateur et serveur (par exemple sur une base Ajax). De tels projets nécessitent des solutions pour contourner la directive, comme la méthode JSONP de JSON. C'est précisément ce que nous allons vous expliquer de manière détaillée dans les sections suivantes.
Qu'est-ce que JSONP ?
JSONP (également écrit JSON-P) est une méthode permettant d’envoyer des données structurées au format JSON entre différents domaines. L'acronyme signifie JSON (JavaScript Object Notation) with Padding (avec formatage). Pour contourner la politique de la même origine lors de la demande de fichiers d'autres domaines, JSONP n'utilise pas l'objet « XMLHttpRequest » comme du code JSON ordinaire, mais l'élément « script » incluant un appel de fonction. Contrairement à d'autres fichiers, les scripts peuvent être transférés d'un domaine à l'autre sans violer la SOP.
JSONP a été inventé en 2005 par le développeur de logiciels Bob Ippolito et intégré ces dernières années dans de nombreux frameworks Web 2.0, tels que Dojo Toolkit, jQuery ou Google Web Toolkit en remplacement du JSON ordinaire.
JSONP n'est que l’une des nombreuses méthodes permettant les transferts de données inter-domaines. Avec Cross-Origin Resource Sharing (CORS), il existe un mécanisme similaire qui n'est pas lié à JSON, mais qui fonctionne avec des en-têtes HTTP spéciaux.
Comment fonctionne JSONP ?
JSONP résout le problème de la Same-Origin-Policy en utilisant l'élément <script>. N'importe quel domaine peut être renseigné dans l'attribut « src » de cet élément. Par ailleurs, la charte ne s'applique pas ici. Cet attribut peut également être utilisé pour marquer les URL qui appartiennent à un domaine étranger et pour renvoyer le code JSON et d'autres fichiers. Dans un tel cas, le script lui-même sert exclusivement de fournisseur de services qui transmet la requête JSONP au serveur Web respectif sans avoir d'effet spécifique. Pour que le client puisse traiter les données plus tard, le serveur les regroupe sous forme de paramètres dans une fonction JavaScript prédéfinie dans le navigateur Web et communiquée au serveur dans la chaîne de requêtes de l'URL.
L'exemple suivant illustre le fonctionnement de JSONP :
<script type="text/javascript" < codesnippet></script>
src="http://not-origin-url.com/getjson?jsonp=exampleCallback">Si ce simple script JSONP est intégré dans le code HTML d'un site Web et exécuté par n'importe quel client, les données JSON sont extraites du domaine étranger "not-origin-url.com" ("getjson"). La chaîne de requête « ?jsonp=exampleCallback » indique au serveur contacté qu’il s’agit d’une requête JSONP. En outre, il reçoit l’information selon laquelle il doit envoyer les données demandées comme paramètre de la fonction JavaScript "exampleCallback".
Le serveur génère alors le code JavaScript correspondant, y compris les informations demandées en tant que paramètre - dans le cas de cet exemple, une paire nom-valeur - et le renvoie au client :
exampleCallback( {"name":"test", "value":1} );L'appel de fonction est alors exécuté par le navigateur comme s'il était répertorié directement dans le code HTML de la page d’origine. Cela permet au navigateur de traiter les données extraites de l'URL étrangère.

