CORS

박형석·2022년 2월 28일
0

정의

교차출처 리소스 공유(cross-origin Resource Sharing)

CORS는 추가 HTTP헤더를 사용하여 한 출처에서 실행중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저애 알려주는 체제이다.

예를 들어 내가 운영하는 홈페이지 안에 날씨탭을 만들어 서비스를 제공하고 싶을때 외부 리소스인 기상청 open api를 이용하여 나타낼수 있다.

특징

  • 웹 브라우저에서 외부 도메인 서버와 통신하기 위한 방식을 표준화한 HTTP 헤더 기반 매커니즘
  • 서버쪽에서 클라이언트를 대상으로 리소스의 허용여부를 결정하는 방법이다.
  • 클라이언트에서 요청을 보낸 후, 서버로부터 받은 Access-Control-Allow-origin 헤더 속성을 통해 접속가능 여부를 확인한다.

CORS의 탄생 배경

예전에서는 자원을 저장하는 서버와 웹 페이지가 하나의 서버에서 만들어졌다.

그래서 보안을 위해 브라우저는 다른 도메인에서 서버의 자원을 요청을 하지 못하게 막아 놓았다.

그렇게 시간이 흐른 후 웹기술이 발전하여 페이지와 자원을 분리하거나 다른 서버의 자원을 보내는 경우가 많이 생겼다.

주로 편법을 이용해서 다른 서버의 자원을 가져다썼다. 이런 방법은 굉장히 유용했고 이 편법은 많은 수요를 가지게 되었다.

하지만 웹 브라우저에서 이 편법을 갑자기 막아버리게 되면 많은 수요자들의 불만이 터질게 분명했다.

그래서 브라우저가 편법보다는 공식적으로 외부 도메인 자원을 가져다 쓰라고 만든것이 CORS 이다.

이러한 CORS 덕분에 자원 공유 요청을 받은 웹 서버가 허용할 경우 다른 도메인의 웹 페이지 스크립트에서도 지원을 주고 받을 수 있게 해준다.

한마디로 금지 시키기에는 너무나도 개꿀인 기술이다.

Preflight Request

  • 클라이언트에서 요청하려는 URL이 외부 도메인일 경우, 웹브라우저에서 자체실행.
  • 요청하려는 경로와 같은 URL에 대해 서버에 Option 메서드로 권한을 확인한다.
  • 실제 요청이 유효한지 서버가 미리 파악할 수 있도록 하는 수단.

Response headers

  • Access-Control-Allow-Origin
    웹 브라우저 스크립트 엔진에서 perflight 요청 응답으로 Access-Control-Allow-Origin 헤더의 값이 * 이라면 모든 도메인에서 요청을 허용한다는 것으로 브라우저는 판단.

  • Access-Control-Expose-Headers
    클라이언트 요청이 쿠기를 통해서 자격 증명을 하는 경우에 true, true를 응답받은 클라이언트는 실제 요청 시 서버에서 정의된 규격의 인증값이 담긴 쿠키를 같이 보내야 함.

  • Access-Control-Expose-Headers
    클라이언트 요청에 포함되어도 되는 사용자 정의 헤더

  • Access-Control-Max-Age
    클라이언트에서 preflight 의 요청 결과를 저장할 기간을 지정, 클라이언트에서 preflight 요청의 결과를 저장하고 있을 시간이다. 해당 시간 동안은 preflight 요청을 다시 하지 않게됨.

  • Access-Control-Allow-Methods
    요청을 허용하는 메서드, 기본값은 GET, POST라고 보면된다. 이 헤더가 없으면 GET과 POST요청만 가능하다. 만약 이 헤더가 지정되어 있으면 클라이언는 헤더 값에 해당하는 메서드일 경우에만 실제 요청을 시도한다.

  • Access-Control-Allow-Headers
    요청을 허용하는 헤더.

profile
Better Than Yesterday

0개의 댓글