23 Mar 2016

XDomain

Pourquoi XDomain ?

Les requêtes HTTP Cross-Domain (requêtes pour des ressources localisées sur un domaine différent de celui à l’origine de la requête) initiées via du JavaScript sont sujettes à des restrictions pour des raisons de sécurité. C’est pourquoi le W3C à émis une recommandation pour le partage de ressource entre site (Cross-Site Ressource Sharing ou CORS) cette spécification utilise le container XMLHttpRequest pour les requête API. Il fournit un moyen aux serveurs web de contrôler les accès en mode cross-domain et ainsi d’effectuer des transferts de données sécurisés.

IE8 et IE9 ne supportant pas le Cross-Domain via XMLHttpRequest, Jaime Pillora a créé une solution appelée XDomain laquelle fonctionne comme un proxy Javascript pour les requêtes API. La limite de cette solution étant que vous devez avoir la main sur l’API à consommer (ou quel implémente déjà XDomain) et évidement l’application JavaScript. Une autre solution serait d’utiliser directement l’objet XDomainRequest disponible sur IE8 et IE9, l’avantage de la solution XDomain étant que vous n’avez pas à gérer les appels en XMLHttpRequest et XDomainRequest suivant le navigateur.

Comment ça marche ?

XDomain

  1. XDomain crée une iframe sur votre application (le master) vers le proxy de l’api (l’esclave).
  2. L’application communique avec l’API à travers cette iframe en utilisant postMessage, ce qui crée un communication inter-domaine
  3. L’api crée une réponse XMLHttpRequest au nom de l’application et la retourne

L’interception XHR se faisant de façon transparente via XHook, développé également par Jaime Pilora.

Vous trouverez XDomain sur le GitHub de Jaime Pilora: https://github.com/jpillora/xdomain

Comment mettre en place ?

Côté API :

L’api doit retourner une page proxy.html, le plus simple étant de la créer à la racine du site. Cette page proxy.html devant simplement contenir une balise script qui référence le JavaScript de XDomain et un attribut”data-master”, celui-ci servant à filtrer les domaine autorisé. La valeur “*” autorisant n’importe quel domaine, elle est fortement déconseillé. Si vous avez plusieurs domaine à autorisé, vous pouvez le faire via une configuration en JavaScript en utilisant “xdomain.master” (voir l’exemple dans la partie ‘Côté Application’).

Exemple:

Côté Application :

Dans la page ayant besoin de faire les appels à l’api ou dans le layout. Il faut référencer XDomain et configurer l’api (esclave) à utiliser. Dans l’exemple ci-dessous, nous le faisons en JavaScript afin de montrer comment en configurer plusieurs api, si vous n’en avez qu’une le plus simple reste à le faire en définissant l’attribut “data-slave”. La propriété slave servant à définir le proxy a utilisé.

Exemple:

 

 

Share