CORS

📢 22/05/18 복습

---

📚 Reference

---

MDN, https://developer.mozilla.org/ko/docs/Web/HTTP/CORS
MDN, https://developer.mozilla.org/ko/docs/Web/Security/Same-origin_policy
Evans Library, https://evan-moon.github.io/2020/05/21/about-cors/
벨로퍼트와 함께하는 모던 리액트, https://react.vlpt.us/redux-middleware/09-cors-and-proxy.html

참고 사이트에 내용을 개인적으로 복습하기 편하도록 재구성한 글입니다.
자세한 설명은 참고 사이트를 살펴보시기 바랍니다.

---

SOP

---

CORS를 알아보기 전에 SOP 개념부터 살펴보겠습니다. SOP는 same-origin policy의 약자로 동일 출처 정책을 뜻합니다. 서버 입장에서 같은 출처에 대한 HTTP 요청만을 허락하는 정책으로, 웹 어플리케이션에서 중요한 보안 모델입니다.

동일 출처라는 말은 클라이언트와 서버의 URL의 프로토콜, 호스트, 포트가 모두 동일해야함을 의미합니다.

보통 자바스크립트에 의한 데이터 접근을 제한하며, HTML 태그를 통한 이미지, CSS, Script 요청은 제한되지 않습니다.하지만 웹 어플리케이션을 개발하다보면 외부 리소스를 요청해야할 일이 매우 많기 때문에, 이를 해결하기 위해 나온 정책이 CORS입니다.

---

CORS란?

---

Cross-Origin Resource Sharing의 약자로 번역하면 교차 출처 리소스 공유 정책이다. 출처가 다른 곳의 자원에 접근할 수 있도록 브라우저에게 권한을 부여하는 정책입니다.

네이버에서 카카오 서버의 자원을 받아오려면 SOP에 의해 제한됩니다. 이렇게 다른 출처의 리소스를 불러오려면 그 출처의 서버에서 리소스를 요청하는 출처를 허용하는 CORS 응답 헤더를 반환하도록 설정해야합니다.

---

CORS가 동작하는 3가지 시나리오

---

CORS가 동작하는 3가지 시나리오는 다음과 같습니다.

📌 단순 요청
📌 프리플라이트(preflight) 요청
📌 인증정보(credentialed)를 포함한 요청

단순 요청

단순 요청은 클라이언트가 요청 헤더에 Origin(출처)에 대한 정보를 담아 요청을 보내면, 서버에서 Access-Control-Allow-Origin 헤더에 접근을 허용할 Origin에 정보를 담아 응답하고, 브라우저가 요청한 Origin과 허용된 Origin의 비교를 통해 요청한 응답을 제공하는 방식입니다.

프리플라이트 요청

프리플라이트 요청은 일반적으로 우리가 웹 어플리케이션을 개발할 때 자주 마주치는 시나리오입니다. 이 시나리오에 해당하는 상황일 때 브라우저는 요청을 한번에 보내지 않고 예비 요청과 본 요청으로 나누어서 서버로 전송합니다.

이때 보내는 예비 요청을 프리플라이트라고 부르며, 이 요청에는 HTTP 메서드 중 OPTIONS 메서드가 사용됩니다. 예비 요청의 역할은 본 요청을 보내기 전에 브라우저 스스로 이 요청을 보내는 것이 안전한지 확인하는 과정입니다.

예비 요청에 대한 응답으로 서버가 어떤 것들을 허용하고, 금지하고 있는지에 대한 정보를 보냅니다. 이후 자신이 보낸 예비 요청과 서버가 응답에 담아준 허용 정책을 비교한 후, 이 요청을 보내는 것이 안전하다고 판단되면 본 요청을 보냅니다. 이후 서버가 본 요청에 대한 응답을 하게 되면 브라우저는 최종적으로 이 응답 데이터를 자바스크립트에게 넘겨줍니다.

인증정보를 포함한 요청

인증정보를 포함한 요청은 좀 더 보안을 강화하고 싶을 때 사용하는 방법입니다. 기본적으로 브라우저가 제공하는 비동기 리소스 요청 API는 별도의 옵션 없이 쿠키 정보나 인증과 관련된 헤더를 함부로 요청에 담지 않습니다. 이때 요청에 인증과 관련된 정보를 담을 수 있게 해주는 옵션이 credentials 옵션입니다.

이 옵션에는 3가지 값을 사용할 수 있으며, 다음과 같습니다.

same-origin(기본값)
같은 출처 간 요청에만 인증 정보를 담을 수 있습니다.

include
모든 요청에 정보를 담을 수 있습니다.

omit
모든 요청에 인증 정보를 담지 않습니다.

만약 우리가 same-origin이나 include와 같은 옵션을 사용하여 리소스 요청에 인증 정보가 포함된다면, 브라우저는 다른 출처의 리소스를 요청할 때 단순히 Access-Control-Allow-Origin만 확인하는 것이 아니라 두 가지 조건을 더 검사하게 됩니다.

📌 Access-Control-Allow-Origin에는 *를 사용할 수 없으며, 명시적인 URL이어야 합니다.
📌 응답 헤더에는 반드시 Access-Control-Allow-Credentials: true가 존재해야합니다.