Présentation de la requête entre domaines (XDR, Cross-Domain Request)

  • Article

Nouveautés de Windows Internet Explorer 8

Avec la requête entre domaines (« XDR ») dans Internet Explorer 8, les développeurs peuvent créer des scénarios d'agrégation de données de site à site. Similaire à l'objet XMLHttpRequest mais avec un modèle de programmation plus simple, cette requête, appelée XDomainRequest, est la façon la plus facile d'envoyer des requêtes anonymes à des sites tiers qui prennent en charge XDR et choisissent de rendre leurs données disponibles entre les domaines. Les requêtes standard de site à site comprennent simplement trois lignes de code. Cela permet de garantir la simplicité, la sécurité et la rapidité de l'agrégation de données pour les sites publics tels que des blogs ou d'autres applications de réseaux sociaux.

Cette rubrique contient les sections suivantes :

  • Arrière-plan
  • Documentation API
  • Exemple de code
  • Voir aussi

Arrière-plan

Les navigateurs Web ont une stratégie de sécurité appelée « stratégie de la même origine d'un site », qui empêche les pages Web d'accéder aux données d'un autre domaine. Les sites Web contournent souvent cette stratégie en plaçant leur contenu de requête du serveur d'un autre site sur le serveur frontal, évitant ainsi le contrôle à l'intérieur du navigateur. Le diagramme suivant illustre ce processus pour un site hybride typique et Internet Explorer 7 et inférieur.

Dd573303.xdr1.gif

Dans Internet Explorer 8, les pages Web peuvent simplement effectuer une requête de données entre domaines dans le navigateur à l'aide du nouvel objet XDomainRequest au lieu d'une requête de serveur à serveur. Le diagramme suivant illustre une requête entre domaines dans Internet Explorer 8.

Dd573303.xdr2.gif

Les requêtes entre domaines requièrent un consentement mutuel entre la page Web et le serveur. Vous pouvez initialiser une requête entre domaines dans votre page Web en créant un objet XDomainRequest en dehors de l'objet window et en ouvrant une connexion à un domaine particulier. Le navigateur demandera les données à partir du serveur du domaine en envoyant un en-tête Origin avec la valeur de l'origine. Il exécutera la connexion uniquement si le serveur répond avec un en-tête Access-Control-Allow-Origin de * ou l'URL exacte de la page de requête. Ce comportement fait partie de l'ébauche d'infrastructure du groupe de travail sur les applications Web du W3C (World Wide Web Consortium) portant sur la communication entre domaines côté client, à laquelle l'objet XDomainRequest s'intègre.

Par exemple, la page ASP (Active Server Pages) d'un serveur peut inclure l'en-tête de réponse suivant.

<% Response.AddHeader("Access-Control-Allow-Origin","*") %>

Remarque sur la sécurité Alerte de sécurité  Pour protéger les données des utilisateurs, les requêtes entre domaines sont anonymes, ce qui signifie que les serveurs ne peuvent pas trouver facilement l'émetteur de la requête de données. Par conséquent, il est préférable de traiter uniquement, pour les requêtes comme pour les réponses, des données entre domaines qui ne sont pas sensibles ou personnellement identifiables.

Documentation API

Le code JavaScript suivant présente l'objet XDomainRequest et ses événements, propriétés et méthodes. La page de référence XDomainRequest est plus détaillée que le code fourni ci-dessous.

// Creates a new XDR object.
xdr = new XDomainRequest();  

// Indicates there is an error and the request cannot be completed. 
xdr.onerror = alert_error;
                        
// The request has reached its timeout. 
xdr.ontimeout = alert_timeout;
                        
// The object has started returning data.
xdr.onprogress = alert_progress;
                        
// The object is complete. 
xdr.onload = alert_loaded;

// Sets the timeout interval.
xdr.timeout = timeout;

// Gets the content-type header in the request.
var content_type = xdr.contentType;

// Gets the body of the response.
var response = xdr.responseText;
                        
// Creates a connection with a domain's server. 
xdr.open("get", url);
 
// Transmits a data string to the server. 
xdr.send();

// Terminates a pending send.
xdr.abort();

Exemple de code

XDR inclut deux composants : un côté client qui demande des données à une URL sur différents domaines, et un côté serveur qui répond avec un en-tête Access-Control-Allow-Origin de * ou l'URL exacte de la page de requête, plus les données, qu'Internet Explorer rend ensuite disponibles au domaine demandeur après avoir exécuté des contrôles de sécurité.

Cet exemple de page prend une URL et effectue une requête get. Le bouton Read appelle une méthode pour la sortie les données de réponse si vous le spécifiez. Le premier exemple de code qui suit est la page ayant émis la requête.

