CORS란
- CORS(Cross-Origin Resource Sharing)는 출처가 다른 자원들을 공유한다는 뜻으로, 한 출처에 있는 자원에서 다른 출처에 있는 자원에 접근하도록 하는 개념이다.
- 교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제입니다. 웹 애플리케이션은 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 교차 출처 HTTP 요청을 실행한다.
출처(Origin)란
위의 구성요소 중에서 Protocol + Host + Port 3가지가 같으면 동일 출처(Origin)라고 한다.
CORS가 필요한 이유
웹에는 크게 SOP(Same Origin Policy)와 CORS 두 가지 정책이 있다. 여기서 SOP란 같은 출처에서만 리소스를 공유할 수 있는 규칙을 가진 정책이다. 하지만 클라이언트와 서버가 동일한 출처를 가지게 되는 경우가 많지 않고 출처가 다른데 통신을 무조건 허용하기에는 보안적인 이슈가 크기 때문에 여러 제한을 걸어 통신을 하게끔 하는 정책이 CORS이다.
CORS 정책 3가지
단순요청(Simple Request)
단순 요청은 예비 요청을 보내지 않고 서버에 본 요청을 보낸 후, 서버가 응답 헤더에 Access-Control-Allow-Origin과 같은 값을 보내면 그 때 CORS 정책 위반 여부를 확인한다.
- GET, HEAD, POST 요청만 가능하다.
- 자동으로 설정되는 헤더나 Accept, Accept-Language, Contet-Language, Content-Type 헤더만 가능하다.
- Content-Type이 application/x-www-form-urlendcoded, multipart/form-data, text/plain인 경우만 가능하다.
동작 방식
-
서버로 요청을 한다.
-
서버의 응답이 왔을때 브라우저가 요청한 Origin과 응당한 Access-Control-Request-Header의 값을 비교하여 유효한 요청이라면 리소스를 응답하고, 유효하지 않은 요청이라면 브라우저에서 막고 에러를 발생한다.
프리 플라이트(Preflight Request)
프리 플라이트는 OPTIONS 메서드로 HTTP 요청을 미리 보내 실제 요청이 전송하기에 안전한지 확인한다. 다른 출처 요청이 유저 데이터에 영향을 줄 수 있기 때문에 미리 전송한다는 의미이다.
동작 방식
-
Origin헤더에 현재 요청하는 origin과, Access-control-request-method헤더에 요청하는 HTTP method와 Access-Control-Request-Headers 요청 시 사용할 헤더를 OPTIONS 메서드로 서버로 요청한다. 이때 내용물은 없이 헤더만 전송한다.
-
Browser가 서버에서 응답한 헤더를 보고 유효한 요청인지 확인한다. 만약 유효하지 않은 요청이라면 요청은 중단되고 에러가 발생한다. 유효한 요청이라면 원래 요청으로 보내려던 요청을 다시 요청하여 리소스를 응답받는다.
요청 헤더 목록
- Origin
- Access-Control-Request-Method
preflight 요청을 할 때 실제 요청에서 어떤 메서드를 사용할 것인지 서버에게 알리기 위해 사용된다. - Access-Control-Request-Headers
preflight요청을 할 때 실제 요청에서 어떤 header를 사용할 것인지 서버에게 알리기 위해 사용된다.
응답 헤더 목록
- Access-Control-Allow-Origin
브라우저가 해당 origin이 자원에 접근할 수 있도록 허용한다. 혹은 '*'은 credentials이 없는 요청에 한해서 모든 origin에서 접근이 가능하도록 허용한다. - Access-Control-Max-Age
얼마나 오랫동안 preflight요청이 캐싱 될 수 있는지를 나타낸다. - Access-Control-Allow-Methods
preflight 요청에 대한 대한 응답으로 허용되는 메서드들을 나타낸다. - Access-Control-Allow-Headers
preflight 요청에 대한 대한 응답으로 실제 요청 시 사용할 수 있는 HTTP 헤더를 나타낸다.
신용 요청(Credentialed Request)
신용 요청은 쿠키, 인증 헤더, TLS 클라이언트 인증서 등의 신용정보와 함께 요청한다. 기본적으로, CORS 정책은 다른 출처 요청에 인증정보 포함을 허용하지 않는다. 요청에 인증을 포함하는 플래그가 있거나 access-control-allow-credentials가 true로 설정 한다면 요청할 수 있다.
참고 문서 및 링크
