[aws] S3 (5) - CORS

S3 - CORS

CORS (Cross Origin Resource Sharing)

교차 오리진 리소스 공유

• 오리진이란?
  • 체계, 즉 프로토콜이자 호스트, 도메인, 그리고 포트 입니다.
  • ex) https://www.example.com 이란 사이트는
    • 체계 HTTPS
    • 호스트 www.example.com
    • 포트 443인 오리진입니다. (HTTP 는 port: 80)
• CORS: 리소스를 다른 오리진에서 얻을 수가 있다는 의미
• 웹브라우저에서는 기본적인 보안으로 CORS 를 갖추고 있고, 우리들이 웹사이트를 방문했을 때
  다른 오리진이 허락할 때에만 요청을 보낼 수 있도록 허락하는 설정입니다. 브라우저 기반 보안이다.
• 같은 오리진과 다른 오리진의 차이는 무엇일까?
  • 같은 Origin
    • http://example.com/app1 & http://example.com/app2
    • 첫번째 URL 에서 두번 째 URL 로 웹 브라우저간 요청이 가능
  • 다른 Origin
    • http://www.example.com & http://other.example.com
    • 첫번째 URL 에서 두번 째 URL로 요청을 할 경우 “교차 오리진 요청” 이라고 한다.
    • 올바른 CORS Header가 없으면 웹브라우저가 해당 요청을 차단한다.
• 다른 오리진에서 해당 CORS 헤더를 사용한 요청을 허용하지 않는 한,
  요청이 수행될 수 없다
• CORS 요청 헤더의 이름은 Access-Control-Allow-Origin 이라고 한다.

CORS - Diagram

웹 브라우저가 첫 번째 웹 서버를 방문한다고 가정해보자. 첫 번째 방문이기 때문에 이를 Origin 이라고 하자.
https://www.example.com로 이 웹 서버를 불러 본다. 이제 두 번째 웹 서버는 “교차 오리진”이 된다.
https://www.other.com 으로 URL이 다르기 때문이다.

웹 브라우저가 첫번째 origin을 방문했으니, 이제 이 웹 브라우저는 origin에서 업로드된 파일에 대한 요청을
교차 오리진에서 발생시켜야 한다. 이때 해당 웹 브라우저는 preflight request(사전 요청)을 보내게 된다.
이 사전 요청은 Cross Origin에게 요청을 발생시키는 것이 가능한지를 묻는다.

“Cross Origin아, 웹사이트 https://example.com에서 나를 전송하려 하는데, 니 웹사이트에 요청을 보내도 될까?” 라고 묻는 것이다. 이 때, Cross Origin이 “그럼 이렇게 해” 하고 Access-Contorl-Allow-Origin을 통해 해당 웹사이트가 허용되는지를 판단한다. 위 그림에에 초록색으로 표시된 바와 같이 오리진이 일치하므로 허용됩니다.
승인된 Methods는 GET/PUT/DELETE 가 되므로, 파일을 가져오거나, 삭제, 업데이트를 할 수 있게 되는 것이다.

교차 오리진으로 웹브라우저가 앞서 말한 동작을 할 수 있게 되는것이다. 이를 CORS Methods라고 하며 이제 웹사이트가 해당 동작을 할 수 있게 되었으니 교차 오리진 URL에 대한 GET도 가능한 셈이다. 이전에 전송받은 CORS Header가 웹 브라우저의 해당 요청을 허용하기 때문이다.

S3 CORS

• Client가 Website로 활성화된 S3 Bucket에 대해 Cross Origin Request를 하는 경우 올바른 CORS Header를 활성화할 필요가 있다.
• AWS 시험에 자주 출제되는 항목이다.
• 우리는 특정 오리진 or 전체 오리진에 대하여 요청을 허용할수 있다.

1. 웹 브라우저는 버킷에서 HTML 파일을 가지고 온다.
   • 이때 버킷은 웹사이트로 활성화된 상태
2. 두번째 버킷은 교차 오리진 버킷이 된다.
   • 이 버킷 또한 웹사이트로 활성화된 상태이며 동일한 파일을 가지고 있다
3. 버킷에 GET index.html 을 전송하면 웹사이트가 index.html 을 전송해 줄 것이다.
4. 그 index.html 파일은 다른 오리진에 있는 또 다른 파일을 위해 GET 동작이 필요하다고 요청한다.
5. 해당 버킷이 올바른 CORS Header로 구성되어있을 경우 웹브라우저가 요청을 보낼 수 있으나,
   아닐 경우에는 요청이 불가능하다.
6. 바로 이것이 CORS 의 목적이다.

여기서 보이는 바와 같이 CORS Header는 첫 번째 오리진 버킷이 아닌 교차 오리진 버킷에 구성되어야 한다.

• 두번째 버킷, 즉 Cross Origin 에서 설정에서 CORS Json 설정으로 첫번째 오리진 URL 을 등록해줘야한다.

[
    {
        "AllowedHeaders": [
            "Authorization"
        ],
        "AllowedMethods": [
            "GET"
        ],
        "AllowedOrigins": [
          	# 이곳에다가 Origin URL 을 기입해주면 되고 마지막 / 는 적지 않는다.
            "<url of first bucket with http://...without slash at the end>"
        ],
        "ExposeHeaders": [],
        "MaxAgeSeconds": 3000
    }
]