Partage des ressources cross-origine (CORS) - Amazon Simple Storage Service
Partage des ressources de plusieurs origines : scénarios de cas d'utilisationComment configurer le CORS sur un compartiment ?Comment Amazon S3 évalue la configuration CORS sur un compartiment ?

Partage des ressources cross-origine (CORS)

Le partage des ressources cross-origin (CORS) définit un moyen pour les applications Web clientes chargées dans un domaine particulier d'interagir avec les ressources d'un autre domaine. Le CORS vous permet de créer de riches applications web côté client avec Amazon S3 et d'autoriser de manière sélective un accès cross-origin à vos ressources Amazon S3.

Cette section fournit une présentation du CORS. Les sous-rubriques décrivent comment activer le CORS grâce à la console Amazon S3, ou par programmation grâce à l'API REST Amazon S3 et aux kits SDK AWS.

Rubriques

Partage des ressources de plusieurs origines : scénarios de cas d'utilisation

Les exemples de scénarios suivants utilisent le partage CORS.

Scénario 1

Supposons que vous hébergiez un site Internet dans un compartiment Amazon S3 appelé website, comme décrit dans Hébergement d'un site web statique sur Amazon S3. Les utilisateurs chargent le point de terminaison du site web : 

http://website.s3-website.us-east-1.amazonaws.com

À présent, vous souhaitez utiliser JavaScript sur les pages web stockées dans ce compartiment pour pouvoir faire des demandes authentifiées GET et PUT sur le même compartiment grâce au point de terminaison de l'API d'Amazon 3 pour le compartiment, website.s3.us-east-1.amazonaws.com. En principe, un navigateur empêcherait JavaScript d'autoriser ces demandes, mais avec le partage CORS, vous pouvez configurer le compartiment pour autoriser explicitement les demandes cross-origin de website.s3-website.us-east-1.amazonaws.com.

Scénario 2

Supposons que vous souhaitez héberger une police web à partir de votre compartiment S3. Une fois encore, les navigateurs requièrent un contrôle CORS (aussi appelé contrôle en amont) pour le chargement des polices web. Vous configurez le compartiment qui héberge la police web pour permettre à toute origine d'effectuer ces demandes.

Comment configurer le CORS sur un compartiment ?

Pour configurer le compartiment afin qu'il autorise les demandes cross-origin, vous créez une configuration CORS. La configuration CORS est un document contenant les règles identifiant les origines auxquelles vous autorisez l'accès au compartiment, les opérations (méthodes HTTP) prises en charge pour chaque origine, et d'autres informations propres aux opérations. Vous pouvez ajouter jusqu'à 100 règles à la configuration. Vous pouvez ajouter la configuration CORS en tant que sous-ressource cors au compartiment.

Si vous configurez le CORS dans la console S3, vous devez utiliser JSON pour créer une configuration CORS. La nouvelle console S3 ne prend en charge que les configurations JSON CORS.

Important

Dans la nouvelle console S3, la configuration CORS doit être de type JSON.

Au lieu d'accéder à un site web en utilisant un point de terminaison de site web Amazon S3, vous pouvez utiliser votre propre domaine, comme example1.com, pour proposer votre contenu. Pour plus d'informations sur l'utilisation de votre propre domaine, consultez Configuration d'un site web statique à l'aide d'un domaine personnalisé enregistré auprès de Route 53.

Exemple 1

L'exemple de configuration cors suivant possède trois règles, qui sont spécifiées comme éléments CORSRule :

  • La première règle autorise des demandes cross-origin PUT, POST et DELETE de l'origine http://www.example1.com. La règle autorise également tous les en-têtes dans une demande OPTIONS en amont via l'en-tête Access-Control-Request-Headers. En réponse à toute demande OPTIONS en amont, Amazon S3 renvoie les en-têtes demandés.

  • La deuxième règle autorise les mêmes demandes cross-origin que la première, mais elle s'applique à une autre origine, http://www.example2.com.

  • La troisième règle permet des demandes GET cross-origin de toutes les origines. Le caractère générique * fait référence à toutes les origines.

XML
<CORSConfiguration>
 <CORSRule>
   <AllowedOrigin>http://www.example1.com</AllowedOrigin>

   <AllowedMethod>PUT</AllowedMethod>
   <AllowedMethod>POST</AllowedMethod>
   <AllowedMethod>DELETE</AllowedMethod>

   <AllowedHeader>*</AllowedHeader>
 </CORSRule>
 <CORSRule>
   <AllowedOrigin>http://www.example2.com</AllowedOrigin>

   <AllowedMethod>PUT</AllowedMethod>
   <AllowedMethod>POST</AllowedMethod>
   <AllowedMethod>DELETE</AllowedMethod>

   <AllowedHeader>*</AllowedHeader>
 </CORSRule>
 <CORSRule>
   <AllowedOrigin>*</AllowedOrigin>
   <AllowedMethod>GET</AllowedMethod>
 </CORSRule>
</CORSConfiguration>
JSON
[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "http://www.example1.com"
        ],
        "ExposeHeaders": []
    },
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "http://www.example2.com"
        ],
        "ExposeHeaders": []
    },
    {
        "AllowedHeaders": [],
        "AllowedMethods": [
            "GET"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    }
]