Remarque :  Pour une démonstration correcte de XDR, vous devez copier cette page sur un serveur Web d'un autre domaine. Vous pouvez également activer Microsoft Internet Information Services (IIS) sur votre ordinateur et l'héberger en local dans C:\inetpub\wwwroot. Pour plus d'informations sur l'installation d'IIS, recherchez « IIS » dans Aide et support dans le menu Démarrer.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Internet Explorer 8 - Cross-domain Request Code Sample</title>
<script type="text/javascript">
    var xdr;

    function read_data()
    {
        var output = document.getElementById('text_response');
        if(output)
        {
        // To view the responseText on the page, click the Read button. 
            output.innerText = xdr.responseText;
        }

        // The Read button also displays the content type and length of 
        // response in alerts.  
        alert("Content-type: " + xdr.contentType);
        alert("Length: " + xdr.responseText.length);
    }

    function alert_error()
    {
        alert("XDR onerror");
    }

    function alert_timeout()
    {
        alert("XDR ontimeout");
    }

    function alert_loaded()
    {
        alert("XDR onload");
        alert("Got: " + xdr.responseText);
    }

    function alert_progress()
    {
        alert("XDR onprogress");
        alert("Got: " + xdr.responseText);
    }

    function req_abort()
    {
        if(xdr)
        {
            xdr.abort(); // Abort XDR if the Stop button is pressed. 
        }
    }

    function req_init()
    {
        var url = 
        document.getElementById('input_url').value;
        var timeout = 
            document.getElementById('input_timeout').value;
        if (window.XDomainRequest) // Check whether the browser supports XDR. 
        {
            xdr = new XDomainRequest(); // Create a new XDR object.
            if (xdr)
            {
                // There is an error and the request cannot be completed. 
                // For example, the network is not available.
                xdr.onerror     = alert_error;
                        
                // This event is raised when the request reaches its timeout. 
                xdr.ontimeout   = alert_timeout;
                        
                // When the object starts returning data, the onprogress event 
                // is raised and the data can be retrieved by using responseText.
                xdr.onprogress  = alert_progress;
                       
                // When the object is complete, the onload event is raised and 
                // the responseText ensures the data is available. 
                xdr.onload      = alert_loaded;

                xdr.timeout     = timeout;
                        
                // The URL is preset in the text area. This is passed in the 
                // open call with a get request.
                xdr.open("get", url);
                        
                // The request is then sent to the server.  
                xdr.send();
            }
            else
            {
                alert('Failed to create new XDR object.');
            }
        }
        else
        {
            alert('XDR does not exist.');
        }
    }

</script>
</head>

<body>

<div class="body">
	<h1>Internet Explorer 8 - Cross-domain Request Demo</h1>
	<form action="">
		<!-- Assign URL and timeout values from their text boxes to variables. -->
		<p>URL:	<input id="input_url" type="text" 
		value="http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/Ajax/xdomain.response.movies.aspx"
		style="width: 700px"></p>
		
		<p>Timeout: <input id="input_timeout" type="text" value="10000"></p>
		
		<p><input onclick="req_init()" type="button" value="Get">&nbsp;&nbsp;&nbsp;
		<input onclick="req_abort()" type="button" value="Abort">&nbsp;&nbsp;&nbsp;
		<input onclick="read_data()" type="button" value="Read"></p>
	</form>
	<div id="text_response">
	</div>
</div>

</body>

</html>

Afficher

Cliquez sur le bouton Afficher pour l'essayer. Notez les deux champs et les trois boutons :

  • Le champ URL inclut une URL prédéfinie à laquelle la page enverra la requête Get. L'URL du fichier est http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/Ajax/xdomain.response.movies.aspx.
  • Le champ Timeout inclut une valeur de délai d'attente prédéfinie de 10 000 millisecondes (10 secondes).
  • Le bouton Get envoie la requête Get à l'URL spécifiée.
  • Le bouton Stop abandonne la requête Get.
  • Le bouton Read lit le texte de réponse et l'écrit sur la page, puis lit et affiche à la fois le type et la longueur du contenu.

Le deuxième exemple de code est la page cible, référencée dans la page de requête. Dans ce cas, la page cible contient une liste de données de film.

<% Response.AddHeader("Access-Control-Allow-Origin","*") %>
movieID|movieName|actor|genre
1|Fistful of Dollars|Clint Eastwood
2|Mission Impossible|Tom Cruise|Action
3|Enforcer|Clint Eastwood|Love Story
4|Gauntlet|Clint Eastwood
5|LawnMower Man|John Curtis|Drama
6|The Shining|Jack Nicholson|Drama
7|Dirty Harry|Clint Eastwood|Make my day
8|Two mules for Sister Sarah|Clint Eastwood
9|Hard to Kill|Stephen Segal|Action
10|Top Gun|Tom Cruise|High Intense Action

Voir aussi