CORS 란

• Cross-Origin Resource Sharing 의 줄임말로 출처(Origin)가 다른 자원들을 공유한다는 뜻
• CORS 정책에 준수하여 한 출처에 있는 자원에서 다른 출처에 있는 자원에 요청 및 접근할 수 있다
• 다른 출처에 있는 자원을 요청한다고 하면, 이를 교차 출처 요청이라고 부르며 이때 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다
• 웹 애플리케이션은 리소스가 자신의 출처와 다를 때 교차 출처 HTTP 요청을 실행한다
• 출처 : 프로토콜 + 호스트 + 포트 를 말한다. (아래 이미지 참고)
  

SOP (Same-Origin-Policy)

SOP 란 동일 Same-Origin-Policy 의 줄임말로 동일 출처 정책을 의미한다. 웹 브라우저는 기본적으로 동일 출처 정책을 적용하고 있으며 다른 출처로 부터 요청된 자원들에 대해서는 읽기에 대한 접근을 막고 있다. 만약 다른 출처로 부터의 요청을 모두 허용하게 되면 출처가 다른 웹 사이트끼리 서로를 모방할 수 있으며 민감한 개인정보나 생각지 못한 문제를 일으킬 수 있어 보안의 문제가 심각해질 수 있다.

SOP 를 통해 <img>, <link> 와 같은 태그들을 제외하고는 다른 출처의 자원을 얻어올 수 없지만 다른 출처의 자원에 접근 해야할 일도 빈번하게 발생한다. 때문에 CORS 가 등장하게 되었으며 CORS 정책에 따라 교차 출처 요청을 할 경우 다른 출처의 자원에 접근이 가능해진다.

SOR (Same-Origin-Request) vs COR (Cross-Origin-Request)

CORS 헤더 목록

요청

• Origin
  • 어디서 요청을 했는지 서버에 알려주는 주소
• Access-Control-Request-Method
  • Prefilght 요청을 할 때 실제 요청에서 어떤 메서드를 사용할 것인지 서버에게 알리기 위해 사용된다.
• Access-Control-Request-Headers
  • preflgiht 요청을 할 때 실제 요청에서 어떤 header를 사용할 것인지 서버에게 알리기 위해 사용된다.

응답

• Access-Control-Allow-Origin
  • Browser가 해당 origin이 자원에 접근할 수 있도록 허용한다. 혹은 *<- 은 credentials가 없는 요청에 한해 모든 origin에서 접근이 가능하도록 허용한다.
• Access-Control-Expose-Headers
  • browser가 엑세스할 수 있는 서버 호이트리스트 헤더를 허용한다.
• Access-Control-Max-Age
  • 얼마나 오랫동안 preflight요청이 캐싱 될 수 있는지를 나타낸다
• Access-Control-Allow-Credentials
  • Credentials가 true일 때 요청에 대한 응답이 노출될 수 있는지를 나타낸다.
  • Preflight요청에 대한 응답의 일부로 사용되는 경우 실제 자격 증명을 사용하여 실제 요청을 수행할 수 있는지를 나타낸다
  • 간단한 GET요청은 preflight되지 않으므로 자격증명이 있는 리소스를 요청하면 헤더가 리소스와 함께 반환되지 않으면 브라우저에서 응답을 무시하고 웹 콘텐트로 반환하지 않는다.
• Access-Control-Allow-Methods
  • preflight 요청에 대한 응답으로 허용되는 메서드들을 나타낸다.
• Acess-Control-Allow-Headers
  • preflight요청에 대한 응답으로 실제 요청시 사용할 수 있는 HTTP헤더를 나타낸다.

CORS 종류

단순요청 (Simple Request)

• GET, HEAD, POST 요청만 가능합니다
• Accept, Accept-Language, Contet-Language, Content-Type과 같은 CORS 안전 리스트 헤더 혹은 User-Agent 헤더
• Contet-Type 헤더는 application/x-www-form-urlencoded, multipart/form-data and text/plain만 가능
• ReadableStream 객체가 사용되지 않습니다
• XMLHttpRequest 객체를 사용하여 요청하면, 요청에서 사용된 XMLHttpRequest.upload에 의해 반환되는 객체에 어떠한 이벤트 리스너도 등록되지 않습니다

과정

오류 메세지

프리 플라이트 (Preflight Request)

프리 플라이트는 OPTIONS 메서드로 HTTP 요청을 미리 보내 실제 요청이 전송하기에 안전한지 확인한다. 다른 출처 요청이 유저 데이터에 영향을 줄 수 있기 때문에 미리 전송한다는 의미이다.

CORS 요청 헤더 포함목록

• origin
• access-control-request-method
• access-control-request-headers

CORS 응답 헤더 포함목록

• access-control-allow-origin
• access-control-allow-methods
• access-control-allow-headers
• access-control-max-age

과정

신용 요청 (Crendentialed Request)

신용 요청은 쿠키, 인증 헤더, TLS 클라이언트 인증서 등의 신용정보와 함께 요청한다. 기본적으로, CORS 정책은 다른 출처 요청에 인증정보 포함을 허용하지 않으며 요청에 인증을 포함하는 플래그가 있거나 access-control-allow-credentials가 true로 설정 한다면 요청할 수 있다.

과정

오류 메세지

출처

CORS란 무엇인가?
CORS란 무엇인가?