Exemple d'AJAX cross-domaine
Et sa mauvaise gestion par IE 8 et 9 et Opera 10.50

Le , par Lcf.vs, Membre éprouvé
Bonjour,

Développant dans une optique portable, je me suis aperçu qu'IE 8, IE 9 et Opera 10.50 ne semblent pas gérer complètement une équivalence de la fonction XMLHttpRequest level 2 offerte par les autres navigateurs.

En effet, avec ces navigateurs, il est actuellement impossible de faire une requête cross-domain sécurisée depuis une page locale (entendez par-là, enregistrée n'importe où sur le poste client).

Voici le bout de code dont je me suis inspiré:

Code : Sélectionner tout
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script type='text/JavaScript'> 
function getXDomainRequest() { 
 var xdr = null; 
  
 if (window.XDomainRequest) { 
  xdr = new XDomainRequest(); 
 } else if (window.XMLHttpRequest) { 
  xdr = new XMLHttpRequest(); 
 } else { 
  alert("Votre navigateur ne gère pas l'AJAX cross-domain !"); 
 } 
 return xdr;  
} 
var xdr = getXDomainRequest(); 
xdr.onload = function() { 
 alert(xdr.responseText); 
} 
xdr.open("GET", "http://www.foxycode.net/dev/ajax/XDomain_1.php"); 
xdr.send(); 
</script>
Démonstration:

1) Nous allons, tout d'abord nous assurer que ce script tourne bien en ligne. Pour ce faire, si vous avez installé Apache sur votre pc et/ou si vous disposez d'un hébergement, enregistrez ce script dans votre répertoire "www".

Lancez-le (http://localhost/le_nom_que_vous_aurez_donné_au_script.htm) et vous verrez le bien connu Lorem ipsum dans une boîte d'alerte, sous tout navigateur récent supportant la méthode XMLHttpRequest level 2.

2) Nous allons ensuite voir comment ça se passe en local, ouvrez cette page web par un simple double-clic ou par le menu contextuel de votre OS (de manière à ce qu'il ne soit pas ouvert par Apache) et testez sous différents navigateurs.

Vous l'aurez remarqué, seuls IE 8, IE 9 Preview et Opera 10.50 et le supportent pas.

Refus d'accès:

Si l'on prête attention au gestionnaire d'erreurs d'IE 8, on peut y lire que l'accès est refusé, j'ai donc cherché les raisons d'une telle restriction.

Les pistes:

1) Est-ce une question de contrôle de l'accès aux sites ciblés par l'internaute avec un tel script?

Assurément, non, puisque l'administrateur doit ajouter une fonction, côté serveur pour permettre à des scripts de type cross-domain d'y accéder.

De plus, au moyen de cette fonction, cet administrateur peut déterminer l'origine des scripts qui peuvent ou non accéder à son contenu.

2) Est-ce pour protéger les scripts mal sécurisés côté serveur?

Je ne le pense pas, après tout, ce n'est pas le rôle du navigateur, cette responsabilité revient uniquement au webmaster du site concerné.

L'intérêt de ce procédé en natif:

- Cette technique a plusieurs avantages, une opportunité de développer de manière à mettre l'internaute à l'abri des problèmes de sécurité encourus suite à des serveurs web hackés.

- Permettre à l'utilisateur de complètement personnaliser l'interface qu'il utilise pour communiquer avec son site préféré.

- Économiser des ressources serveurs lors de la communication avec ses utilisateurs.

L'appel aux développeurs:

