Comprendre CORS : partage sécurisé de ressources multi-origines en JavaScript

CORS (partage de ressources inter-origines)

CORS (Cross-Origin Resource Sharing) est une fonctionnalité de sécurité mise en œuvre par les navigateurs Web pour contrôler la manière dont les ressources peuvent être demandées à partir d'un domaine (origine) différent de celui d'où provient la ressource. Il est crucial dans le développement Web moderne, en particulier lorsque vous travaillez avec des API, car il empêche tout accès non autorisé aux ressources et garantit un échange sécurisé de données.

---

1. Qu'est-ce qu'une Origine ?

Une origine est définie par la combinaison de :

• Protocole : (par exemple, http, https)
• Domaine : (par exemple, exemple.com)
• Port : (par exemple :80, :443)

Exemple :

• https://example.com et http://example.com sont d'origines différentes.
• https://example.com:3000 et https://example.com:4000 sont également des origines différentes.

---

2. Politique de même origine (SOP)

La politique de même origine est une mesure de sécurité qui restreint la manière dont les ressources d'une page Web peuvent interagir avec des ressources d'une autre origine.

• Exemple : un script chargé depuis https://example.com ne peut pas récupérer de données depuis https://api.otherdomain.com sans autorisation explicite.

Bien que SOP garantisse la sécurité, il limite les requêtes légitimes d'origine croisée, c'est là que CORS entre en jeu.

---

3. Qu'est-ce que CORS ?

CORS est un mécanisme qui permet aux serveurs de spécifier qui peut accéder à leurs ressources en incluant des en-têtes HTTP spécifiques dans leurs réponses. Ces en-têtes indiquent si le navigateur doit autoriser le client à accéder aux ressources demandées.

---

4. Comment fonctionne CORS

Lorsqu'un navigateur effectue une requête d'origine croisée, il vérifie les en-têtes de réponse du serveur pour déterminer si la requête est autorisée.

Étapes clés :

1. Demande de contrôle en amont (facultatif) :
   
   Pour certains types de requêtes, le navigateur envoie une requête OPTIONS initiale pour vérifier si la requête réelle est autorisée.

2. Réponse du serveur :
   
   Le serveur inclut les en-têtes CORS appropriés dans la réponse.

3. Décision du navigateur :
   
   Si les en-têtes correspondent aux attentes du navigateur, la ressource est partagée ; sinon, le navigateur bloque la demande.

---

5. En-têtes CORS importants

En-têtes de requête :

• Origine : Précise l’origine de la requête. Exemple : Origine : https://example.com

En-têtes de réponse :

• Access-Control-Allow-Origin : Spécifie quelles origines sont autorisées à accéder à la ressource.
  
  Exemple : Access-Control-Allow-Origin : https://example.com

• Access-Control-Allow-Methods : Spécifie les méthodes HTTP autorisées.
  
  Exemple : Méthodes d'autorisation de contrôle d'accès : GET, POST, PUT

• Access-Control-Allow-Headers : Spécifie les en-têtes personnalisés qui peuvent être envoyés dans les requêtes.
  
  Exemple : Access-Control-Allow-Headers : Content-Type, Authorization

• Access-Control-Allow-Credentials : Indique si les informations d'identification (cookies, authentification HTTP) peuvent être envoyées.
  
  Exemple : Access-Control-Allow-Credentials : true

---

6. Types de demandes CORS

1. Demandes simples :

   • Il s'agit de requêtes simples (par exemple, GET, POST) sans en-têtes personnalisés ni contrôle en amont.

2. Demandes vérifiées en amont :

   • Pour les requêtes avec des en-têtes personnalisés, des informations d'identification ou des méthodes autres que GET ou POST, le navigateur envoie une requête OPTIONS de contrôle en amont pour s'assurer que le serveur l'autorise.

3. Demandes accréditées :

   • Les requêtes qui incluent des informations d'identification telles que les cookies nécessitent l'en-tête Access-Control-Allow-Credentials.

---

7. Exemple : CORS en action

JavaScript côté client :

fetch("https://api.otherdomain.com/data", {
  method: "GET",
  headers: {
    "Content-Type": "application/json",
  },
  credentials: "include", // For sending cookies or credentials
})
  .then(response => response.json())
  .then(data => console.log("Data:", data))
  .catch(error => console.error("Error:", error));

En-têtes de réponse du serveur :

Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: GET, POST
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Allow-Credentials: true

---

8. Gestion de CORS dans le code côté serveur

Exemple Node.js avec Express :

const express = require("express");
const cors = require("cors");
const app = express();

// Use the CORS middleware
app.use(cors({
  origin: "https://example.com", // Allow only this origin
  methods: ["GET", "POST"], // Allow these HTTP methods
  credentials: true, // Allow credentials
}));

app.get("/data", (req, res) => {
  res.json({ message: "CORS request successful" });
});

app.listen(3000, () => console.log("Server running on port 3000"));

---

9. Problèmes et correctifs CORS courants

1. Erreur : aucun en-tête 'Access-Control-Allow-Origin' n'est présent sur la ressource demandée.

   • Correction : assurez-vous que le serveur inclut l'en-tête Access-Control-Allow-Origin.

2. Erreur : les demandes d'accréditation nécessitent que « Access-Control-Allow-Credentials » soit vrai.

   • Correction : définissez Access-Control-Allow-Credentials sur true et assurez-vous qu'Access-Control-Allow-Origin n'est pas *.

3. La demande de contrôle en amont échoue :

   • Correction : assurez-vous que le serveur répond correctement aux requêtes OPTIONS avec les en-têtes CORS requis.

---

10. Avantages du CORS

• Améliore la sécurité en permettant un partage contrôlé des ressources.
• Facilite les intégrations d'API entre différents domaines.
• Prend en charge une large gamme de configurations pour répondre aux besoins des applications.

---

11. Limites de CORS

• Complexité de configuration pour les API nécessitant des origines dynamiques.
• Augmentation des frais généraux pour les requêtes de contrôle en amont sur certaines API.
• Les erreurs sont souvent difficiles à déboguer en raison des contraintes imposées par le navigateur.

---

12. Conclusion

CORS est une fonctionnalité essentielle pour le partage de ressources multi-origines sécurisé et fonctionnel dans les applications Web. En comprenant et en configurant correctement les en-têtes CORS sur votre serveur, vous pouvez garantir une communication fluide et sécurisée entre les domaines tout en respectant les normes de sécurité Web.

Bonjour, je m'appelle Abhay Singh Kathayat !
Je suis un développeur full-stack avec une expertise dans les technologies front-end et back-end. Je travaille avec une variété de langages et de frameworks de programmation pour créer des applications efficaces, évolutives et conviviales.
N'hésitez pas à me contacter à mon e-mail professionnel : kaashshorts28@gmail.com.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!