Configurer le partage des ressources entre origines multiples (CORS)

Le partage des ressources entre origines multiples (CORS, Cross Origin Resource Sharing) est un mécanisme permettant les interactions entre des ressources d'origines différentes, ce qui est normalement interdit afin d'empêcher tout comportement malveillant. Cet article explique comment configurer le CORS sur un bucket Cloud Storage.

Pour plus d'informations sur la compatibilité du CORS avec Cloud Storage, consultez la page Partage des ressources entre origines multiples (CORS).

Configurer le CORS sur un bucket

Pour définir la configuration CORS sur un bucket, spécifiez des informations telles que les méthodes HTTP et les domaines d'origine, qui identifient les types de requêtes qu'il acceptera. Vous pouvez utiliser l'outil de ligne de commande gsutil, l'API XML, l'API JSON ou les bibliothèques clientes pour Cloud Storage pour définir la configuration CORS sur un bucket.

L'exemple suivant montre comment configurer le CORS sur le bucket nommé example-bucket. La configuration CORS est définie comme suit :

• Elle autorise les requêtes provenant de example.appspot.com.
• Elle autorise les requêtes utilisant les méthodes HTTP GET, HEAD ou DELETE.
• Elle autorise le partage de l'en-tête de réponse Content-Type entre plusieurs origines.

• Dans le cas des requêtes pré-vérifiées, elle permet au navigateur d'effectuer des requêtes pendant 3 600 secondes (une heure) avant qu'il ne doive répéter la requête de pré-vérification.

gsutil

Exécutez la commande gsutil cors pour configurer le CORS sur un bucket :

gsutil cors set cors-json-file.json gs://example-bucket

Où cors-json-file.json représente un fichier local qui contient le code suivant :

[
    {
      "origin": ["http://example.appspot.com"],
      "responseHeader": ["Content-Type"],
      "method": ["GET", "HEAD", "DELETE"],
      "maxAgeSeconds": 3600
    }
]

Vous pouvez également exécuter la commande gsutil cors pour obtenir la configuration CORS d'un bucket :

gsutil cors get gs://example-bucket

Bibliothèques clientes

Pour définir ou obtenir la configuration CORS d'un bucket de manière automatisée, utilisez l'une des bibliothèques clientes pour Cloud Storage. Reportez-vous au contenu de référence suivant pour commencer :

• Référence Go : type BucketHandle
• Référence Java : Classe Cors
• Node.js : Bucket
• Référence PHP : Google\Cloud\Storage\StorageClient
• Référence Python : cors
• Référence Ruby : Google::Cloud::Storage

API REST

API JSON

Exécutez la méthode Buckets: insert de l'API JSON pour configurer le CORS sur un nouveau bucket, ou bien la méthode Buckets: patch pour le configurer sur un bucket existant. L'exemple suivant illustre l'utilisation de la méthode Buckets: patch.

PATCH /storage/v1/b/example-bucket?fields=cors HTTP/1.1
Host: www.googleapis.com
Authorization: Bearer ya29.AHES6ZRVmB7fkLtd1XTmq6mo0S1wqZZi3-Lh_s-6Uw7p8vtgSwg
content-length: 132
accept: application/json
accept-encoding: gzip, deflate
content-type: application/json

{
  "location": "us-east-1",
  "storageClass": "regional",
  "cors": [
      {
          "maxAgeSeconds": "3600",
          "method": [
             "GET"
             "HEAD"
             "DELETE"
          ],
          "origin": [
             "http://example.appspot.com"
          ],
          "responseHeader":[
            "Content-Type"
         ]
      }
  ]
}

Remarque : Utilisez OAuth 2.0 pour obtenir un jeton d'autorisation avec lequel appeler l'API JSON. Pour obtenir manuellement un jeton utilisable immédiatement, utilisez OAuth 2.0 Playground. Pour plus d'informations sur la configuration d'OAuth pour votre application, consultez la page Utiliser le protocole OAuth 2.0 pour l'accès aux API Google.

Vous pouvez obtenir la configuration CORS d'un bucket à l'aide de la méthode Buckets: get :

GET https://www.googleapis.com/storage/v1/b/example-bucket
Authorization: Bearer ya29.AHES6ZRVmB7fkLtd1XTmq6mo0S1wqZZi3-Lh_s-6Uw7p8vtgSwg

API XML

Configurez le CORS sur un bucket à l'aide de la méthode de définition de la configuration CORS d'un bucket de l'API XML.

PUT http://storage.googleapis.com/example-bucket?cors HTTP/1.1
Host: storage.googleapis.com
Content-Length: 412
Authorization: Bearer ya29.AHES6ZRVmB7fkLtd1XTmq6mo0S1wqZZi3-Lh_s-6Uw7p8vtgSwg