Exemple 2

La configuration CORS permet également d'ajouter des paramètres facultatifs, comme illustré dans la configuration CORS suivante. Dans cet exemple, la configuration CORS permet les demandes PUT, POST et DELETE cross-origin depuis l'origine http://www.example.com.

XML
<CORSConfiguration>
 <CORSRule>
   <AllowedOrigin>http://www.example.com</AllowedOrigin>
   <AllowedMethod>PUT</AllowedMethod>
   <AllowedMethod>POST</AllowedMethod>
   <AllowedMethod>DELETE</AllowedMethod>
   <AllowedHeader>*</AllowedHeader>
  <MaxAgeSeconds>3000</MaxAgeSeconds>
  <ExposeHeader>x-amz-server-side-encryption</ExposeHeader>
  <ExposeHeader>x-amz-request-id</ExposeHeader>
  <ExposeHeader>x-amz-id-2</ExposeHeader>
 </CORSRule>
</CORSConfiguration>
JSON
[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "http://www.example.com"
        ],
        "ExposeHeaders": [
            "x-amz-server-side-encryption",
            "x-amz-request-id",
            "x-amz-id-2"
        ],
        "MaxAgeSeconds": 3000
    }
]

L'élément CORSRule dans la configuration précédente inclut les éléments facultatifs suivants :

  • MaxAgeSeconds : spécifie le nombre d'heures en secondes (dans cet exemple, 3 000) pendant lesquelles le navigateur met en cache une réponse Amazon S3 à une demande OPTIONS en amont pour la ressource spécifiée. Le fait de mettre en cache la réponse évite au navigateur de devoir envoyer les demandes en amont à Amazon S3 si la demande originale est répétée.

  • ExposeHeader : identifie les en-têtes de réponse (dans cet exemple, x-amz-server-side-encryption, x-amz-request-id et x-amz-id-2) auxquels les clients peuvent accéder à partir de leurs applications (par exemple, à partir d'un objet XMLHttpRequest JavaScript).

Élément AllowedMethod

Dans la configuration CORS, vous pouvez spécifier les valeurs suivantes pour l'élément AllowedMethod.

  • GET

  • PUT

  • POST

  • DELETE

  • HEAD

Élément AllowedOrigin

Dans l'élément AllowedOrigin, vous spécifiez les origines à partir desquelles vous souhaitez autoriser des demandes cross-domaine, par exemple, http://www.example.com. La chaîne de caractères d'origine peut contenir au maximum un caractère générique *, comme http://*.example.com. Si vous le souhaitez, vous pouvez spécifier * comme l'origine pour permettre à toutes les origines d'envoyer des demandes cross-origin. Vous pouvez également spécifier https pour permettre uniquement les origines sécurisées.

Élément AllowedHeader

L'élément AllowedHeader spécifie les en-têtes autorisés dans une demande en amont via l'en-tête Access-Control-Request-Headers. Chaque nom d'en-tête dans l'en-tête Access-Control-Request-Headers doit correspondre à une entrée dans la règle. Amazon S3 envoie uniquement dans une réponse les en-têtes autorisés qui ont été demandés. Pour obtenir un exemple de liste d'en-têtes pouvant être utilisés dans les demandes adressées à Amazon S3, veuillez accéder à En-têtes de demande courants dans la Référence d'API Amazon Simple Storage Service.

Chaque chaîne de caractères AllowedHeader dans la règle peut contenir au maximum un caractère générique *. Par exemple, <AllowedHeader>x-amz-*</AllowedHeader> permet tous les en-têtes propres à Amazon.

Élément ExposeHeader

Chaque élément ExposeHeader identifie un en-tête dans la réponse auquel vous souhaitez que les clients puissent accéder depuis leurs applications (par exemple, depuis un objet XMLHttpRequest JavaScript). Pour obtenir la liste des en-têtes de réponse Amazon S3 courants, veuillez accéder à En-têtes de réponse courants dans la Référence d'API Amazon Simple Storage.

Élément MaxAgeSeconds

L'élément MaxAgeSeconds spécifie le nombre d'heures en secondes pendant lesquelles le navigateur peut mettre en cache une réponse pour une demande en amont comme identifié par la ressource, la méthode HTTP et l'origine.

Comment Amazon S3 évalue la configuration CORS sur un compartiment ?

Lorsque Amazon S3 reçoit une demande en amont d'un navigateur, il évalue la configuration CORS du compartiment et utilise la première règle CORSRule qui correspond à la demande entrante du navigateur pour permettre une demande cross-origin. Pour qu'une règle corresponde, les conditions suivantes doivent être remplies :

  • L'en-tête Origin de la demande doit correspondre à un élément AllowedOrigin.

  • La méthode de demande (par exemple, GET ou PUT) ou l'en-tête Access-Control-Request-Method dans le cas d'une demande OPTIONS en amont doit être l'un des éléments AllowedMethod.

  • Chaque en-tête listé dans l'en-tête Access-Control-Request-Headers de la demande sur la demande en amont doit correspondre à un élément AllowedHeader.

Note

Les listes ACL et stratégies continuent de s'appliquer lorsque vous activer le CORS sur le compartiment.