Sachant qu'IE 9 est en cours de création, qu'IE 8 a déjà été modifié concernant cette fonction (il peut donc l'être à nouveau) et qu'Opera n'en restera assurément pas à la version 10.50, je poste cette actualité dans l'espoir qu'elle parvienne jusqu'à leurs développeurs.

EDIT: Suite à l'avis des responsables de Developpez.net, ce topic a été remanié et n'a nullement pour but de faire de l'auto-promotion mais bien de signaler un problème actuel entravant l'évolution du web.

Si vous trouvez que la résolution de ce problème peut apporter un plus au web, je vous invite à faire suivre cette news et/ou m'indiquer comment je puis me faire entendre au mieux.


Vous avez aimé cette actualité ? Alors partagez-la avec vos amis en cliquant sur les boutons ci-dessous :


 Poster une réponse

Avatar de Lcf.vs Lcf.vs - Membre éprouvé https://www.developpez.com
le 22/03/2010 à 14:56
Complément d'information:

La fonction XDomainRequest proposée par IE 8 et 9 ne supportent pas la fonction .setRequestHeader("Content-Type", "type_choisi");

Exemple:

Code : Sélectionner tout
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script type='text/JavaScript'> 
function getXDomainRequest() { 
 var xdr = null; 
  
 if (window.XDomainRequest) { 
  xdr = new XDomainRequest(); 
 } else if (window.XMLHttpRequest) { 
  xdr = new XMLHttpRequest(); 
 } else { 
  alert("Votre navigateur ne gère pas l'AJAX cross-domain !"); 
 } 
 return xdr;  
} 
var xdr = getXDomainRequest(); 
xdr.onload = function() { 
 alert(xdr.responseText); 
} 
xdr.open("POST", "http://www.foxycode.net/dev/ajax/XDomain_1.php"); 
xdr.setRequestHeader("Content-Type", "text/plain");  
xdr.send(''); 
</script>
Les requêtes POST ne semblent donc pas disponibles, tant en local qu'online...
Avatar de renaud26 renaud26 - Membre averti https://www.developpez.com
le 29/06/2010 à 16:11
Bonjour à tous,

1 an plus tard, je remonte ce post très intéressant.

La fonction XDomainRequest proposée par IE 8 et 9 ne supportent pas la fonction .setRequestHeader("Content-Type", "type_choisi");

...ce qui empêche les requêtes POST.

Malgré de nombreuses recherches, je n'ai pas trouvé le moyen de contourner cela. Est ce qu'une solution existe aujourd'hui ?

Merci d'avance.
Avatar de E.Bzz E.Bzz - Responsable Modération https://www.developpez.com
le 29/06/2010 à 17:13
Bonjour,
ça fait 3 mois, pas un an

Sinon, effectivement, il y a de nouvelles possibilités (non intégrées aux nav), notamment pour gérer le POST.

A+
Avatar de renaud26 renaud26 - Membre averti https://www.developpez.com
le 30/06/2010 à 0:00
Bonjour et merci de ta réponse,

Effectivement ! je ne sais pas compter.

J'ai donc lu le tuto, téléchargé la librairie... et ça fonctionne.
J'ai tenté de lire la doc avec ce qui me reste d'anglais... Mouais...

Le tuto donne cette fonction pour appeler la classe :

Code : Sélectionner tout
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
function callAJAX(url) { 
	var flproxy = new flensed.flXHR( { 
		xmlResponseText : false, 
		onerror : function handleError(errObj) { 
			// ici on indique ce que l'on fait en cas d'erreur 
			// toutes les informations relatives à l'erreur 
			// sont stockées dans l'objet errObj 
			alert(errObj); 
		}, 
		onreadystatechange : function handleLoading(XHRobj) { 
			if (XHRobj.readyState == 4) { 
				// ici on indique ce que l'on fait 
				// avec la réponse à la requête 
				// AJAX stockée dans XHRobj.responseText; 
				alert(XHRobj.responseText); 
			} 
		} 
	}); 
		// ici on a le choix entre la méthode GET ou POST pour appeler l'url 
	var data = "what=toto&what2=tata"; 
	flproxy.open("POST", url); 
	//flproxy.send(null); 
	flproxy.send(data); 
}
Ok, ça fonctionne avec de petits tests simples....une fois qu'on a compris ce qu'il faut transférer sur le serveur et où...Parce que contrairement à ce que dit le tuto, le fichier flXHR.js ne suffit pas. Il y a les "dependencies"...

Bref, ok.
Mais mes question sont :

- Est-ce-que la fonction "callAJAX" est "maison" ? Je ne l'ai vue nulle part dans la doc.
- Mais y-en-t-il d'autres ?
- On ne peut pas passer de paramètres à cette fonction, ça plante. Logique, je suppose. Mais alors comment fait-on pour introduire des variables ?

Maerci pour vos éclaircissements.
Avatar de E.Bzz E.Bzz - Responsable Modération https://www.developpez.com
le 30/06/2010 à 9:42
Citation Envoyé par renaud26  Voir le message
Parce que contrairement à ce que dit le tuto, le fichier flXHR.js ne suffit pas. Il y a les "dependencies"...

Tu parles de crossdomain.xml ou il y en a d'autres ? (car dans ce cas, il faudrait effectivement les mentionner)
Citation Envoyé par renaud26  Voir le message
- Est-ce-que la fonction "callAJAX" est "maison" ? Je ne l'ai vue nulle part dans la doc.

Je pense qu'elle a été écrite par l'auteur du tuto. Elle n'est effectivement pas présente dans les codes sources des démos du site (mais pas toutes vérifiées).
Citation Envoyé par renaud26  Voir le message
- Mais y-en-t-il d'autres ?

Tu peux en écrire une "à ta sauce" sans problème ...
Citation Envoyé par renaud26  Voir le message
- On ne peut pas passer de paramètres à cette fonction, ça plante. Logique, je suppose. Mais alors comment fait-on pour introduire des variables ?

La fonction utilise déjà un paramètre. C'est donc possible (ça l'est de toutes façons en JavaScript). Peut-être as-tu utilisé un terme réservé du langage (ou un id présent dans ta page) pour nommer ton paramètre, ce qui cause effectivement une erreur.
Pour remplacer un passage de paramètre, tu peux utiliser une variable globale, sinon ....

