Le partage des ressources entre origines multiples (CORS, Cross Origin Resource Sharing) permet 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.
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 que le bucket peut accepter.
Pour définir une configuration CORS dans votre bucket, procédez comme suit :
Console
Vous ne pouvez pas gérer le CORS à l'aide de la console Google Cloud. Utilisez plutôt gsutil.
gsutil
Créez un fichier JSON avec la configuration CORS que vous souhaitez appliquer. Consultez ces exemples de configuration pour obtenir des exemples de fichiers JSON.
Utilisez la commande
gsutil cors
pour appliquer la configuration à un bucket :gsutil cors set CORS_CONFIG_FILE gs://BUCKET_NAME
Où :
CORS_CONFIG_FILE
est le chemin d'accès au fichier JSON que vous avez créé à l'étape 1.BUCKET_NAME
correspond au nom du bucket concerné. Exemple :my-bucket
Exemples de code
C++
Pour en savoir plus, consultez la documentation de référence de l'API Cloud Storage en langage C++.
L'exemple suivant définit une configuration CORS sur un bucket :
L'exemple suivant supprime toute configuration CORS existante d'un bucket :
C#
Pour en savoir plus, consultez la documentation de référence de l'API Cloud Storage en langage C#.
L'exemple suivant définit une configuration CORS sur un bucket :
L'exemple suivant supprime toute configuration CORS existante d'un bucket :
Go
Pour en savoir plus, consultez la documentation de référence de l'API Cloud Storage en langage Go.
L'exemple suivant définit une configuration CORS sur un bucket :
L'exemple suivant supprime toute configuration CORS existante d'un bucket :
Java
Pour en savoir plus, consultez la documentation de référence de l'API Cloud Storage en langage Java.
L'exemple suivant définit une configuration CORS sur un bucket :
L'exemple suivant supprime toute configuration CORS existante d'un bucket :
Node.js
Pour en savoir plus, consultez la documentation de référence de l'API Cloud Storage en langage Node.js.
L'exemple suivant définit une configuration CORS sur un bucket :
L'exemple suivant supprime toute configuration CORS existante d'un bucket :
PHP
Pour en savoir plus, consultez la documentation de référence de l'API Cloud Storage en langage PHP.
L'exemple suivant définit une configuration CORS sur un bucket :
L'exemple suivant supprime toute configuration CORS existante d'un bucket :
Python
Pour en savoir plus, consultez la documentation de référence de l'API Cloud Storage en langage Python.
L'exemple suivant définit une configuration CORS sur un bucket :
L'exemple suivant supprime toute configuration CORS existante d'un bucket :
Ruby
Pour en savoir plus, consultez la documentation de référence de l'API Cloud Storage en langage Ruby.
L'exemple suivant définit une configuration CORS sur un bucket :
L'exemple suivant supprime toute configuration CORS existante d'un bucket :
API REST
API JSON
- Obtenez un jeton d'autorisation d'accès sur la page OAuth 2.0 Playground. Configurez Playground pour utiliser vos propres identifiants OAuth. Pour obtenir des instructions, consultez la page Authentification des API.
Créez un fichier JSON avec la configuration CORS que vous souhaitez appliquer. Consultez ces exemples de configuration pour obtenir des exemples de fichiers JSON.
Exécutez
cURL
pour appeler l'API JSON avec une requête de bucketPATCH
:curl --request PATCH \ 'https://storage.googleapis.com/storage/v1/b/BUCKET_NAME?fields=cors' \ --header 'Authorization: Bearer OAUTH2_TOKEN' \ --header 'Content-Type: application/json' \ --data-binary @CORS_CONFIG_FILE
Où :
BUCKET_NAME
est le nom du bucket. Exemple :my-bucket
.OAUTH2_TOKEN
correspond au jeton d'accès que vous avez généré à l'étape 1.CORS_CONFIG_FILE
est le chemin d'accès au fichier JSON que vous avez créé à l'étape 2.
API XML
- Obtenez un jeton d'autorisation d'accès sur la page OAuth 2.0 Playground. Configurez Playground pour utiliser vos propres identifiants OAuth. Pour obtenir des instructions, consultez la page Authentification des API.
Créez un fichier XML avec la configuration CORS que vous souhaitez appliquer. Consultez les exemples de configuration pour obtenir des exemples de fichiers XML.
Exécutez
cURL
pour appeler l'API XML avec une requêteSet Bucket CORS
:curl -X PUT --data-binary @CORS_CONFIG_FILE \ -H "Authorization: Bearer OAUTH2_TOKEN" \ -H "x-goog-project-id: PROJECT_ID" \ "https://storage.googleapis.com/BUCKET_NAME?cors"
Où :
BUCKET_NAME
est le nom du bucket. Exemple :my-bucket
.OAUTH2_TOKEN
correspond au jeton d'accès que vous avez généré à l'étape 1.PROJECT_ID
correspond à l'ID du projet associé au bucket. Exemple :my-project
CORS_CONFIG_FILE
correspond au chemin d'accès au fichier XML que vous avez créé à l'étape 2.
Afficher la configuration CORS d'un bucket
Pour afficher la configuration CORS d'un bucket, procédez comme suit :
Console
Vous ne pouvez pas gérer le CORS à l'aide de la console Google Cloud. Utilisez plutôt gsutil.
gsutil
Exécutez la commande gsutil cors
pour obtenir la configuration CORS d'un bucket :
gsutil cors get gs://BUCKET_NAME
où BUCKET_NAME
est le nom du bucket. Exemple : my-bucket
.
Exemples de code
Pour afficher la configuration CORS d'un bucket à l'aide des bibliothèques clientes, suivez les instructions pour afficher les métadonnées d'un bucket et recherchez le champ CORS dans la réponse :
C++
Pour en savoir plus, consultez la documentation de référence de l'API Cloud Storage en langage C++.
C#
Pour en savoir plus, consultez la documentation de référence de l'API Cloud Storage en langage C#.
Go
Pour en savoir plus, consultez la documentation de référence de l'API Cloud Storage en langage Go.
Java
Pour en savoir plus, consultez la documentation de référence de l'API Cloud Storage en langage Java.
Node.js
Pour en savoir plus, consultez la documentation de référence de l'API Cloud Storage en langage Node.js.
PHP
Pour en savoir plus, consultez la documentation de référence de l'API Cloud Storage en langage PHP.
Python
Pour en savoir plus, consultez la documentation de référence de l'API Cloud Storage en langage Python.
Ruby
Pour en savoir plus, consultez la documentation de référence de l'API Cloud Storage en langage Ruby.
API REST
API JSON
- Obtenez un jeton d'autorisation d'accès sur la page OAuth 2.0 Playground. Configurez Playground pour utiliser vos propres identifiants OAuth. Pour obtenir des instructions, consultez la page Authentification des API.
Exécutez
cURL
pour appeler l'API JSON avec une requête de bucketGET
:curl -X GET \ -H "Authorization: Bearer OAUTH2_TOKEN" \ "https://storage.googleapis.com/storage/v1/b/BUCKET_NAME?fields=cors"
Où :
OAUTH2_TOKEN
correspond au nom du jeton d'accès que vous avez généré à l'étape 1 ;BUCKET_NAME
correspond au nom du bucket concerné. Exemple :my-bucket
.
API XML
- Obtenez un jeton d'autorisation d'accès sur la page OAuth 2.0 Playground. Configurez Playground pour utiliser vos propres identifiants OAuth. Pour obtenir des instructions, consultez la page Authentification des API.
Utilisez
cURL
pour appeler l'API XML avec une requête de bucketGET
:curl -X GET \ -H "Authorization: Bearer OAUTH2_TOKEN" \ "https://storage.googleapis.com/BUCKET_NAME?cors"
Où :
OAUTH2_TOKEN
correspond au nom du jeton d'accès que vous avez généré à l'étape 1 ;BUCKET_NAME
correspond au nom du bucket concerné. Par exemple,my-bucket
.
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 :
Vérifiez la configuration CORS sur le bucket cible. Si vous disposez de plusieurs entrées de configuration CORS, assurez-vous que les valeurs de requête que vous utilisez pour le dépannage sont mappées avec les valeurs d'une seule entrée de configuration CORS.
Vérifiez que vous n'envoyez pas de requête au point de terminaison
storage.cloud.google.com
, qui n'autorise pas les requêtes CORS. Pour plus d'informations sur les points de terminaison compatibles avec le CORS, consultez la section Compatibilité du CORS avec Cloud Storage.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 :
- Cliquez sur le menu Chrome
dans la barre d'outils du navigateur.
- Sélectionnez Plus d'outils > Outils de développement.
- Cliquez sur l'onglet Réseau.
- À partir de votre application ou de votre ligne de commande, envoyez la requête.
- Dans le volet affichant l'activité du réseau, localisez la requête.
- Dans la colonne Name (Nom), cliquez sur le nom correspondant à la requête.
- 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 valeurMaxAgeSec
, 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 valeurMaxAgeSec
afin de réduire le trafic de pré-vérification dans le bucket.- Cliquez sur le menu Chrome
Assurez-vous que la requête comporte un en-tête
Origin
et que la valeur de celui-ci correspond à au moins l'une des valeursOrigins
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
ethttp://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
.
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 valeursMethods
figurant dans la configuration CORS du bucket.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 valeurAccess-Control-Request-Header
correspond à une valeurResponseHeader
de la configuration CORS du bucket. Tous les en-têtes nommés dansAccess-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.
Exemples de configuration CORS
Les exemples suivants montrent des configurations CORS spécifiques que vous pouvez définir sur des buckets.
Configuration CORS de base
Supposons que vous disposez d'un site Web dynamique s'exécutant sur App Engine, auquel les utilisateurs peuvent accéder via your-example-website.appspot.com
. Vous disposez d'un fichier de police hébergé dans un bucket Cloud Storage nommé your-example-bucket
. Vous souhaitez utiliser la police sur votre site Web. Vous devez donc appliquer une configuration CORS sur your-example-bucket
qui permet aux navigateurs de vos utilisateurs de demander des ressources à partir du bucket. Sur la base de la configuration ci-dessous, les requêtes préliminaires sont valides pendant une heure, et les requêtes réussies de navigateur renvoient l'élément Content-Type
de la ressource dans la réponse.
gsutil
[ { "origin": ["https://your-example-website.appspot.com"], "method": ["GET"], "responseHeader": ["Content-Type"], "maxAgeSeconds": 3600 } ]
Notez que vous pouvez spécifier plusieurs origines, méthodes ou en-têtes à l'aide d'une liste d'éléments séparés par une virgule. Par exemple, "method": ["GET", "PUT"]
.
Pour en savoir plus sur la définition d'une configuration CORS, consultez la documentation gsutil cors
.
API REST
API JSON
{ "cors": [ { "origin": ["https://your-example-website.appspot.com"], "method": ["GET"], "responseHeader": ["Content-Type"], "maxAgeSeconds": 3600 } ] }
Notez que vous pouvez spécifier plusieurs origines, méthodes ou en-têtes à l'aide d'une liste d'éléments séparés par une virgule. Par exemple, "method": ["GET", "PUT"]
.
Pour connaître le format généralisé d'un fichier de configuration CORS, consultez la page représentation des ressources de bucket pour JSON.
API XML
<?xml version="1.0" encoding="UTF-8"?> <CorsConfig> <Cors> <Origins> <Origin>https://your-example-website.appspot.com</Origin> </Origins> <Methods> <Method>GET</Method> </Methods> <ResponseHeaders> <ResponseHeader>Content-Type</ResponseHeader> </ResponseHeaders> <MaxAgeSec>3600</MaxAgeSec> </Cors> </CorsConfig>
Notez que vous pouvez spécifier plusieurs origines, méthodes ou en-têtes à l'aide d'éléments distincts. Par exemple, vous pouvez inclure <Method>GET</Method>
et <Method>PUT</Method>
dans l'élément <Methods>
.
Pour connaître le format général d'un fichier de configuration CORS, consultez le format de configuration CORS pour XML.
Supprimer la configuration CORS
Lorsqu'elle est définie sur un bucket, la configuration suivante supprime tous les paramètres CORS actuels d'un bucket :
gsutil
[]
Pour en savoir plus sur la définition d'une configuration CORS, consultez la documentation gsutil cors
.
API REST
API JSON
{ "cors": [] }
Pour connaître le format généralisé d'un fichier de configuration CORS, consultez la page représentation des ressources de bucket pour JSON.
API XML
<CorsConfig></CorsConfig>
Pour connaître le format général d'un fichier de configuration CORS, consultez le format de configuration CORS pour XML.
Étape suivante
- En savoir plus sur le partage des ressources entre origines multiples (CORS)