Lorsque différents sites web interagissent entre eux, des questions de sécurité se posent. Comment un site peut-il savoir s'il doit faire confiance à un autre pour partager ses ressources ? Voici où entre en jeu CORS, ou Cross-Origin Resource Sharing .

Comprendre CORS

CORS (Cross-Origin Resource Sharing) est un mécanisme de sécurité mis en place par les navigateurs pour contrôler les requêtes faites entre différentes origines (ou domaines). Une "origine" est composée du protocole (http, https), du nom de domaine et du port.

Lorsqu'un site web, comme www.monsite.fr, tente de charger des ressources depuis un autre domaine, comme www.autresite.com le navigateur vérifie si www.autresite.com autorise explicitement www.monsite.fr à accéder à ses ressources. Si cette autorisation est absente ou incorrecte, le navigateur bloque la requête pour des raisons de sécurité.

Mais comment faire si j'ai besoin d'accéder à une API sur un autre domaine quand je développe ?

Pour contourner ces blocages lors du développement

• Extensions de Navigateur : Des outils comme "CORS Everywhere" ou des paramètres spécifiques permettent de désactiver temporairement la sécurité CORS sur le navigateur, pratique pour tester les requêtes entre domaines pendant le développement.

  • Serveur Proxy : En utilisant un serveur intermédiaire (un proxy) côté serveur, les requêtes peuvent être redirigées. De cette façon, la requête provient du même domaine que le serveur, évitant ainsi les restrictions CORS.

Mais alors, je peux désactiver CORS sur mon site ? 🤔

Quel est le rôle de CORS ?

Non, on ne doit pas autoriser tous les sites !

CORS joue un rôle crucial dans la sécurisation des échanges entre sites web, en abordant plusieurs problèmes de sécurité :

• Protection contre les Attaques CSRF : CORS empêche les requêtes non autorisées depuis des sites tiers, ce qui réduit le risque de manipulation de session ou de vol de données.

  • Contrôle d'Accès aux Ressources : CORS limite l'accès aux ressources d'un serveur à des domaines spécifiques autorisés, empêchant ainsi des sites malveillants d'accéder à des données sensibles d'un autre site sans autorisation.
  • Prévention des Fuites d'Informations : CORS réduit les risques de fuite d'informations sensibles en bloquant les requêtes d'origines non autorisées qui pourraient récupérer des données confidentielles.

Bien configurer les règles CORS

Pour définir des règles CORS, on peut utiliser l'annotation @CrossOrigin dans le contrôleur.

// Exemple de requête GET
fetch('https://tonserveur.com/api/public', {
    method: 'GET',
    headers: {
        'Origin': 'https://www.monclient.com' // Origine autorisée pour cette requête
    }
})
.then(response => response.text())
.then(data => console.log(data))
.catch(error => console.error('Erreur :', error));

En résumé, CORS joue un rôle crucial dans la sécurisation des échanges entre différents sites web. Il est essentiel pour éviter les risques de sécurité sans bloquer complètement les interactions entre domaines. 🛡️