Requêtes XMLHttpRequest inter-sites

Note concernant Firefox 3

Cette fonctionnalité est disponible dans Firefox 3, mais uniquement dans les extensions et le code privilégié ; elle n'est pas actuellement accessible au contenu web.

Cette page vient d'être traduite, mais elle a besoin d'un relecteur différent du traducteur. Pensez également à toujours vérifier le contenu avec sa toute dernière version en anglais.
Firefox 3 implémente le brouillon de travail Access Control du W3C qui permet d'effectuer des requêtes XMLHttpRequest vers d'autres sites web.

Aperçu

La structure W3C Access Control donne aux documents sur le client un plus grand contrôle sur qui peut et qui ne peut pas y accéder à l'aide d'une requête effectuée depuis le navigateur (par exemple via XMLHttpRequest).

De plus, ce système de contrôle d'accès permet aux applications d'autoriser les requêtes inter-sites. Il serait donc possible, théoriquement, de demander un document depuis google.com via une requête XMLHttpRequest dans une page sur votresite.com (une fois les points de contrôle d'accès mis en place). Ce niveau de contrôle donne une plus grande part de flexibilité aux créateurs de contenu lorsqu'il s'agit de permettre à leurs visiteurs de construire des combinaisons et des applications utilisant leurs informations.

Utilisation

Deux méthodes permettent d'utiliser ce contrôle d'accès dans Firefox 3. La première passe par l'ajout d'un nouvel en-tête Access-Control (qui peut être utilisé pour tous les types de ressources et lorsque vous avez un niveau de contrôle important sur votre serveur web) et l'instruction de traitement XML access-control (qui n'est utile que pour des documents XML).

En-têtes Access-Control

Il s'agit du moyen le plus flexible de permettre des requêtes XMLHttpRequest inter-sites. Il s'agit d'ajouter un en-tête Access-Controls supplémentaire dans la réponse à une requête, comme dans l'exemple suivant qui permettra à toute application web située sur mozilla.org d'y accéder.

Access-Control: allow <mozilla.org>

L'en-tête Access-Control permet d'autoriser ou de refuser l'accès à une ressource selon l'origine et la méthode de la requête.

Par exemple, tous les exemples suivants sont des en-têtes Access-Control valides :

// Tout le monde peut accéder à cette ressource — aucune restriction
Access-Control: allow <*>

// Personne ne peut accéder à cette ressource — aucune exception
Access-Control: deny <*>

// Seuls les sites hébergés sur « mozilla.org » peuvent accéder à cette ressource
// (cela concerne également les sous-domaines)
Access-Control: allow <mozilla.org>

// Tous les sous-domaines de mozilla.org, sauf developer.mozilla.org, peuvent accéder à cette ressource
Access-Control: allow <mozilla.org> exclude <developer.mozilla.org>

// Seul ce domaine, sur ce port, et avec cette méthode de requête, peut accéder à cette ressource
Access-Control: allow <developer.mozilla.org:80> method GET, POST

D'autres exemples sont disponibles dans le brouillon de travail Access Control du W3C.

Exemple

Cet exemple simple charge un fichier HTML depuis un site web séparé. Ce fichier HTML particulier est généré par un script PHP qui produit l'en-tête Access-Control supplémentaire. Si vous faisiez une copie de header.html sur votre propre serveur, vous constateriez que la requête fonctionne toujours (puisque tous les sites peuvent y accéder).

header.html

<html>
<head>
<script>
window.onload = function(){
  var xhr = new XMLHttpRequest();
  xhr.open("GET", "http://dev.jquery.com/~john/xdomain/test.php", true);
  xhr.onreadystatechange = function(){
    if ( xhr.readyState == 4 ) {
      if ( xhr.status == 200 ) {
        document.body.innerHTML = "My Name is: " + xhr.responseText;
      } else {
        document.body.innerHTML = "ERROR";
      }
    }
  };
  xhr.send(null);
};
</script>
</head>
<body>
Loading...
</body>
</html>

test.php

<!-- Modifiez cette ligne pour permettre à <votredomaine.com> d'y accéder, ou autorisez <*> pour que TOUT LE MONDE puisse y accéder. -->
<?php header('Access-Control: allow <ejohn.org>'); ?>
<b>John Resig</b>

Instruction de traitement XML

XML permet d'ajouter des commandes supplémentaires que le processeur XML peut gérer d'une manière particulière. Le brouillon Access Control spécifie une manière de fournir une de ces commandes supplémentaires afin que le document XML soit accessible à distance, depuis un autre site.

Par exemple, en ajoutant l'instruction de traitement access-control suivante permettrait à toute page de mozilla.org d'accéder au document XML dans lequel elle se trouve :

<?access-control allow="mozilla.org"?>

Voici quelques exemples simples d'utilisation de l'instruction de traitement access-control pour donner des privilèges d'accès à un document XML :

// Tout le monde peut accéder à cette ressource — aucune restriction
<?access-control allow="*"?>

// Personne ne peut accéder à cette ressource — aucune exception
<?access-control deny="*"?>

// Seuls les sites hébergés sur « mozilla.org » peuvent accéder à cette ressource
// (cela concerne également les sous-domaines))
<?access-control deny="mozilla.org"?>

// Tous les sous-domaines de mozilla.org, sauf developer.mozilla.org, peuvent accéder à cette ressource
<?access-control allow="mozilla.org" exclude="developer.mozilla.org"?>

// Seul ce domaine, sur ce port, et avec cette méthode de requête, peut accéder à cette ressource
<?access-control allow="developer.mozilla.org" method="GET POST"?>

D'autres exemples sont disponibles dans le brouillon de travail Access Control du W3C.

Exemple

Cet exemple simple charge un fichier XML depuis un autre site web. Ce fichier XML particulier contient une instruction de traitement access-control qui autorise cet accès à n'importe quel site web. Si vous faisiez une copie de ac.html sur votre propre serveur, vous verriez que la requête continuerait à fonctionner (puisque tous les sites peuvent y accéder).

ac.html

<html>
<head>
<script>
window.onload = function(){
  var xhr = new XMLHttpRequest();
  xhr.open("GET", "http://dev.jquery.com/~john/xdomain/test.xml", true);
  xhr.onreadystatechange = function(){
    if ( xhr.readyState == 4 ) {
      if ( xhr.status == 200 ) {
        document.body.innerHTML = "My Name is: " +
          xhr.responseXML.getElementsByTagName("name")[0].firstChild.nodeValue;
      } else {
        document.body.innerHTML = "ERROR";
      }
    }
  };
  xhr.send(null);
};
</script>
</head>
<body>
Loading...
</body>
</html>

test.xml

<?xml version="1.0" encoding="UTF-8"?>
<!-- Modifiez cette ligne pour permettre à <votredomaine.com> d'y accéder, ou autorisez <*> pour que TOUT LE MONDE puisse y accéder. -->
<?access-control allow="ejohn.org"?>
<simple><name>John Resig</name></simple>

Références

Voir également

 

Étiquettes et contributeurs liés au document

Contributeurs ayant participé à cette page : BenoitL, Mgjbot
Dernière mise à jour par : BenoitL,