20180420 CORS (수정 : 20191104)

CORS

개요.

실무를 하면서 CORS 문제에 봉착하게 되었다. 1년전에 작성한 글이지만 다시금 정리가 필요하며, 기억하기 위함이다.

선행 설명.

• XMLHttpRequest( 이하 XHR ) 객체는 서버와 상호작용하기 위해 사용된다. 이는 전체 페이지에 대한 리로드 없이 요청 URL 로부터 데이터를 받아올 수 있는데, 흔히 우리가 알고 있는 비동기 ajax 방식에서 주로 쓰인다.

• XHR 은 same-origin 정책을 따르는데 XHR 은 항상 자신과 동일한 도메인으로 HTTP 요청을 보내는 것이 가능했다.

• 여기서 same-origin 정책이란, another origin 으로부터 문서 또는 스크립트 문과 상호작용 하는 것을 제한하는 보안 방식이다.

• 따라서  same-origin 은 세 개의 내용을 판단해서 동일한 origin 인지 식별한다.

• protocol

• port

• host

설명

• 위와 같은 SOP (same-origin-policy) 는 과거에는 괜찮았지만 요즘 같이 api 호출이 잦아지고 외부 도메인 서버와의 연결 및 서드파티 애플리케이션이 많이 생겨나가면서 이를 극복할 필요성을 있었고 이에 따라 나온 것이 CORS (Cross-Origin-Resource-Sharing) 이다.

• 클라이언트는 CORS 를 위해서 새로운 HTTP 헤더를 추가한다.

• 서버는 클라이언트가 요청한 헤더를 확인해서 데이터 요청 여부를 판단한다.

## Prefilight Request

브라우저는 실제 요청을 전송하기 전에 options 메소드를 이용해서 preflight 요청을 서버로 전송한다. preflight 요청을 받은 서버는 CORS 관련 정보를 헤더에 담아서 아래와 같은 응답으로 전송한다.

- Request Header

• Access-Control-Request-Method
• 실제 요청 때 사용할 메소드
• Access-Control-Request-Headers
• 브라우저가 실제 요청을 보낼 때 헤더에 추가할 커스텀 속성

- Response Header

• Access-Control-Allow-Origin : 허용하는 Origin
• Access-Control-Request-Methods : 허용하는 요청 메소드
• Access-Control-Allow-Headers : 허용하는 헤더 속성
• Access-Control-Max-Age : prefilight request 캐시하는 시간 (초단위)

## With Credentials

표준 CORS 요청은 기본적으로 Non-Credential 요청으로 쿠키를 전송하지 않는다. 쿠키를 요청에 포함하고 싶닥면 XHR 객체에 withCredentials 속성 값을 true 로 설정해준다.

- Response Header

• Access-Control-Allow-Credentials : true (사용하기 위해선 서버 Response 헤더에 포함)

[ 참고링크 ]

[ HTTP 접근제어 (CORS) ]

https://www.popit.kr/cors-preflight-%EC%9D%B8%EC%A6%9D-%EC%B2%98%EB%A6%AC-%EA%B4%80%EB%A0%A8-%EC%82%BD%EC%A7%88/

https://juicyjusung.github.io/2019/08/21/http/cors/

https://homoefficio.github.io/2015/07/21/Cross-Origin-Resource-Sharing/