CORS(Cross-Origin Resource Sharing)란?

CORS란?

CORS(Cross-Origin Resource Sharing)는 웹 애플리케이션에서 도메인이나 포트가 다른 서버로부터 리소스를 요청할 때 발생하는 보안 상의 제한을 우회하기 위한 메커니즘.

기본적으로 웹 브라우저는 보안 상의 이유로 동일 출처 정책(Same-Origin Policy)를 따르는데, 이는 웹 페이지가 자신과 동일한 출처(프로토콜, 도메인, 포트가 동일한 경우)의 리소스에만 접근할 수 있도록 제한하는 정책입니다.

하지만 때로는 다른 출처의 리소스에 접근해야 하는 경우가 있고, 이때 CORS를 사용하여 다른 출처의 리소스에 접근할 수 있게 됩니다.

 

출처 - https://developer.mozilla.org/ko/docs/Web/HTTP/CORS

 

CORS 단계

CORS는 브라우저와 서버 간의 통신을 위해 사용되며, 다음과 같은 단계로 동작합니다

1. 요청 전송: 브라우저에서 도메인이나 포트가 다른 서버로 AJAX 요청 등을 보낼 때, 요청 헤더에 Origin이라는 필드를 포함하여 서버에게 요청이 어떤 출처에서 온 것인지 알립니다.

 

2. 응답 확인: 서버는 요청을 받은 후, 응답 헤더에 Access-Control-Allow-Origin이라는 필드를 포함하여 허용한 출처를 명시합니다. 이 필드에는 "*"와 같은 와일드카드 값을 사용하여 모든 출처를 허용할 수도 있습니다.

 

3. 브라우저 처리: 브라우저는 서버의 응답을 확인하여 허용된 출처에서 온 응답인 경우에만 해당 리소스를 받아옵니다. 그렇지 않은 경우, 브라우저에서는 보안 상의 이유로 접근을 차단하고 에러를 발생시킵니다.

 

CORS를 구성하는 요소

• Origin: 요청이 어떤 출처에서 온 것인지를 나타냅니다.
• Access-Control-Allow-Origin: 서버가 허용하는 출처를 나타냅니다.
• Access-Control-Allow-Methods: 서버가 허용하는 HTTP 메서드를 나타냅니다.
• Access-Control-Allow-Headers: 서버가 허용하는 요청 헤더의 종류를 나타냅니다.
• Access-Control-Allow-Credentials: 서버가 요청에 쿠키를 포함할 수 있는지 여부를 나타냅니다.

CORS는 웹 애플리케이션에서 다른 도메인의 API를 사용하거나, CDN(Content Delivery Network)을 사용하는 경우 등에 많이 활용됩니다. 이를 통해 보안을 유지하면서도 다른 출처의 리소스에 접근할 수 있습니다.

 

CORS를 구현하는 방법

1. 서버 측에서 CORS 설정

• 서버는 클라이언트로부터의 요청을 받았을 때, 응답 헤더에 CORS 관련 필드를 설정해야 합니다.
• 가장 중요한 필드는 "Access-Control-Allow-Origin"입니다. 이 필드는 허용할 출처를 설정하는데, 모든 출처를 허용하려면 "*"를 사용하거나 특정 출처를 지정할 수 있습니다.
• 추가로 "Access-Control-Allow-Methods" 필드를 사용하여 허용할 HTTP 메서드를 설정할 수 있습니다.
• 필요에 따라 "Access-Control-Allow-Headers" 필드를 사용하여 허용할 요청 헤더의 종류를 설정할 수도 있습니다.
• 만약 요청에 쿠키를 포함하려면 "Access-Control-Allow-Credentials" 필드를 설정해야 합니다.

2. 클라이언트 측에서 CORS 요청

• 클라이언트는 XMLHttpRequest 객체나 fetch API 등을 사용하여 서버에 요청을 보낼 때, 요청 헤더에 "Origin" 필드를 포함해야 합니다. 이 필드에는 요청이 어떤 출처에서 온 것인지를 명시합니다.
• 브라우저는 해당 요청을 보낼 때, 서버로부터의 응답을 확인하여 CORS 정책을 준수하는지 검사하고, 허용된 출처에서 온 응답인 경우에만 해당 리소스를 받아옵니다.
• 만약 특정 요청에 쿠키를 포함하려면, 요청 헤더에 "credentials: 'include'"와 같이 설정해야 합니다.

CORS를 구현하기 위해서는 서버와 클라이언트 양쪽에서 설정이 필요합니다. 서버는 응답 헤더를 설정하여 허용할 출처와 다른 관련 설정을 명시하고, 클라이언트는 요청 헤더에 출처를 포함하여 서버에 요청을 보냅니다. 이렇게 함으로써 브라우저는 CORS 정책을 준수하며 안전한 방식으로 다른 출처의 리소스에 접근할 수 있습니다.

 

 

CORS 예시를 들어보겠습니다.

예를 들어, 도메인 A(https://beombe.com)의 웹 애플리케이션에서 AJAX를 사용하여 도메인 B(https://kyle.com)의 API에 요청을 보내려고 합니다.

 

1. 요청 전송

• 도메인 A의 웹 애플리케이션에서 AJAX 요청을 보냅니다.
• 요청 헤더에 Origin 필드가 "https://beombe.com"로 설정되어 있습니다.

2. 응답 확인

• 도메인 B의 서버는 요청을 받은 후, 응답 헤더에 Access-Control-Allow-Origin 필드를 포함하여 허용할 출처를 설정합니다.
• 만약 도메인 B의 서버가 모든 출처를 허용하려면, 응답 헤더에 "Access-Control-Allow-Origin: *"을 설정할 수 있습니다.
• 그렇지 않은 경우, 응답 헤더에 "Access-Control-Allow-Origin: https://beombe.com"과 같이 출처를 명시합니다.

3. 브라우저 처리

• 브라우저는 서버의 응답을 확인하여 출처가 허용되었는지 확인합니다.
• 만약 응답 헤더에 "Access-Control-Allow-Origin: https://beombe.com"이 포함되어 있다면, 브라우저는 해당 리소스를 받아옵니다.
• 그렇지 않은 경우, 브라우저는 보안 상의 이유로 접근을 차단하고 에러를 발생시킵니다.

위의 예시에서는 도메인 A의 웹 애플리케이션이 도메인 B의 API에 접근하기 위해 CORS를 사용하고 있습니다. 서버는 요청을 받은 후, 출처를 확인하여 허용할 출처를 설정하고, 브라우저는 서버의 응답을 확인하여 리소스에 접근할지 여부를 결정합니다.

이와 같은 방식으로 CORS를 사용하면 웹 애플리케이션에서 다른 도메인의 리소스를 안전하게 활용할 수 있습니다.

 

아래 사이트에서 확인해보시면서 정독하시는것을 추천드립니다.

https://developer.mozilla.org/ko/docs/Web/HTTP/CORS