Question Configuration correcte de S3 + Cloudfront CORS?


Mon application stocke les images sur S3, puis les transmet via Cloudfront. Je suis ravi d'utiliser le nouveau support S3 CORS pour pouvoir utiliser les méthodes de canevas HTML5 (qui ont une politique d'origine croisée) mais ne semblent pas pouvoir configurer correctement mon S3 et mon Cloudfront. Toujours en cours d'exécution dans "Uncaught Error: SECURITY_ERR: DOM Exception 18" lorsque j'essaie de convertir une image en un élément canvas.

Voici ce que j'ai jusqu'à présent:

S3

<CORSConfiguration>
  <CORSRule>
    <AllowedOrigin>MY_WEBSITE_URL</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
  </CORSRule>
  <CORSRule>
    <AllowedOrigin>MY_CLOUDFRONT_URL</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
    </CORSRule>
  </CORSConfiguration>

Cloudfront

Les origines

Origin Protocol Policy: Match Viewer

HTTP Port: 80

HTTPS Port: 443

Comportements

Origin: MY_WEBSITE_URL

Object Caching: Use Origin Cache Headers

Forward Cookies: None

Forward Query Strings: Yes

Y a-t-il quelque chose qui me manque ici?

METTRE À JOUR : Juste essayé de changer les en-têtes pour

<AllowedHeader>Content-*</AllowedHeader>
<AllowedHeader>Host</AllowedHeader>

basé sur cette question Amazon S3 CORS (partage de ressources inter-origine) et chargement de polices interdomaine Firefox

Toujours pas aller.

MISE À JOUR: PLUS D'INFO SUR DEMANDE

Request
URL:https://d1r5nr1emc2xy5.cloudfront.net/uploaded/BAhbBlsHOgZmSSImMjAxMi8wOS8xMC8xOC81NC80Mi85NC9ncmFzczMuanBnBjoGRVQ/32c0cee8
Request Method:GET
Status Code:200 OK (from cache)

METTRE À JOUR

Je pense que peut-être ma demande n'était pas correcte, alors j'ai essayé d'activer CORS avec

img.crossOrigin = '';

mais alors l'image ne se charge pas et j'obtiens l'erreur: Chargement d'image d'origine croisée refusé par la stratégie de partage des ressources entre origines.


42
2017-09-10 19:26


origine


Réponses:


Le 26 juin 2014, AWS a publié Comportement Vary: Origin correct sur CloudFront alors maintenant vous venez

  1. Définissez une configuration CORS pour votre compartiment S3, y compris

    <AllowedOrigin> * </ AllowedOrigin>

  2. Dans CloudFront -> Distribution -> Comportements pour cette origine, utilisez l'option En-têtes avant: liste blanche et ajoutez la liste blanche à l'en-tête "Origine".

  3. Attendez environ 20 minutes pendant que CloudFront propage la nouvelle règle

Désormais, votre distribution CloudFront doit mettre en cache différentes réponses (avec des en-têtes CORS corrects) pour différents en-têtes d'origine client.


96
2018-06-27 19:35



UPDATE: ceci n'est plus vrai avec les modifications récentes sur CloudFront. Hourra! Voir les autres réponses pour les détails. Je laisse ceci ici pour le contexte / histoire.

Problème

CloudFront ne prend pas en charge 100% CORS. Le problème est la façon dont CloudFront met en cache la réponse à la demande. Toute autre demande pour la même URL après cela entraînera la demande en cache peu importe l'origine. L’essentiel à cet égard est qu’il inclut les en-têtes de réponse de l’origine.

Première requête avant que CloudFront ait quelque chose en cache Origin: http://example.com a un en-tête de réponse de:

Access-Control-Allow-Origin: http://example.com

Deuxième demande de Origin: https://example.com (notez que c'est HTTPS et non HTTP) a également l'en-tête de réponse de:

Access-Control-Allow-Origin: http://example.com

Parce que c'est ce que CloudFront a mis en cache pour l'URL. Ceci est invalide - la console du navigateur (dans Chrome au moins) affichera un message de violation CORS et les choses vont se casser.

solution de contournement

La solution proposée consiste à utiliser différentes URL pour différentes origines. L'astuce consiste à ajouter une chaîne de requête unique différente, de sorte qu'il existe un enregistrement mis en cache par origine.

Donc, nos URL seraient quelque chose comme:

http://.../some.png?http_mysite.com
https://.../some.png?https_mysite.com

Ce type de travail fonctionne, mais n'importe qui peut faire en sorte que votre site fonctionne mal en échangeant les chaînes de requête. Est-ce probable? Probablement pas, mais le débogage de ce problème est un gros problème.

La solution appropriée consiste à ne pas utiliser CloudFront avec CORS tant qu'ils ne prennent pas totalement en charge CORS.

En pratique

Si vous utilisez CloudFront for CORS, optez pour une autre méthode qui fonctionne lorsque CORS ne fonctionne pas. Ce n'est pas toujours une option, mais maintenant je charge dynamiquement les polices avec JavaScript. Si la requête basée sur CORS vers CloudFront échoue, je me rabat sur un proxy côté serveur pour les polices (pas d'origine croisée). De cette façon, les choses continuent de fonctionner même si CloudFront a en quelque sorte un mauvais enregistrement en cache pour la police.


3
2018-06-05 19:04



Pas tout à fait sûr de votre problème mais:

https://forums.aws.amazon.com/thread.jspa?messageID=377513

répondu à certains de mes problèmes avec CORS, S3 et Cloudfront.

J'ai également constaté que certains actifs dans un compartiment retourneraient avec les en-têtes CORS corrects et d'autres non. Après avoir invalidé les actifs, ils sont tous revenus avec des en-têtes corrects, sans savoir pourquoi certains devaient être invalidés et d’autres non, car ils étaient téléchargés en même temps, même type de compartiment :(


1
2017-09-13 22:17