CORS(Cross Origin Resource Sharing)


<리얼월드 HTTP> 도서의 내용을 요약 정리하고 관련 내용을 추가하였습니다.


CORS란, 오리진(출처, 도메인) 사이에 리소스(자원)를 공유하는 방법을 말한다. 여기서 리소스 공유는 XMLHttpRequestFetch API를 통하여 다른 출처의 자원에 접근하는 것이다. 보안을 위해 모든 서버에서 누구나 접근하는 것을 막고 클라이언트에서 서버로 액세스하기 직전까지의 권한을 확인한다.

보안 상의 이유로, 브라우저는 스크립트에서 시작한 서로 다른 출처의 HTTP 요청을 제한한다. XMLHttpRequest와 Fetch API를 사용하는 웹 애플리케이션은 자신의 출처와 동일한 리소스만 불러올 수 있으며, 예외적으로 다른 출처의 리소스를 불러오려면 자신의 출처를 증명할 수 있는 올바른 CORS 헤더를 포함해야 한다.

CORS에는 프리플라이트 요청을 하지않는 simple cross-origin request와 프리플라이트 요청이 필요한 actual request로 나뉜다. 프리플라이트(prefligt) 요청은 실제 통신 전에 권한을 확인하려 보내는 요청이다.

Simple Cross-Origin Request

simple cross-origin request가 되는 조건은 다음 3가지이다.

  • http 요청 메서드가 단순 메서드(GET, POST, HEAD)
  • 헤더가 모드 심플 헤더(accept, accept-language, content-language, content-type 이외는 제외)
  • Content-type을 포함하는 경우, 그 값이 applicatin/x-www-form-urlencoded, multipart/form-data, text-plain 중 하나

프리플라이트 요청

simple cross-origin request 조건에 맞지 않는 경우 프리플라이트 요청이 필수이다. 프리플라이트를 할 때 클라이언트는 아래 헤더를 붙여 OPTIONS메서드로 전송한다.

  • Access-control-request-method 요청헤더 : 통신을 허용하길 원하는 메서드 지정
  • Access-control-reqeust-headers 요청 헤더: 허용하길 원하는 헤더를 쉼표로 구분해 나열
  • Origin 요청 헤더 : 통신 출처 웹 페이지의 도메인 이름을 지정

프리플라이트 요청을 받고 나면, 서버측은 허용하는 통신 내용을 아래 헤더를 사용해 브라우저 측에 전달한다. 허용하지 않는 경우 각각의 헤더가 부여되지 않거나 stauts = 401 forbidden으로 반환되기도 한다.

  • Access-control-allow-origin 응답헤더 : 통신을 허용할 오리진 이름. 쿠키를 이용하지 않을 때는 와일드카드(*)로 모든 도메인을 일괄적으로 허용하기도 한다.
  • Access-control-allow-method 응답헤더 : 대상 url에 허용되는 메서드 이름.
  • Access-control-allow-header 응답헤더 : 대상 url에 허용되는 헤더 이름 목록. 플라이트요청이 필요없는 간단한 헤더는 생략될 수 있다.
  • Access-control-allow-credentials 응답헤더: 쿠키 등의 자격 증명을 서버가 받는 것을 허용할 때 부여된다. 값으로는 true만 설정할 수 있다.
  • Access-control-expose-header 응답헤더 : 허용이 아니라 서버에서 반환하는 응답 헤더 중 스크립트에서 참조할 수 있는 헤더 이름목록을 반환한다.

통신 내용을 일정 기간 캐시해서 통신을 생략하는 방법도 사양에 포함되어 있다. 이 지시에는 다음 헤더를 사용한다.

  • Access-control-max-age 응답 헤더 : cahce-control을 사용한 캐시와 마찬가지로 캐시 가능한 초 수를 서버에서 클라이언트로 전달한다.

프리플라이트 요청이 허용되면 실제 요청을 전송한다.

참고
https://developer.mozilla.org/ko/docs/Web/HTTP/CORS

Comments