CORS

CORS란?

• Browser Security Model 에 속한 개념으로, 브라우저의 보안에 관련된 개념이다.
• Cross Origin Resource Sharing 의 약어로, 교차 출처 리소스 공유라는 뜻을 가진다.
  → 다른 주소간의 리소스를 공유한다.
• 어떤 origin에서 실행 중인 웹 앱이 다른 origin의 리소스에 접근 할 수 있는 권한을 부여하도록 브라우저에 알리는 메커니즘.

탄생배경

• 과거에는 서버에서 전달받은 클라이언트를 그대로 내려받았기 때문에 Same Origin 을 가지고 있었다.
  → CORS 와 반대의 개념인 SOP(Same Origin Policy, 동일 출처 정책)
• 그러나 근래에 웹이 발전하게 되면서, 클라이언트를 전달한 서버에서 전달한 리소스 뿐만 아니라 다른 서버의 리소스를 활용하는 일이 많아졌다.
  → Cross Origin
• CORS 는 Same Origin 이 아닌, Cross Origin 일 때 다른 서버의 리소스를 사용하는 것을 허용하는 것을 뜻한다.
  → A클라이언트 - A서버 가 아닌, A 클라이언트 - B 서버 간의 리소스 요청을 위한 것

어떻게?

• 데이터를 주고받는 상대가 Cross Origin 인 경우 상대가 나의 서버에 어떤 행동을 할 지 모르므로, 서버에서 허용하는 Origin 을 지정해 줄 수 있다.
  → 이외엔 요청 할 수 없다.
• 서버는 허락할 Origin 뿐만 아니라, 허용할 요청의 헤더, HTTP 메소드, preflight 캐시 시간 등등을 설정 할 수 있다.
• 즉, 서버에서 허락해주어야 다른 Origin 인 클라이언트가 해당 서버에 요청을 할 수 있다는 것이다.
• 이때 클라이언트는 OPTIONS 메소드를 통한 preflight 요청을 먼저 전송하고, 이후 서버에서 해당 내용을 확인 한 후 CORS 헤더와 비교하여 요청의 허용 여부를 응답하게 되고, 허용된 경우 본 요청을 전송한다.

preflighted request

• preflight 요청에 담긴 내용이 서버의 CORS 설정에 의해 허용되는 경우에 본 요청을 전달 할 수 있다.
  → prefilght 요청은 OPTIONS 메소드를 사용하는 요청으로, 본 요청이 전에 먼저 전달된다.

simple request

• preflighted request 와 달리 Cross Origin 이여도 prefilght 요청을 사용하지 않는 요청을 뜻한다.
• GET, POST, HEAD 중 하나의 메소드를 사용하는가?
• 사용하는 헤더가 자동으로 설정된 헤더이거나, Accept, Accept-Language, Content-Language, Content-Type 중 하나인가?
• Content-Type 인 경우 아래의 값만 허용된다.
  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain
• 위의 내용 중 하나가 일치하는 것이 아니라, 전부 일치하여야 한다.

https://developer.mozilla.org/ko/docs/Web/HTTP/CORS#접근제어시나리오_예제
→ 참고

CORS 헤더

• 해당 헤더를 기반으로 preflight 요청을 비교하고, 요청의 허용 여부를 결정한다.

'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
'Access-Control-Allow-Headers': 'Content-Type, Accept',
'Access-Control-Max-Age': 10

• Access-Control-Allow-Origin
  • 접속을 허용할 origin 을 지정한다.
  • 프로토콜(scheme), 서브도메인, 도메인, 포트가 동일해야 같은 origin으로 취급한다.
  • 모든 origin을 허용하기 위해서는 * 을 사용하는 방법이 있다.
    → 대신 보안에 취약하다.
• Access-Control-Allow-Methods
  • 요청을 할 때 허용되는 메소드를 지정한다.
    → GET, POST, PUT, DELETE, OPTIONS
• Access-Control-Allow-Headers
  • 허용할 헤더를 지정한다.
• Access-Control-Max-Age
  • preflight 에 대한 응답을 캐시(임시저장)하여 해당 시간동안은 preflight 의 비교를 하지 않는다.
  • 즉, 이전의 결과를 저장하여 허용된 경우 해당 시간만큼 preflight의 비교를 면제한다.
  • 단위는 초 단위 이며, 가장 길게 설정 할 수 있는 것은 86400 으로, 24시간에 해당한다.

---

+

• https://docs.aws.amazon.com/ko_kr/apigateway/latest/developerguide/how-to-cors.html
  → AWS의 CORS에 대한 설명
• https://vvshinevv.tistory.com/60
  → 전반적인 설명이 잘 작성된 블로그
• 정리하자면,
  1. CORS 는 클라이언트와 서버의 Origin 주소가 다를 때 권한을 부여하는 메커니즘이다.
  2. CORS 요청은 simple request 와 preflighted request 로 이루어진다.
  3. simple request 는 오리진이 달라도 preflight 를 전송하지 않고 요청을 할 수 있다.
  4. preflighted request 는 오리진이 다른 경우 preflight 를 먼저 전송하여 CORS 헤더와 비교 후 허용된다면 본 요청을 보낸다.