3주차 개념 스터디 - CORS

[ CORS란? ]

• 도메인 또는 포트가 다른 서버의 자원을 요청하는 매커니즘
• Cross-Origin Resource Sharing의 약자로, 추가적인 HTTP header를 사용하여 애플리케이션이 다른 origin의 리소스에 접근할 수 있도록 권한을 부여하는 메커니즘이다.
• CORS 체제는 브라우저와 서버간의 안전한 교차 출처 요청 및 데이터 전송을 지원한다.
• 최신 브라우저는 XMLHttpRequest 또는 Fetch와 같은 API에서 CORS를 사용하여 교차 출처 HTTP 요청의 위험을 완화한다.
• 웹 애플리케이션은 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 교차 출처 HTTP 요청을 실행하는데, 브라우저는 보안상의 문제로 스크립트에서 시작한 교차 출처 HTTP요청을 제한한다.
• 따라서 다른 출처의 리소스를 불러오기 위해서는 해당 출처에서 교차 출처 리소스 공유에 대한 헤더(CORS)를 응답 시 반환해주어야 한다.

 

[ CORS의 동작 방법 ]

- 웹은 다른 출처의 리소스를 요청할 때 HTP 프로토콜을 사용하여 요청을 하는데, 이 때 브라우저는 요청 헤더(request header)의 Origin 필드에 요청을 보내는 출처를 담아 전송한다

- 서버는 요청에 대한 응답을 위해 응답 헤더(response header)에 Access-Control-Allow-Origin이라는 값에 '이 리소스를 접근하는 것이 허용된 출처'를 내려준다

- 이후 응답을 받은 브라우저는 자신이 보냈던 요청의 Origin과 서버가 보내준 응답의 Access-Control-Allow-Origin을 비교한 후 이 응답이 유효한지 아닌지를 결정한다

 

 

[ CORS 동작 시나리오 ]

Preflight Request

- Preflight 방식은 요청을 한 번에 보내는 것이 아니라, 예비 요청과 본 요청으로 나누어서 서버에 전송한다. 본 요청을 보내기 전 미리 예비로 보내는 요청을 'Preflight'라고 하며, HTTP 메서드 중 하나인 OPTIONS 메서드를 사용한다.

- 예비 요청을 함으로써 본 요청을 보내기 전 브라우저 스스로가 요청을 보내는 것에 대한 안전성을 확인할 수 있다.

- 서버는 이 예비 요청에 대한 응답으로 현재 자신이 어떤 것들을 허용하고, 어떤 것들을 금지하고 있는지에 대한 정보를 응답 헤더에 담아서 브라우저에게 다시 보낸다.

- 단순히 Origin에 대한 정보뿐만 아니라 자신이 예비 요청 이후에 보낼 본 요청에 대한 다른 정보(헤더, HTTP 메서드 등)들도 함께 전송한다.

 

 

Simple Request

- 이는 Preflight 요청과는 달리, 예비 요청을 보내지 않고 서버에게 바로 본 요청을 전송한다.

- 이후 서버가 응답 헤더에 Access-Control-Allow-Origin과 같은 값을 보내주면 그 때 브라우저가 CORS 정책 위반 여부를 검사하는 방식이다.

- Simple Request의 동작 조건은 아래와 같다

1. 요청의 메소드는 GET, HEAD, POST 중 하나여야 한다
2. Accept, Accept-Language, Content-Language, Content-Type, DPR, Downlink, Save-Data, Viewport-Width, Width 외의 다른 헤더를 사용하면 안된다
3. 만약 Content-Type을 사용하는 경우에는 application/x-www-form-urlencoded, multipart/form-data, text/plain만 허용된다

 

Credentialed Request

- 인증된 요청을 사용하는 방법으로, 다른 출처 간 통신의 보안을 강화하고자 할 때 사용한다

- 브라우저가 제공하는 비동기 리소스 요청 API인 XMLHttpRequest 객체나 fetch API는 별도의 옵션 없이 브라우저의 쿠키 정보나 인증과 관련된 헤더를 함부로 요청에 담지 않는다

- 이 때 요청에 인증과 관련된 정보를 담을 수 있게 해주는 credentials 옵션을 사용한다

- credentials 옵션도 3가지 옵션을 가지고 있다

1. same-origin : 같은 출처 간 요청에만 인증 정보를 담을 수 있다
2. include : 모든 요청에 인증 정보를 담을 수 있다
3. omit - : 모든 요청에 인증 정보를 담지 않는다

- 동작 조건은 아래와 같다

1. Access-Control-Allow-Origin : *이면 안되며, 명시적인 URL을 설정하여야 한다 (ex. Access-Control-Allow-Origin: https://xxx.com)

1. 응답 헤더에는 반드시 Access-Control-Allow-Credentials : true 가 존재해야 한다