IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

AJAX Discussion :

Exemple d'AJAX cross-domaine et sa gestion incomplète par IE 8 et 9 et Opera 10.50


Sujet :

AJAX

  1. #1
    Membre éclairé

    Femme Profil pro
    Experte JS / Conseillère en best practices / Chercheuse en programmation
    Inscrit en
    Octobre 2007
    Messages
    740
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 43
    Localisation : Belgique

    Informations professionnelles :
    Activité : Experte JS / Conseillère en best practices / Chercheuse en programmation
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Octobre 2007
    Messages : 740
    Points : 805
    Points
    805
    Par défaut Exemple d'AJAX cross-domaine et sa gestion incomplète par IE 8 et 9 et Opera 10.50
    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 - Visualiser dans une fenêtre à part
    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.
    Afin d'obtenir plus facilement de l'aide, n'hésitez pas à poster votre code de carte bancaire

    Mon GitHub

    Une alternative à jQuery, Angular, Vue.js, React, ... ? Testez anticore, en quelques secondes à peine !
    (Contributions bienvenues)

  2. #2
    Membre éclairé

    Femme Profil pro
    Experte JS / Conseillère en best practices / Chercheuse en programmation
    Inscrit en
    Octobre 2007
    Messages
    740
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 43
    Localisation : Belgique

    Informations professionnelles :
    Activité : Experte JS / Conseillère en best practices / Chercheuse en programmation
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Octobre 2007
    Messages : 740
    Points : 805
    Points
    805
    Par défaut
    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 - Visualiser dans une fenêtre à part
    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...
    Afin d'obtenir plus facilement de l'aide, n'hésitez pas à poster votre code de carte bancaire

    Mon GitHub

    Une alternative à jQuery, Angular, Vue.js, React, ... ? Testez anticore, en quelques secondes à peine !
    (Contributions bienvenues)

  3. #3
    Membre averti Avatar de renaud26
    Homme Profil pro
    Webmaster
    Inscrit en
    Mars 2003
    Messages
    1 365
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 60
    Localisation : France, Côtes d'Armor (Bretagne)

    Informations professionnelles :
    Activité : Webmaster

    Informations forums :
    Inscription : Mars 2003
    Messages : 1 365
    Points : 436
    Points
    436
    Par défaut
    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.

  4. #4
    Expert éminent sénior

    Homme Profil pro
    Inscrit en
    Janvier 2007
    Messages
    13 474
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Secteur : Finance

    Informations forums :
    Inscription : Janvier 2007
    Messages : 13 474
    Points : 36 571
    Points
    36 571
    Par défaut
    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+
    Pour tout savoir sur l'utilisation du forum

    En postant votre message, n'oubliez pas les Règles du Club.

  5. #5
    Membre averti Avatar de renaud26
    Homme Profil pro
    Webmaster
    Inscrit en
    Mars 2003
    Messages
    1 365
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 60
    Localisation : France, Côtes d'Armor (Bretagne)

    Informations professionnelles :
    Activité : Webmaster

    Informations forums :
    Inscription : Mars 2003
    Messages : 1 365
    Points : 436
    Points
    436
    Par défaut
    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 - Visualiser dans une fenêtre à part
    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.

  6. #6
    Expert éminent sénior

    Homme Profil pro
    Inscrit en
    Janvier 2007
    Messages
    13 474
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Secteur : Finance

    Informations forums :
    Inscription : Janvier 2007
    Messages : 13 474
    Points : 36 571
    Points
    36 571
    Par défaut
    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+
    Pour tout savoir sur l'utilisation du forum

    En postant votre message, n'oubliez pas les Règles du Club.

  7. #7
    Membre averti Avatar de renaud26
    Homme Profil pro
    Webmaster
    Inscrit en
    Mars 2003
    Messages
    1 365
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 60
    Localisation : France, Côtes d'Armor (Bretagne)

    Informations professionnelles :
    Activité : Webmaster

    Informations forums :
    Inscription : Mars 2003
    Messages : 1 365
    Points : 436
    Points
    436
    Par défaut
    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 - Visualiser dans une fenêtre à part
    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.

Discussions similaires

  1. [AJAX] Json + Ajax cross domain.
    Par Cartman.inc dans le forum AJAX
    Réponses: 2
    Dernier message: 18/02/2011, 12h01
  2. [Article] AJAX cross-domain avec flXHR
    Par E.Bzz dans le forum AJAX
    Réponses: 2
    Dernier message: 06/07/2010, 14h11
  3. [Ajax] Cross domain et access denied
    Par Dinaïz dans le forum Général JavaScript
    Réponses: 15
    Dernier message: 22/03/2006, 23h29

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo