HTTP - 9. CORS

Cross-Origin Resource Sharing (CORS)

한 도메인에서 로드되어 다른 도메인에 있는 리소스와 상호 작용하는 클라이언트 웹 어플리케이션에 대한 방법을 정의한 표준

HTTP 요청은 기본적으로 Cross-Site HTTP Request가 가능하다.

-       Cross-Site HTTP Request
<img> 태그로 다른 도메인의 파일을 가져오거나, <link> 태그로 다른 도메인의 css를 가져오거나, <script> 태그로 다른 도메인의 자바스크립트 라이브러리를 가져오는 것이 가능하다.

실행 중인 웹 상에서 다른 서버의 자원에 접근할 권한을 갖도록 브라우저에 알리기 위해 추가 HTTP 헤더를 사용하는 방식. 뉴스 기사 사이트에 유튜브 영상이 업로드 되어있어 해당 동영상 컨텐츠를 받아와야 하는 경우 사용된다. CORS 헤더를 포함하지 않으면 보안 상의 이유(Same origin policy: 하나의 origin에서 로드된 문서나 스크립트가 다른 출처 자원과 상호작용하지 못하도록 제약)로 요청을 제한한다.

브라우저가 요청 내용을 분석하여 4가지 방식 중 하나로 서버에 요청한다.

-       Simple Request: 다음 3가지 조건을 모두 만족하는 경우

n  GET, HEAD, POST 중 하나의 메소드 사용

n  POST일 경우 Content-Type이 다음 중 하나 사용

u  application/x-www-form-urlencoded (데이터 파일 전송 시 사용되는 타입)

u  multipart/form-data (바이너리 데이터 전송 시 사용되는 타입)

u  text/plain (일반 텍스트 데이터, 미지정 시 디폴트)

n  커스텀 헤더 없음

 

-       Preflight Request: Simple Request 조건에 해당하지 않으면 브라우저가 요청하는 방식. OPTIONS 메소드를 먼저 사용하여 실제(actual) 요청에 사용할 메소드를 결정하고 안전하게 전송되도록 한다

n  GET, HEAD, POST 외의 다른 방식으로 요청 가능

n  다른 Content-Type 가능

n  커스텀 헤더 사용 가능

예비 요청으로, 예비 요청/응답 후 본 요청/응답(Actual)한다.

-       Request with Credential: HTTP Cookie와 HTTP Authentication 정보를 인식하는 요청
요청 시 Credential 요청을 보내며, 서버는 헤더에 Access-Control-Allow-Credentials: true를 포함한다. Access-Control-Allow-Origin 헤더에는 구체적인 도메인이 온다.

-       Request without Credential: CORS 요청은 기본적으로 Non-Credential 요청이다.

-       CORS 관련 Response 헤더

Access-Control-Allow-Origin	지정된 도메인의 요청만 서버 리소스에 접근 가능
Access-Control-Expose-Headers	브라우저 측에서 접근 가능하게 허용
Access-Control-Max-Age	Preflight request 결과가 캐쉬에 남아 있는 시간 초
Access-Control-Allow-Credentials	Request with credential 방식 설정
Access-Control-Allow-Methods	Preflight request에 대한 응답으로, 리소스 접근 가능 메소드 지정
Access-Control-Allow-Headers	Preflight request에 대한 응답으로, Actual request에 사용 가능한 헤더 지정

 

-       CORS 관련 Request 헤더

Origin	Cross-site 요청 도메인 URI, 반드시 포함. 포트까지만 명시한다.
Access-Control-Request-Method	Preflight request 시 Actual request에서 사용할 메소드
Access-Control-Request-Headers	Preflight request 시 Actual request에서 어떤 헤더를 사용할지 지정