Bienvenue à Blogs CodeS-SourceS Identification | Inscription | Aide

Atteint de JavaScriptite Aiguë [Cyril Durand]

Expert ASP.net Ajax et WCF, Cyril Durand parle dans son blog de point techniques sur ASP.net, ASP.net Ajax, JavaScript, WCF et .net en général. Cyril est également consultant indépendant, n'hésitez pas à le contacter pour de l'assistance sur vos projets

Actualités

  • Blog de Cyril DURAND, passionné de JavaScript, Ajax, ASP.net et tout ce qui touche au developpement Web Client-Side.

    Consultant freelance, n'hésitez pas à me contacter pour vos projets .net : architecture, accompagnement, formation, ...

    View Cyril Durand's profile on LinkedIn
    hit counters

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.

Untitled

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.ResultIdea; 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.

Posted: mercredi 22 août 2007 12:15 par cyril
Ce post vous a plu ? Ajoutez le dans vos favoris pour ne pas perdre de temps à le retrouver le jour où vous en aurez besoin :

Commentaires

Pas de commentaires

Les commentaires anonymes sont désactivés

Les 10 derniers blogs postés

- SQL Server 2008 : Un livre en cours de préparation ! par SQL Server vu par Christian Robert le il y a 3 heures et 48 minutes

- IIS7 : à quel pool d'application correspond le processus w3wp.exe par Atteint de JavaScriptite Aiguë [Cyril Durand] le il y a 4 heures et 45 minutes

- PDC 2008 - J-14 ! par Nix's Blog le il y a 6 heures et 30 minutes

- [Silverlight] La version finale de Silverlight 2 sera disponible en téléchargement demain ! par Thomas Lebrun le il y a 8 heures et 23 minutes

- SharePoint 2007 : Professional Developers Conference 2008 par Philippe Sentenac [MVP SharePoint] le il y a 14 heures et 16 minutes

- [Silverlight] En attendant Silverlight 2 RTW par Blog Technique d'Audrey PETIT le 10-11-2008, 21:55

- Le nouveau Gojira, c’est pour lundi… par CoqBlog le 10-11-2008, 01:18

- SharePoint : nouvel article sur la mise en place des Scopes dans MOSS Searchs par Blog Technique de Romelard Fabrice le 10-10-2008, 17:52

- Hello CS par Le Blog de julz le 10-10-2008, 12:26

- MSDN/TechNet/Microsoft Days Tour 2008 à Lille les 13 et 14 Octobre ! par RedoBlog - The .NET Gentleman !!! le 10-10-2008, 09:35