[AWS] CORS(Cross-Origin Resource Sharing)란? 아주 쉽게 정리 (feat. S3 버킷)

 

Cross-Origin Resource Sharing

CORS 

CORS는 브라우저의 보안 정책이다. 브라우저 쪽(예: Google, Microsoft Edge, Firefox)에서 작동되는 보안 장치이다

메인 사이트 (example.com)에서 다른 사이트 B(receiver.kr)의 데이터를 요청할 때, CORS는 이 요청을 허락할지 차단할지 정한다. 즉, CORS는 웹 사이트 간에 데이터를 주고받을 때 보안을 위해 사용되는 것이다.

👩‍🏫상황 예시

- 메인 사이트: example.com
- 다른 사이트: receiver.kr

example.com에 있는 JavaScript 코드가 receiver.kr 에서 제공하는 데이터를 가져오라고 할 경우

• 브라우저는 보안을 위해 메인 사이트( example.com ) 외의 다른 사이트에 마음대로 요청을 보내면 안되게 정해져있다. (이유: 가져온 데이터가 해킹 코드면 아주 위험하자나)
• 서버는 "CORS 규칙"을 통해 데이터를 받아도 되는 사이트 목록을 지정한다.
• 브라우저는 다른 사이트( receiver.kr )에 데이터를 가져와도, CORS에 지정된 사이트가 아니면 가져온 데이터를 차단한다.

 

쉽게 말해 CORS는 다른 웹사이트에서 내 데이터를 마음대로 가져가지 못하게 막는 것이 그 목적이다.
웹사이트마다 도메인이 다른데, CORS가 없으면 악의적인 웹사이트가 내 정보를 훔쳐갈 수 있다.

웹 브라우저는 웹페이지의 도메인 이름과 다른 서버에서 온 요청은 기본적으로 CORS에 의해 차단한다.

 

https://aws.amazon.com/ko/what-is/cross-origin-resource-sharing/?nc1=h_ls

CORS란 무엇입니까? - 교차 오리진 리소스 공유 설명 - AWS

 

---

🤔 문제

회사에서 한 자회사를 위해 Amazon S3에 클라이언트 측 웹 애플리케이션을 호스팅하고 있으며, 이 웹 애플리케이션은 Amazon CloudFront를 통해 https://www.example.com에서 액세스할 수 있습니다. 성공적으로 배포한 후, 회사는 나머지 세 개의 자회사용 클라이언트 측 웹 애플리케이션을 각각 별도의 S3 버킷에 호스팅하려고 합니다.
이를 위해 개발자는 모든 공통 JavaScript 파일과 웹 글꼴을 중앙 S3 버킷으로 옮겨 각 웹 애플리케이션에서 해당 파일을 사용할 수 있도록 설정했습니다. 하지만 테스트 중에 브라우저가 JavaScript 파일과 웹 글꼴을 차단하는 문제가 발생했습니다.
개발자가 브라우저에서 JavaScript 파일과 웹 글꼴이 차단되지 않도록 하려면 어떻게 해야 할까요?

 

1. 네 개의 액세스 포인트를 생성하여 중앙 S3 버킷에 대한 접근을 허용하고, 각 웹 애플리케이션 버킷에 액세스 포인트를 할당합니다.
2. 중앙 S3 버킷에 접근을 허용하는 버킷 정책을 생성하고 이를 중앙 S3 버킷에 연결합니다.
3.  중앙 S3 버킷에 대한 접근을 허용하는 교차 출처 리소스 공유(CORS) 설정을 생성하고, 이를 중앙 S3 버킷에 추가합니다.
4. 중앙 S3 버킷에 대한 무결성 검사를 제공하는 Content-MD5 헤더를 생성하고, 각 웹 애플리케이션 요청에 Content-MD5 헤더를 추가합니다.

정답 & 오답

정답: 3번
브라우저가 자바스크립트 파일과 웹 글꼴을 차단하는 문제는 교차 출처 리소스(CORS) 정책 때문이다.

이를 해결하려면 중앙 S3 버킷에 CORS 설정을 추가하여 웹 애플리케이션의 다른 출처에서도 이러한 리소스에 접근할 수 있도록 허용해야 한다.

 

1. AWS Management Console에서 central S3 bucket에 가기
2. Permissions 탭에 CORS Configuration를 찾기
3. 아래와 같은 CORS rule를 추가하기

[
  {
    "AllowedOrigins": ["https://www.example1.com", "https://www.example2.com", "https://www.example3.com"],
    "AllowedMethods": ["GET"],
    "AllowedHeaders": ["*"]
  }
]