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.

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

    View Cyril Durand's profile on LinkedIn
    hit counters


    Expertise Commerce server et BizTalk

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

- Merci par Blog de Jérémy Jeanson le 10-01-2019, 20:47

- Office 365: Script PowerShell pour auditer l’usage des Office Groups de votre tenant par Blog Technique de Romelard Fabrice le 04-26-2019, 11:02

- Office 365: Script PowerShell pour auditer l’usage de Microsoft Teams de votre tenant par Blog Technique de Romelard Fabrice le 04-26-2019, 10:39

- Office 365: Script PowerShell pour auditer l’usage de OneDrive for Business de votre tenant par Blog Technique de Romelard Fabrice le 04-25-2019, 15:13

- Office 365: Script PowerShell pour auditer l’usage de SharePoint Online de votre tenant par Blog Technique de Romelard Fabrice le 02-27-2019, 13:39

- Office 365: Script PowerShell pour auditer l’usage d’Exchange Online de votre tenant par Blog Technique de Romelard Fabrice le 02-25-2019, 15:07

- Office 365: Script PowerShell pour auditer le contenu de son Office 365 Stream Portal par Blog Technique de Romelard Fabrice le 02-21-2019, 17:56

- Office 365: Script PowerShell pour auditer le contenu de son Office 365 Video Portal par Blog Technique de Romelard Fabrice le 02-18-2019, 18:56

- Office 365: Script PowerShell pour extraire les Audit Log basés sur des filtres fournis par Blog Technique de Romelard Fabrice le 01-28-2019, 16:13

- SharePoint Online: Script PowerShell pour désactiver l’Option IRM des sites SPO non autorisés par Blog Technique de Romelard Fabrice le 12-14-2018, 13:01