S3 + Cloudfront CORS 구성이 정확합니까?

S3 + Cloudfront CORS 구성이 정확합니까?

---

내 애플리케이션은 S3에 이미지를 저장 한 다음 Cloudfront를 통해 프록시합니다. 새로운 S3 CORS 지원을 사용하여 HTML5 캔버스 메서드 (교차 출처 정책이 있음)를 사용할 수 있지만 S3 및 Cloudfront를 올바르게 구성하지 못하는 것 같습니다. 이미지를 캔버스 요소로 변환하려고 할 때 여전히 "Uncaught Error : SECURITY_ERR : DOM Exception 18"이 발생합니다.

지금까지 내가 가진 내용은 다음과 같습니다.

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

태생

Origin Protocol Policy: Match Viewer

HTTP Port: 80

HTTPS Port: 443

행동

Origin: MY_WEBSITE_URL

Object Caching: Use Origin Cache Headers

Forward Cookies: None

Forward Query Strings: Yes

내가 여기에 빠진 것이 있습니까?

업데이트 : 헤더를 다음으로 변경하려고 시도했습니다.

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

이 질문을 기반으로 Amazon S3 CORS (Cross-Origin Resource Sharing) 및 Firefox 도메인 간 글꼴로드

아직 안돼.

업데이트 : 요청에 대한 추가 정보

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

최신 정보

내 요청이 올바르지 않은 것 같아서 CORS를

img.crossOrigin = '';

하지만 이미지가로드되지 않고 다음 오류가 발생합니다. Cross-Origin Resource Sharing 정책에 의해 Cross-origin 이미지로드가 거부되었습니다.

---

2014 년 6 월 26 일 AWS는 CloudFront에서 적절한 Vary : Origin 동작을 릴리스 했으므로 이제

1. 다음을 포함하여 S3 버킷에 대한 CORS 구성 설정

   <AllowedOrigin>*</AllowedOrigin>

2. CloudFront-> 배포->이 오리진에 대한 동작

   • 허용되는 HTTP 메소드 : + OPTIONS
   • 캐시 된 HTTP 메소드 + OPTIONS
   • 선택한 요청 헤더 기반 캐시 : 헤더를 화이트리스트에 추가합니다 Origin.

3. CloudFront가 새 규칙을 전파하는 동안 ~ 20 분 동안 기다립니다.

이제 CloudFront 배포는 다른 클라이언트 Origin 헤더에 대해 다른 응답 (적절한 CORS 헤더 포함)을 캐시해야합니다.

---

@Brett의 대답 을 보완 합니다. 자세히 AWS 문서 페이지가 있습니다 CloudFront를에 CORS 및 S3에 CORS는 .

자세한 단계는 다음과 같습니다.

1. S3 버킷에서 권한-> CORS 구성으로 이동 합니다.
2. 편집기에서 CORS에 대한 규칙을 추가하면 <AllowedOrigin>규칙이 중요합니다. 구성을 저장하십시오.
3. CloudFront 배포에서 동작-> 동작 선택-> 편집으로 이동합니다.
4. OPTIONS응답을 캐시 할지 여부 에 따라 AWS에 따라 두 가지 방법이 있습니다.

• OPTIONS 응답을 캐시하려면 다음을 수행하십시오.
  • OPTIONS 응답에 대한 캐싱을 활성화하는 기본 캐시 동작 설정에 대한 옵션을 선택합니다.
  • Configure CloudFront to forward the following headers: Origin, Access-Control-Request-Headers, and Access-Control-Request-Method.
• If you don't want OPTIONS responses to be cached, configure CloudFront to forward the Origin header, together with any other headers required by your origin

And with that CORS from CloudFront with S3 should work.

---

UPDATE: this is no longer true with recent changes on CloudFront. Yippee! See the other responses for the details. I'm leaving this here for context/history.

Problem

CloudFront does not support CORS 100%. The problem is how CloudFront caches the response to the request. Any other request for the same URL after that will result in the cached request no matter the origin. The key part about that is that it includes the response headers from the origin.

First request before CloudFront has anything cached from Origin: http://example.com has a response header of:

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

Second request from Origin: https://example.com (note that it is HTTPS not HTTP) also has the response header of:

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

Because that is what CloudFront cached for the URL. This is invalid -- the browser console (in Chrome at least) will show a CORS violation message and things will break.

Workaround

The suggested work around is to use different URLs for different origins. The trick is to append a unique query string that is different so that there is one cached record per origin.

So our URLs would be something like:

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

This kind of works but anyone can make your site work poorly by swapping the querystrings. Is that likely? Probably not but debugging this issue is a huge hassle.

The right workaround is to not use CloudFront with CORS until they fully support CORS.

In Practice

If you use CloudFront for CORS, have a fallback to another method that will work when CORS does not. This isn't always an option but right now I'm dynamically loading fonts with JavaScript. If the CORS-based request to CloudFront fails, I fall back to a server-side proxy to the fonts (not cross origin). This way, things keep working even though CloudFront somehow got a bad cached record for the font.

---

Not entirely sure what your issue is but:

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

answered some of my problem with CORS, S3 and Cloudfront.

또한 버킷 내의 일부 자산은 올바른 CORS 헤더와 함께 반환되고 일부는 반환되지 않는 것으로 나타났습니다. 자산을 무효화 한 후 그들은 모두 올바른 헤더를 가지고 돌아 왔고, 일부는 무효화가 필요한 이유와 다른 것은 왜 동시에 업로드되지 않았는지 확실하지 않았습니다. 동일한 유형의 버킷 :(

참조 URL : https://stackoverflow.com/questions/12358173/correct-s3-cloudfront-cors-configuration