• Assurez la sécurité des applications de la bonne manière! Détectez, protégez, surveillez, accélérez et plus encore…
  • Vous vous demandez ce qu'est CORS (Cross-Origin Resource Sharing)?

    Dans les films d'espionnage, les agents de sécurité ont un codé moyen de transmettre des informations entre eux. Comme ils transmettent principalement des informations qui peuvent être utilisées contre eux si elles tombent entre les mains de leurs ennemis, ils doivent s'assurer que ceux qui reçoivent ces informations sont des parties de confiance. Il en va de même pour ceux qui envoient lesdites informations. Lorsque l'expéditeur et le destinataire sont dignes de confiance, la crédibilité et la sécurité des informations peuvent être garanties.

    https://pt.slideshare.net/atirekgupta/selenium-workshop-34820044

    Une réplique de ce scénario se produit dans la communication entre les navigateurs et les serveurs Web, et elle est appelée politique de même origine.

    Selon MDN:

    La politique de même origine est un mécanisme de sécurité critique qui limite la manière dont un document ou un script chargé à partir d'une origine peut interagir avec une ressource d'une autre origine. Il permet d'isoler les documents potentiellement malveillants, réduisant ainsi les vecteurs d'attaque possibles.

    Qu'est-ce que CORS?

    Dans un cas réel, lorsque les agents de sécurité donnent une règle selon laquelle la communication ne doit avoir lieu qu'entre ses agents comme moyen de sécurité, c'est similaire à la politique de la même origine. Pourtant, il peut y avoir des cas où ils devront interagir avec le monde extérieur. Ou avec des agents d'autres services de sécurité, pour que cela se produise, ils peuvent mettre en œuvre une autre mesure de sécurité pour vérifier ces agents. Cette vérification peut se faire de différentes manières, selon les opérateurs impliqués. En cas de communication sur Internet, CORS est le mécanisme qui permet aux navigateurs d'accéder à des ressources qu'ils ne pourront pas à l'origine parce que la ressource est d'une origine différente.

    Le partage de ressources inter-origines (CORS) est un mécanisme qui utilise des en-têtes HTTP supplémentaires pour indiquer aux navigateurs de donner à une application Web exécutée à une origine, l'accès à des ressources sélectionnées d'une origine différente.

    J'ai parlé de l'origine plus d'une fois, et vous vous demandez probablement ce que cela signifie. Une origine est définie par le protocole, le domaine et le port de l'URL. Lorsque vous avez votre API à une origine telle que https://api.geekflare.com:3001 et votre frontend à https://geekflare.com, les origines sont dites différentes. Dans cette situation, vous aurez besoin de CORS pour pouvoir accéder aux ressources aux deux extrémités.

    Lorsque des requêtes sont adressées à un serveur, les navigateurs (client) et les serveurs envoient des requêtes et des réponses, les en-têtes HTTP sont inclus. Parmi ces en-têtes, des en-têtes supplémentaires sont inclus pour empêcher le navigateur de bloquer la communication.

    Pourquoi le navigateur bloque-t-il la communication?

    Ses fonctionnalités de sécurité du navigateur. Il le fera si la demande provient d'une origine différente de celle du client. Les en-têtes supplémentaires inclus à la suite de CORS sont un moyen d'indiquer au client qu'il peut utiliser la réponse qu'il a reçue.

    En-têtes CORS

    Un de en-têtes sécurisés qui peut être une réponse ou un en-tête de demande.

    En-têtes de réponse

    Ce sont les en-têtes que le serveur renvoie dans sa réponse.

    • Access-Control-Allow-Origin: <origin>: Ceci est utilisé pour spécifier l'origine autorisée à accéder à la ressource sur le serveur. Il est possible de spécifier que seules les demandes provenant d'une origine spécifique sont autorisées - Access-Control-Allow-Origin: https://geekflare.com, ou que l'origine n'a pas d'importance - Access-Control-Allow-Origin: *.
    • Access-Control-Expose-Headers: <headers>: Comme son nom l'indique, cela répertorie les en-têtes auxquels le navigateur a accès.
    • Access-Control-Max-Age: <seconds>: Ceci indique la durée pendant laquelle la réponse d'une demande de contrôle en amont peut être mise en cache.
    • Access-Control-Allow-Credentials: <boolean>: Cela indique que le navigateur peut utiliser la réponse lorsque la demande initiale a été faite avec un identifiant.
    • Access-Control-Allow-Methods: <methods>: Ceci indique la (les) méthode (s) autorisée (s) lors de la tentative d'accès à une ressource.
    • Access-Control-Allow-Headers: <headers>: Cela indique que les en-têtes HTTP peuvent être utilisés dans une requête.

    Voici un exemple de ce à quoi ressemblera la réponse

    HTTP/1.1 204 No Content
    Access-Control-Allow-Origin: *
    Access-Control-Allow-Methods: GET,HEAD,PUT,PATCH,POST,DELETE
    Vary: Access-Control-Request-Headers
    Access-Control-Allow-Headers: Content-Type, Accept
    Content-Length: 0
    Date: Sat, 16 Nov 2019 11:41:08 GMT+1
    Connection: keep-alive

    En-têtes de demande

    Voici les en-têtes que la requête d'un client doit contenir pour pouvoir utiliser le mécanisme CORS.

    • Origin: <origin>: Ceci indique l'origine de la demande du client. Lorsque vous travaillez avec un frontend et un backend, comme indiqué précédemment, ce sera l'hôte de votre application frontend.
    • Access-Control-Request-Method: <method>: Ceci est utilisé dans une demande de contrôle en amont pour indiquer la méthode HTTP qui sera utilisée pour effectuer la demande.
    • Access-Control-Request-Headers: <header>: Ceci est utilisé dans une demande de contrôle en amont pour indiquer les en-têtes HTTP qui seront utilisés pour effectuer la demande.

    Voici un exemple de ce à quoi ressemblera une demande

    curl -i -X OPTIONS localhost:3001/api \
    -H 'Access-Control-Request-Method: GET' \
    -H 'Access-Control-Request-Headers: Content-Type, Accept' \
    -H 'Origin: http://localhost:3000'

    Demandes de contrôle en amont

    https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

    Après avoir mentionné les demandes de contrôle en amont ici et là, qu'est-ce que cela pourrait signifier?

    Les demandes de contrôle en amont se produisent lorsque le client doit envoyer une demande de contrôle en amont avant la demande principale. le demande de contrôle en amont est plus un sonde pour déterminer si le serveur prend en charge la requête principale sur le point d'être effectuée. Lorsque la confirmation positive est obtenue, la requête principale est alors envoyée.

    Lorsqu'une demande n'est pas une demande de contrôle en amont, elle est appelée demande simple.

    Mettre en œuvre CORS

    Vous souhaiterez principalement configurer les éléments au niveau du backend de votre application. L'implémentation dépend du framework que vous utilisez. Pour ce tutoriel, nous verrons comment le faire dans NodeJS et Rails.

    Rails

    Je vous recommande d'utiliser le rack-cors gemme. Ensuite, vous devrez l'ajouter à votre config/application.rb fichier.

    config.middleware.insert_before 0, Rack::Cors do
      allow do
        origins '*'
        resource '*',
           headers: :any,
           expose: %i(access-token expiry token-type uid client),
           methods: %i(get post put patch delete options head),
           credentials: true
      end
    end

    NodeJS

    Dans Node.js, cela ressemblera à ceci.

    app.all(‘*’, (req, res, next) => {
      res.header(‘Access-Control-Allow-Origin’, ‘*’);
      res.header(‘Access-Control-Allow-Methods’, ‘PUT, GET, POST, DELETE, PATCH, OPTIONS HEAD’);
      res.header(‘Access-Control-Allow-Headers’, ‘*’);
      res.header(‘Access-Control-Allow-Credentials’, true);
      next();
    });

    Dans l'extrait de code, nous configurons l'origine, les méthodes, les en-têtes et les informations d'identification qui devraient être autorisés à accéder aux ressources disponibles sur notre serveur. Vous pouvez également commander Écran qui fournit un module d'en-têtes de sécurité à intégrer aux applications Ruby, PHP, Python, Java, Go, Node.JS. Et pour implémenter dans Apache ou Nginx, reportez-vous à ceci guide.

    Conclusion

    CORS assouplit la politique afin que votre navigateur puisse accéder aux ressources que vous souhaitez. Comprendre ce que c'est, pourquoi c'est essentiel et comment le configurer vous aidera à déterminer les problèmes que vous pourriez rencontrer lors de la création de vos applications Web.