Cross-domain en Javascript
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.
javascript json xml
29 mars 2007 à 10:19
Bonjour,
Pourrait-on avoir un exemple simple
avec JSON et le cross-domain?
Merci,
Tonino.
5 avril 2007 à 8:41
Tonino,
Je vais essayer d’écrire un petit exemple bientôt.
9 avril 2007 à 7:17
Salut Seb,
Merci pour ta réponse.
Quelques liens complémentaires:
Solution JSON :
http://www.xml.com/pub/a/2005/12/21/json-dynamic-script-tag.html
JSON and the Dynamic Script Tag: Easy, XML-less Web Services for JavaScript.
(fonctionne avec IE, Firefox, Opéra)
Solution proxy :
Avec Firefox :
http://developer.mozilla.org/fr/docs/Services_Web_XML:Acc%C3%A9der_%C3%A0_des_services_web_avec_Mozilla_en_utilisant_un_proxy_WSDL
Note :
Pour IE, je n’ai pas trouvé de solution proxy avec Javascript.
Si tu as quelques pistes, je suis preneur.
Cordialement,
Tonino.
9 mai 2007 à 2:27
Cette histoire d’image invisible m’inquiete.. concretement, en code HTML, ca donnerait quoi? c’est une balise IMG dont l’url serait par exemple un fichier php.. ?
j’aime bcp l’ajax pour sa vitesse, mais il pose le pb de ne pas pouvoir accéder à une page sur un domaine qu’on ne gere pas sois même.. donc, impossibilité d’accéder au crossdomain.xml..
Ce systeme d’image débloquerait cela?
15 mai 2007 à 19:02
Très intéressant ! des exemples m’aideraient également à y voir plus clair !
29 mai 2007 à 4:02
ha ben oui!! c’est ça!! apparament, c’est tout con, logique et j’ai l’impression que ca fonctionne cette histoire d’image! tellement con que je n’ai y ai jamais pensé.. mais en effet, on peut envoyer des datas de cette manière sans chargement de page, sans jscript ni rien.. trop cool!!
30 mai 2007 à 16:36
Ca m’interesse beaucoup cette histoire de JSON mais il me semble que les objets de type XMLHttpRequest en javascript qui permettrait d’envoyer des requetes au serveur distant n’est pas cross-domain. Si vous connaissez un autre moyen d’envoyer des requetes a un serveur distant pour en recuperer les reponses je suis interessé
17 août 2007 à 11:14
Bonjour à tous,
Je vois que toute cette histoire de cross-domain passionne les foules (moi le premier). Et ça se comprend !
Je vais essayer de me libérer un peu temps pour écrire un nouvel article avec des exemples concrets. Cela permettra à chacun de mieux comprendre comment ça fonctionne dans la pratique.
5 septembre 2007 à 22:01
Bonsoir,
Je viens de publier l’article tant attendu sur la mise en place des solutions cross-domain en Javascript. Je vous laisse le découvrir : http://blog.lecacheur.com/2007/09/05/cross-domain-en-javascript-par-lexemple.