23.10.09 CORS 재정리

기존에 찾아봤던 내용이라 글이 있지만 다시 보기엔 너무 간단한 내용만 있어서 이것도 다시 정리한다. 

물론 기존에 글도 도움이 된다. 내가 당시에 어떻게 이해를 했고 생각을 했었는지 보게 되면서 이렇게 새로 정리하면서 조금 더 깊게 알게된다.

 

CORS

Cross-Origin Resource Sharing의 약자이다. *출처가 다른 자원들을 공유한다는 뜻으로, 한 출처에 있는 자원에서 다른 출처에 있는 자원에 접근하도록 하는 개념이다.

 

*출처 (Origin):   Protocol + Host + Port 3가지가 같으면 동일 출처라고 한다.

 

SOP

Same-Origin Policy의 약자이다. 웹 페이지가 자신의 출처와 다른 출처의 리소스에 직접 접근하는 것을 막는 정책으로 기본적으로 웹 페이지가 다른 도메인에서의 리소스와 상호 작용하는 것을 제한한다.

 

즉, CORS는 SOP의 제한을 일부 풀어주는 것이다. 

 

작동 원리는 크게 3가지가 있는데 

1. 단순 요청 (Simple Request)
   • 특정 조건을 충족하는 요청만 단순 요청으로 간주됩니다.
   • HTTP 메서드가 GET, HEAD, POST 중 하나여야 합니다.
   • 사용되는 HTTP 헤더는 제한된 세트 내에서만 선택되어야 합니다.
   • 이러한 요청은 브라우저가 자동으로 Preflight 요청 없이 직접 보냅니다.
   • 서버는 응답과 함께 Access-Control-Allow-Origin 헤더를 포함하여 응답합니다.
   • 브라우저는 이 응답 헤더를 분석하여 요청한 리소스에 대한 접근이 허용되는지 판단합니다.
2. 예비 요청 (Preflighted Request)
   • 브라우저는 실제 요청 전에 OPTIONS 메서드를 사용하여 서버에 Preflight 요청을 보냅니다. 이는 실제 요청이 서버에 안전하게 보내질 수 있는지 확인하기 위한 것입니다.
   • 이 요청은 보통 복잡한 HTTP 메서드나 추가 HTTP 헤더를 포함할 때 발생합니다.
   • 서버는 OPTIONS 요청에 대한 응답을 반환하고, CORS 관련 헤더 (예: Access-Control-Allow-Methods, Access-Control-Allow-Headers)를 포함합니다.
   • 브라우저는 이 응답을 기반으로 실제 요청을 보낼지 여부를 결정합니다.
     
3. 신용 요청 (Credentialed Request)
   • 요청이 사용자의 자격 증명(예: 쿠키, HTTP 인증)과 함께 보내질 경우를 의미합니다.
   • 기본적으로, CORS 요청은 사용자 신용 정보를 포함하지 않습니다.
   • 신용 정보를 포함시키려면, 요청을 만드는 JavaScript 코드에서 withCredentials 속성을 true로 설정해야 합니다. 
   • 서버 측에서는 응답 헤더에 Access-Control-Allow-Credentials: true를 명시하여 신용 정보 포함을 허용해야 합니다. 또한, Access-Control-Allow-Origin 헤더에는 구체적인 출처를 명시해야 하며, "*" 와일드카드는 사용할 수 없습니다.

 

참고

여기와 여기