<?xml version="1.0" encoding="UTF-8"?>
<CorsConfig>
  <Cors>
    <Origins>
      <Origin>http://example.appspot.com</Origin>
    </Origins>
    <Methods>
      <Method>GET</Method>
      <Method>HEAD</Method>
      <Method>DELETE</Method>
    </Methods>
    <ResponseHeaders>
      <ResponseHeader>Content-Type</ResponseHeader>
    </ResponseHeaders>
    <MaxAgeSec>3600</MaxAgeSec>
  </Cors>
</CorsConfig>

Remarque : Utilisez OAuth 2.0 pour obtenir un jeton d'autorisation avec lequel appeler l'API JSON. Pour obtenir manuellement un jeton utilisable immédiatement, utilisez OAuth 2.0 Playground. Pour plus d'informations sur la configuration d'OAuth pour votre application, consultez la page Utiliser le protocole OAuth 2.0 pour l'accès aux API Google.

Vous pouvez obtenir la configuration CORS d'un bucket à l'aide de la méthode Obtenir la configuration CORS d'un bucket :

GET http://storage.googleapis.com/example-bucket?cors HTTP/1.1
Host: storage.googleapis.com
Authorization: Bearer ya29.AHES6ZRVmB7fkLtd1XTmq6mo0S1wqZZi3-Lh_s-6Uw7p8vtgSwg

Résoudre les problèmes liés aux requêtes CORS

Si vous constatez un comportement inattendu lorsque vous accédez à des buckets Cloud Storage d'une autre origine, procédez comme suit :

1. Utilisez gsutil cors get sur le bucket cible pour obtenir sa configuration CORS. Si vous disposez de plusieurs entrées de configuration CORS, assurez-vous que les valeurs de la requête sont mappées avec les valeurs d'une seule entrée de configuration CORS tout au long des étapes suivantes.

2. Examinez une requête et sa réponse à l'aide de l'outil de votre choix. Dans un navigateur Chrome, vous pouvez utiliser les outils de développement standards pour afficher ces informations :

   1. Cliquez sur le menu Chrome dans la barre d'outils du navigateur.
   2. Sélectionnez Plus d'outils > Outils de développement.
   3. Cliquez sur l'onglet Réseau.
   4. À partir de votre application ou de votre ligne de commande, envoyez la requête.
   5. Dans le volet affichant l'activité du réseau, localisez la requête.
   6. Dans la colonne Name (Nom), cliquez sur le nom correspondant à la requête.
   7. Cliquez sur l'onglet Headers (En-têtes) pour voir les en-têtes de réponse ou sur l'onglet Response (Réponse) pour voir le contenu de la réponse.

   Si vous ne voyez ni requête ni réponse, il est possible que votre navigateur ait mis en cache une tentative de requête de pré-vérification ayant échoué précédemment. Si vous videz le cache de votre navigateur, cela devrait également vider le cache de pré-vérification. Dans le cas contraire, diminuez la valeur MaxAgeSec dans votre configuration CORS (la valeur par défaut est 1 800 (30 minutes) si elle n'est pas spécifiée), attendez pendant la durée de l'ancienne valeur MaxAgeSec, puis renouvelez la requête. Cela entraîne l'exécution d'une nouvelle requête de pré-vérification, qui récupère la nouvelle configuration CORS et purge les entrées du cache. Une fois que vous avez résolu votre problème, augmentez à nouveau la valeur MaxAgeSec afin de réduire le trafic de pré-vérification dans le bucket.

3. Assurez-vous que la requête comporte un en-tête Origin et que la valeur de ce dernier correspond à au moins l'une des valeurs Origins figurant dans la configuration CORS du bucket. Notez que le schéma, l'hôte et le port des valeurs doivent correspondre exactement. Voici quelques exemples de correspondances acceptables :

   • http://origin.example.com correspond à http://origin.example.com:80 (car 80 est le port HTTP par défaut), mais ne correspond pas à https://origin.example.com, ni à http://origin.example.com:8080, http://origin.example.com:5151 et http://sub.origin.example.com.

   • https://example.com:443 correspond à https://example.com, mais pas à http://example.com ni à http://example.com:443.

   • http://localhost:8080 ne correspond exactement qu'à http://localhost:8080, pas à http://localhost:5555 ni à http://localhost.example.com:8080.

4. Assurez-vous que la méthode HTTP de la requête (s'il s'agit d'une requête simple) ou que la méthode spécifiée dans Access-Control-Request-Method (s'il s'agit d'une requête de pré-vérification) correspond à au moins l'une des valeurs Methods figurant dans la configuration CORS du bucket.

5. S'il s'agit d'une requête de pré-vérification, voyez si elle inclut un ou plusieurs en-têtes Access-Control-Request-Header. Le cas échéant, assurez-vous que chaque valeur Access-Control-Request-Header correspond à une valeur ResponseHeader de la configuration CORS du bucket. Tous les en-têtes nommés dans Access-Control-Request-Header doivent figurer dans la configuration CORS pour que la requête de pré-vérification aboutisse et pour inclure les en-têtes CORS dans la réponse.