Le weblogue de SeB

Il y a quelques temps, je vous avais présenté les différentes solutions
pour faire du cross-domain en Javascript.

Cet article a suscité beaucoup d’interrogations sur la mise en oeuvre. Alors
aujourd’hui, avec un peu de retard, je vais vous présenter l’implémentation
de ces astuces avec du code source !

Le proxy

Cet exemple se base sur l’API de recherche de Yahoo! en mode XML.

La fonction Javascript how_many() permet d’interroger le proxy. La fonction Javascript count_results() permet d’afficher le nombre de résultats disponibles pour la recherche effectuée.

Le fichier proxy.php, qui doit être hébergé sur notre serveur se contente de récupérer l’adresse du site à interroger puis il effectue la requête et retourne le résultat.

Le code JavaScript

function count_results(httpRequest) {

 if (httpRequest.readyState == 4) {

 	if (httpRequest.status == 200) {

 		var xmldoc = httpRequest.responseXML;

 		var root_node = xmldoc.getElementsByTagName('ResultSet').item(0);

 		alert(root_node.getAttribut("totalResultsAvailable"));

 	} else {

 		alert('Un problème est survenu avec la requête.');

 	}

 }

}

function how_many() {

 if (window.XMLHttpRequest) { // Mozilla, Safari, ...

 	httpRequest = new XMLHttpRequest();

 } else if (window.ActiveXObject) { // IE

 	httpRequest = new ActiveXObject("Microsoft.XMLHTTP");

 }

 httpRequest = new XMLHttpRequest();

 httpRequest.overrideMimeType('text/xml');

 httpRequest.onreadystatechange = count_results;

 httpRequest.open('GET','proxy.php',true);

 httpRequest.send("url=http://api.search.yahoo.com/ImageSearchService/V1/imageSearch?appid=YahooDemo&query=Madonna&output=xml");

}

Le code du proxy (proxy.php)

<?php

$data = open($_REQUEST['url']);

header("Content-Type: text/xml");

echo $data;

?>

Les images invisibles

Cet exemple ne fait qu’envoyer des informations (”hello_world”) à un service distant (”anydomain.com”).

Le code JavaScript

var i = new Image();

var url = "url=http://www.anydomain.com?data=hello_world";

i.src = encode_utf8(url);

document.body.appendChild(i);

JSON

Cet exemple se base également sur l’API de recherche de Yahoo! mais en mode JSON. Ceci permet de se passer d’un proxy.

Les fonctions Javascript ont le même rôle que dans l’exemple avec un proxy.

Le code JavaScript

function count_results(obj) {

 alert(obj.ResultSet.totalResultsAvailable);

}

function how_many() {

 var s = document.createElement("script");

 s.type = "text/javascript";

 s.src="http://api.search.yahoo.com/ImageSearchService/V1/imageSearch?appid=YahooDemo&query=Madonna&output=json&callback=count_results";

 document.body.appendChild(s);

}

Voilà ! Vous pouvez constater que ses méthodes sont très simples. Je vous laisse imaginer toutes les possibilités qui s’offrent à vous…

Introduction

Qu’est-ce que le cross-domain ? Un script Javascript est dit cross-domain lorsqu’il est hébergé sur un serveur avec un nom de domaine bien précis et qu’il fait des requêtes HTTP vers d’autres domaines.

Par défaut, ce comportement est interdit par les navigateurs butineurs. Non pas pour pourrir la vie des développeurs, mais pour protéger celle des utilisateurs. Cependant il existe quelques techniques qui permettent de contourner le problème.

Solutions

Le proxy

La première méthode consiste à mettre en place sur son propre serveur un proxy. Le Javascript interroge le proxy qui lui-même va interroger le serveur distant qui peut être sur un autre domaine. Cette solution n’est pas idéale car elle oblige à mettre en place ce fameux proxy. De plus dans le cadre la distribution d’une API Javascript, la technologie utilisée côté serveur par les utilisateurs sur service n’est pas maîtrisée.

Notons tout de même qu’elle a l’avantage de pouvoir mettre en place un système de cache (au niveau du proxy) pour améliorer les performances^[1].

Les images invisibles

Cette astuce consiste à ajouter la référence d’une image dans le document HTML dont l’URL pointe vers le serveur distant. Bien entendu cette image est invisible et l’URL pointe vers un service et non vers une image. Si je ne me trompe pas, cette astuce est utilisé par Google Analytics.

La contre-partie est qu’il n’est pas possible de récupérer des informations. Cette méthode a ses limitations puisqu’elle ne sert qu’à envoyer des données à un serveur distant et non à en récupérer.

JSON

Qu’est-ce que JSON ? C’est un format de structure des données. Et il a l’avantage^[2] d’utiliser la notation des objets JavaScript.

Cette technique consiste à ajouter la référence d’un script dans le document HTML dont l’URL pointe vers le serveur distant. Le serveur doit alors retourner son résultat sous le format JSON. Ensuite à la réception des données, une fonction de callback Javascript exécute le traitement des informations retournées par le serveur.

Cette solution nécessite que le serveur distant puisse retourner son résultat dans le format JSON. Néanmoins, de plus en plus de services tels que ceux de Yahoo! ou Google proposent de spécifier le format de retour^[3] et même la fonction de callback !

Cette méthode possède ses limitations. Cependant, dans le cadre de la mise en place d’un service web avec la mise à disposition d’une API Javascript, cette technique se révèle être terriblement efficace ! Elle permet donc d’envoyer des informations à un serveur distant et de recevoir des données en retour.

Conclusion

Chaque méthode a ses avantages et ses inconvénients. Tout dépend du contexte. Il faut retenir que pour seulement envoyer des données la méthode des images invisibles suffi. Alors que pour récupérer des informations, il faut utiliser selon les cas un proxy ou JSON.

Notes

[1] Et économiser de la bande passante.

[2] Pour notre problème.

[3] En général XML ou JSON.