Comment réaliser un appel HTTP à partir d’une page Web sur un autre domaine

Effectuer des requêtes HTTP à partir d’une page Web sur un autre domaine n’est pas possible en raison de la politique de même origine (SOP), une mesure de sécurité essentielle pour empêcher les sites Web malveillants de voler des données ou d’exécuter du code sur d’autres sites Web.

Cependant, il existe des solutions de contournement qui peuvent vous permettre d’obtenir un effet similaire à l’appel d’une autre page en arrière-plan, tout en respectant les restrictions de la SOP. Voici quelques options :

1. JSONP (JSON with Padding)

JSONP est une technique permettant à une page Web de charger du code JavaScript à partir d’un autre domaine. Elle exploite une faille dans la manière dont les navigateurs traitent les requêtes JSONP, ce qui permet de contourner la SOP.

Fonctionnement de JSONP

1. La page Web envoie une requête HTTP à l’autre domaine, en incluant un paramètre de callback dans l’URL. Ce paramètre spécifie une fonction JavaScript qui sera exécutée lorsque le code JavaScript est chargé.
2. Le serveur sur l’autre domaine répond avec un morceau de code JavaScript enveloppé dans les parenthèses de la fonction callback spécifiée.
3. Le navigateur exécute le code JavaScript, ce qui permet au code d’accéder aux données et aux fonctionnalités du domaine d’origine.

Exemple de JSONP

JavaScript

<script>
  function callback(data) {
    // Traiter les données renvoyées par le serveur
    console.log(data);
  }

  var url = "https://example.com/jsonp?callback=callback";
  var script = document.createElement('script');
  script.src = url;
  document.body.appendChild(script);
</script>

Limites de JSONP

• Sécurité: JSONP n’est pas aussi sûr que d’autres méthodes car il n’utilise pas de mécanisme de vérification pour s’assurer que le code JavaScript provient bien du domaine attendu.
• Contrôle limité: JSONP ne permet que l’exécution de code JavaScript et ne donne pas accès à d’autres fonctionnalités, telles que la modification du DOM ou l’envoi de cookies.

2. CORS (Cross-Origin Resource Sharing)

CORS est une technologie plus sécurisée que JSONP qui permet aux pages Web de faire des requêtes HTTP vers d’autres domaines avec le consentement du serveur cible. Elle utilise des en-têtes HTTP supplémentaires pour spécifier quelles origines sont autorisées à accéder aux ressources du serveur.

Fonctionnement de CORS

1. La page Web envoie une requête HTTP préliminaire (OPTIONS) au serveur cible pour vérifier s’il autorise la requête.
2. Le serveur cible répond avec des en-têtes HTTP indiquant si la requête est autorisée et quelles méthodes et en-têtes HTTP sont autorisées.
3. Si la requête est autorisée, la page Web envoie la requête réelle au serveur cible.
4. Le serveur cible répond à la requête réelle et la page Web peut traiter la réponse.

Exemple de CORS

JavaScript

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/resource');
xhr.onload = function() {
  if (xhr.status === 200) {
    console.log(xhr.responseText);
  } else {
    console.error('Erreur: ' + xhr.statusText);
  }
};
xhr.setRequestHeader('Origin', 'https://example.org');
xhr.send();

Avantages de CORS

• Sécurité: CORS est plus sûr que JSONP car il utilise un mécanisme de vérification pour s’assurer que le code JavaScript provient bien du domaine attendu.
• Contrôle accru: CORS permet d’accéder à d’autres fonctionnalités, telles que la modification du DOM ou l’envoi de cookies.

Inconvénients de CORS

• Complexité: CORS est plus complexe à mettre en œuvre que JSONP car elle nécessite une communication supplémentaire entre la page Web et le serveur cible.
• Compatibilité: CORS n’est pas pris en charge par tous les navigateurs, il est donc important de vérifier la compatibilité avant de l’utiliser.

3. Requêtes AJAX

Les requêtes AJAX sont une méthode courante pour effectuer des requêtes HTTP asynchrones à partir de JavaScript. Elles peuvent être utilisées pour charger des données à partir d’autres domaines, sans bloquer l’interface utilisateur. Les requêtes AJAX peuvent utiliser JSONP ou CORS pour contourner la SOP.

Exemple de requête AJAX avec CORS

JavaScript

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/resource');
xhr.onload = function() {
  if (xhr.status === 200) {
    console.log(xhr.responseText);
  } else {
    console.error('Erreur: ' + xhr.statusText);
  }
};
xhr.setRequestHeader('Origin', 'https://example.org');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('data=some data');

Explication du code

1. Création d’un objet XMLHttpRequest : La première étape consiste à créer un objet XMLHttpRequest. Cet objet est utilisé pour effectuer des requêtes HTTP.
2. Ouverture de la requête : La méthode open() est utilisée pour ouvrir la requête. Elle prend trois arguments : la méthode HTTP (GET dans cet exemple), l’URL de la ressource et un booléen indiquant si la requête est asynchrone (true dans cet exemple).
3. Définition du gestionnaire d’événements onload : La propriété onload est définie sur une fonction qui sera exécutée lorsque la requête est terminée. Cette fonction vérifie le statut de la requête et affiche la réponse ou une erreur.
4. Définition de l’en-tête Origin : L’en-tête Origin est défini sur l’origine de la page Web qui effectue la requête. Cela est nécessaire pour que le serveur cible accepte la requête.
5. Définition de l’en-tête Content-Type : L’en-tête Content-Type est défini sur application/x-www-form-urlencoded. Cela indique au serveur cible que les données de la requête sont au format URLencoded.
6. Envoi de la requête : La méthode send() est utilisée pour envoyer la requête. Elle peut prendre un argument optionnel contenant les données de la requête (dans cet exemple, les données sont envoyées sous forme de chaîne URLencoded).

Remarques

• Cet exemple suppose que le serveur cible est configuré pour autoriser les requêtes CORS en provenance de https://example.org. Vous devrez peut-être modifier les en-têtes HTTP ou la configuration du serveur pour que cela fonctionne avec votre cas d’utilisation spécifique.
• Il est important de gérer les erreurs potentielles lors de l’utilisation des requêtes AJAX. Vous devez vérifier le statut de la requête et traiter les erreurs de manière appropriée.
• Les requêtes AJAX peuvent être utilisées pour effectuer différents types de requêtes HTTP, y compris GET, POST, PUT et DELETE. Vous pouvez également utiliser les requêtes AJAX pour envoyer des données au serveur.

En plus de l’exemple ci-dessus, voici quelques ressources supplémentaires qui pourraient vous être utiles :

• Documentation MDN sur XMLHttpRequest: https://developer.mozilla.org/fr/docs/Web/API/XMLHttpRequest
• Tutoriel sur les requêtes AJAX avec jQuery : https://www.pierre-giraud.com/jquery-apprendre-cours/creation-requete-ajax/
• Article sur les bonnes pratiques pour les requêtes AJAX : https://openclassrooms.com/forum/sujet/java-ee-ajax-bonne-pratique-conseils

J’espère que cela vous aide à comprendre comment effectuer des requêtes AJAX avec CORS. N’hésitez pas à me poser d’autres questions.