A+
Avatar de renaud26 renaud26 - Membre averti https://www.developpez.com
le 30/06/2010 à 10:53
Bonjour et merci pour tes précisions...

Alors :

1- Oui, il y a, à mon avis, des fichiers complémentaires indispensables au bon fonctionnement : lorsque l'on télécharge la librairie, l'éditeur propose un ZIP avec "tout ce qu'il faut dedans". Un fois décompressé, on trouve un dossier nommé "deploy". C'est l'ensemble du contenu de ce dossier qu'il faut transférer sur le serveur. Sinon, gros warnings en perspective.

2- Les fonctions : oui j'ai pigé comment ça fonctionne. Comme une classe PHP, en fait. Il suffit de créer un nouvel objet :

Code : Sélectionner tout
1
2
 
var toto = new flensed.flXHR;
Et ensuite il y a les fonctions :

handleError(errObj) : affiche les erreurs.
function handleLoading(XHRobj) : charge le contenu de la requête

Puis les méthodes :

XHRobj.readyState : le statut de la requête
XHRobj.responseText : le résultat de la requête

Je ne sais pas si j'emploie la bonne terminologie avec "fonctions" et "méthodes", mais bon, en gros, c'est ça.

Dommage que ce tuto ne soit qu'une présentation. Je pense qu'il y en aurait un plus complet à faire. Quand j'aurai tout bien compris, je tâcherai d'en proposer un.

Bonne journée à tous.
Offres d'emploi IT
Développeur d'application mobile F/H
Zenika - Rhône Alpes - Lyon (69000)
Ingénieur Développement logiciel (Model based) H/F
Safran - Ile de France - Vélizy-Villacoublay (78140)
Lead Developer - Full stack
La Fabrique à Innovations - Midi Pyrénées - Toulouse (31000)

Voir plus d'offres Voir la carte des offres IT
Responsable bénévole de la rubrique AJAX : Xavier Lecomte -