JSONP : comment faire des requete JSON cross-domain
Problème cross-domain avec XMLHttpRequest
Ajax (Asynchronous JavaScript And Xml) permet de faire des requêtes HTTP en JavaScript par l'intermédiaire de l'objet XMLHttpRequest. Pour des raisons de sécurité Ajax ne permet pas de faire des requêtes cross-domain, c'est à dire des requêtes autres que sur le domaine courant. Par exemple si l'adresse de votre page est www.exemple.com/mapage.html, vous pouvez faire une requête sur www.exemple.com/toto.html mais pas sur www.sample.com/toto.html ni même sur sample.exemple.com/toto.html.
Pour palier à ce problème il existe de nombreuses solutions, la plus courante est surement d'utiliser un bridge c'est à dire demander à son serveur de faire la requête vers l'autre serveur. Voici schématiquement ce que cela donne.
Niveau sécurité cette solution est correct, car on contrôle totalement la réponse que notre serveur va nous envoyer par l'intermédiaire du bridge. Par contre niveau performance c'est couteux puisque cette solution double le trafic réseau.
La solution JSONP
JSON (JavaScript Object Notation (prononcé "Jason")) est un format d'échange de données proche du XML mais beaucoup plus simple à parser. J'ai déjà parlé de JSON ici : JSON : regardons en détail de quoi il s'agit, les spécifications sont disponible sur son site dédié : www.json.org
JSONP (JSON with Padding) est une technique qui permet de récupérer un flux JSON autre que sur son serveur sans limitation de cross-domain. Comment ? L'astuce est en fait simplissime. Une page peut contenir des balises script qui viennent d'autre domaine, on peut ainsi rajouter du script qui ne vient pas de son propre domaine. L'idée de JSONP est d'inclure un fichier JavaScript provenant d'un autre domaine qui va exécuter une fonction avec le json en paramètre.
Imaginons que notre client veuille obtenir des informations provenant du domaine www.sample.com. Pour cela il faut créer dynamiquement une balise script qui télécharge le fichier www.sample.com/jsonp/toto.js. Ce fichier contiendra le code suivant :
// www.sample.com/jsonp/toto.js
ws_callback({x:3, y:4})
Dans votre page il vous faut alors une fonction ws_callback qui récupérera les données du domaine sample.com
Exemple d'utilisation de JSONP
Yahoo permet d'utiliser JSONP avec ces API de recherche, tout est expliqué sur cette page : http://developer.yahoo.com/common/json.html. A partir de là je me suis fait une petite page de démo utilisant jsonp, pour voir cette page c'est ici : démonstration de jsonp avec les API Yahoo
Voici le code javascript de la page:
window.onload = function(){
var tbSearch = document.getElementById('tbSearch');
document.getElementById('btn1').onclick = function(){
var s = document.createElement('script');
s.src = 'http://search.yahooapis.com/ImageSearchService/V1/imageSearch?'
s.src += 'appid=YahooDemo&output=json&callback=callBackResult&query=' + tbSearch.value;
s.type = 'text/javascript';
document.body.appendChild(s);
}
}
var callBackResult = function(results){
var responseElmt = document.getElementById('response');
responseElmt.innerHTML = '';
var totalResult = document.createTextNode('Nombre total de résultats : ' +
results.ResultSet.totalResultsAvailable);
responseElmt.appendChild(totalResult);
var ul = document.createElement('ul');
for(var i = 0; i < results.ResultSet.Result.length; i++){
var result = results.ResultSet.Result
;
var li = document.createElement('li');
var link = document.createElement('a');
link.href = result.ClickUrl;
var img = document.createElement('img');
img.src = result.Thumbnail.Url;
img.title = result.Title;
link.appendChild(img);
li.appendChild(link);
ul.appendChild(li);
}
responseElmt.appendChild(ul);
}
Cette page fonctionne en pure HTML/JavaScript, lorsque vous faites une recherche il n'y a aucune interaction avec mon serveur, vous dialoguez seulement avec yahoo!.
Faire une requête jsonp nécessite très peu de code, mais attention cela pose un problème de sécurité, puisque vous donnez la possibilité à un autre serveur d'inclure son propre code JavaScript dans la page, il faut donc faire très attention avant d'utiliser jsonp.